How to Insert space before capital letters using Jquery

Assume you have a string "HelloWorld" and you need to show as "Hello World". How you can achieve it using Jquery.

It can be done in a very simpler way as below:

"Your string".replace( /([a-z])([A-Z])/g, "$1 $2")

so here it will be "HelloWorld".replace( /([a-z])([A-Z])/g, "$1 $2") will produce "Hello World"

Enjoy!

Differentiate between 'All' and 'Any' Operators in LINQ.

In LINQ, All operator is  to check whether all the elements met the specific condition or not. While Any operator checks whether there is any element exist in the collection or not.


For Example:

int array={1,2,3,4,5};

bool result=array.All(i=>i < 6); here it will check the elements and returns true.

Similarly,

bool result= array.Any( ); // here it checks whether the collection has any elements and returns true.


Hope you Enjoyed!

Compile Time View Checking In Asp.net MVC

You might have noticed that in MVC3/MVC4 if you had done some thing wrong in the view files it will not throw any error during compilation and it will build successfully. The error in the file is only noticed during executing/rendering the view file. So in order to trap the error during the compilation time you can follow the method below:

Step-1 :
Open your solution project file in any XML Editor or in the Visual Studio itself  and you will find a tag named
<MVCBuildViews>, here it false and just make it true and save it.

<MVCBuildViews>false</MVCBuildViews>  
 change it to 
<MVCBuildViews>true</MVCBuildViews>


Thats all, so now when your view has any error then it will throw error during the compilation.

The Use of ALL Operator in LINQ

Today, I came across the All operator in LINQ. This operator returns bool value rather than records after condition is satisfied. The operator will be highly helpful when you need some kind of validation to find unique data. for e.g. Checking the existing email  or UserID registered and so on.


Lets Go with a Example to do the Task:

int [] array = { 1,2,3,4,5 };

bool result = array.All(value => value > 2 );

Console.WriteLine(result);  // Here it will print False since it will check all the values and                                         // all the values must be grater than 2.


 result = array.All(value => value < 6 );
Console.WriteLine(result); // Here it will print True since it will check all the values and                                          // found all values are less than 6.


Hope it helps you!

Error 349: Duplicate headers received from server in Google Chrome while rendering PDF using ITextSharp in Asp.Net MVC

While working on generating  PDF in Asp.Net MVC3, I got a peculiar error while rendering the PDF in Chrome browsers, which is not being found in any other browsers like Internet Explorer or Fire Fox.

This error comes because chrome browsers doesn't ignore duplicate headers. This can be addressed easily the following ways, if you or your web app is sending out headers. Then check the following things:

 1. Enclose fileName using “”. i.e

Response.Addheader('Content-Disposition: attachment; filename="' + fileName '"');

instead of

Response.Addheader('Content-Disposition: attachment; filename='+ fileName);

2. If possible replace spaces and commas (,) with underscores (_)

 string regExp = @"[^\w\d]";

Response.AddHeader("content-disposition", "attachment;filename=" + "Test_PDF_" + 
                           Regex.Replace(model.CompanyName, regExp, "_")+ "_" +

                              Regex.Replace(model.FullName, regExp, "_") + "_" +                                                         DateTime.Now.ToShortDateString());teString());

3. Explicitly tell Asp.Net MVC to override headers by setting optional replace parameter to true.

Response.AddHeader("Content-type: application/pdf",true);

Happy Coding!

How to prevent the multiple submit of record in ASP.Net MVC using JQuery

There are various methods are available to do that one, it can be done using JQuery, using sessions or Filters.


Method -1 ( Using JQuery Approach)

 $('form').submit(function () {
        if ($(this).find('.input-validation-error').length == 0) {
            $(this).find(':submit').attr('disabled', 'disabled');
        }
    });

This is the simplest method to prevent the multiple submission of the record in MVC and even it works on JQuery Unobstructive validations.

Happy Coding!

How to get a set of record from middle of the table, Say you need records from 5 to 15 from a table containing 100 records in SQL Server

Its a small query that will help you to find the records from from  n to m from a table having N records.

Where N :- total records in the table.
            n :- starting record number.
            m :- ending record number.

select top 20 * from School
except
select top (5) * from School

so, here it first select top 20 records and from it it discards the 1st top 5 records.

Enjoy!

Writing multiple condition for a Kendo Grid column Template to fetch the record.

Sometime you are required to write a template for Kendo Grid to fetch the data on a condition below is the column template to write multiple condition to do it. Its easy one, but to remember those small tricky things, I had posted this one.

Column[

{ field: "DateActivated", title: "Activated", width: 50, 

template: '#=(DateActivated==null)?"":(Status=="Requested")?"":

 kendo.toString(kendo.parseDate(DateActivated"),"MM/dd/yyyy")#',filterable: false }]

Happy Coding!

Getting the Error "The document has no pages" in PDF reporting Using ItextSharp in Asp.net MVC3/MVC4

Today while working with a project, I got a task to do i.e for creating dynamic PDFs of the View.
So I had started working on that and completed before time.

However , when I tried to put into the azure production environment, i got peculiar error which i had not observed in my dev Environment or in the stage.

The error I got is  "The document has no pages" . I started doing research into it but unable to find any solution. At last, I thought that it might be out of memory or buffering issue, no still that is not the case. the problem arises due to inability to find the relative source path that you had provided to the image source in the view while creating the PDF with the logo or images in it.

So, before deploying to the production server be sure the following things has been checked:

1) The Image file which u have used must be existing in the website inside some folder.
2) Be sure that PDF supports few file formats such as .jpg/.bmp, so use the image of that type.
3) Don't use the image source with relative URL, it will not be able to find the image. It will work in the local but throw an error in production or staging server. So better use the live site followed with the image source.


If you are still getting the same error then just try to render some text and check whether it is rendering or not. If it is rendering then there might be some image rendering issue. Is still getting the error then just recheck your code.


Happy coding!

Jquery Method to Check the File upload control Empty or not, File Size and File Type(e.g. JPG,BMP,PDF)

Html:
<input type="file" id="file" name="file" />
<span id="valFile" class=""></span> // span for showing error message.

CSS:


.field-validation-error {
    color: #f00;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #f00;
    background-color: #fee;
}


JQuery Snippet:
$(document).ready(function( )
{

//Changing the Error message of the File Upload and checking the File size and File type.
        $("#file").change(function () {

            $("#valFile").html("Please select file."); // Default Error Message
         
            var fileExtension = ['jpeg', 'jpg', 'png', 'gif', 'bmp', 'doc', 'docx', 'pdf'];

            if ($(this).val() != "") { //checking wheather the file uploader is empty or not
             
                //Checking the File type
                if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
                    $(this).addClass("input-validation-error").removeClass("valid");
                    $("#valFile").addClass("field-validation-error").removeClass("field-validation-valid")
                        .html("Invalid Filetype(only image files/doc/docx/pdf)");
                }
                else {
                    $(this).removeClass("input-validation-error").addClass("valid");
                    $("#valFile").removeClass("field-validation-error").addClass("field-validation-valid");

                    if ((this.files[0].size > 4194304) && ($(this).val() != '')) {
                        $(this).addClass("input-validation-error").removeClass("valid");
                        $("#valFile").addClass("field-validation-error").removeClass("field-validation-valid")
                            .html("File size exceeded 4MB");
                    }
                }
            } else {
                $(this).addClass("input-validation-error").removeClass("valid");
                $("#valFile").addClass("field-validation-error").removeClass("field-validation-valid");
            }
        });

});

Happy Coding!

How to create a File Upload with File Validation in Asp.net MVC / How to Use the @Html.TextBoxFor() for File Upload ?

While Wonder how to validate the Upload control in a easy way, I find this solution as the best to do it, although lot of other ways are found.This is because you need not need to write much more code as a normal razor validation will solve the problem.


My View:


 <div id="dvUpload" class="hide fieldControlContainer">
                <div class="innerDivLeft">
                    <label class="blue">Upload Document:</label>
                </div>
                <div class="innerDivRight">
                      @Html.TextBoxFor(model => model.File, new { @class = "inputTextBox", type="file" })
                      @Html.ValidationMessageFor(model => model.File)
                </div>
 </div>

The magic lies with this line  @Html.TextBoxFor(model => model.File, new { @class = "inputTextBox", type="file" }), here it will be rendered as a file upload control rather than a text because we are over riding the default behavior of input tag rendering by specifying it as type="file".

My Controller:



 public ActionResult Index(HttpPostedFileBase file, MyModel model)
        {
                  //Codes written here.
        }


MyModel:

public class MyModel
{

       [Required(ErrorMessage = "Please select file")]     // this is for model validation
        public HttpPostedFileBase File { get; set; }

}

Now your file upload validation will be checked like any other normal control.

How to make a textbox to accept only integers as Input.

Html Page:
 <input type="text" name="age" id="txtAge" />&nbsp;<span id="errormsg"></span>

JQuery Snippet for the above TextBox:

Method-1:
$(document).ready(function () {
  //called when key is pressed in textbox
  $("#txtAge").keypress(function (e) {
     //if the letter is not digit then display error and don't type anything
     if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
        //display error message
        $("#errormsg").html("Digits Only").show().fadeOut("slow");
               return false;
    }
   });
});

Method-2:
$(document).ready(function () {
    $("#txtAge").keydown(function (e) {
        if (e.shiftKey) e.preventDefault();
        else {
            var nKeyCode = e.keyCode;
            //Ignore Backspace (Keycode=8), Tab keys(Keycode=9)  & Delete(Keycode=46)
         if (nKeyCode == 8 || nKeyCode == 9 || nKeyCode == 46) return;
            if (nKeyCode < 95) {
                if (nKeyCode < 48 || nKeyCode > 57) e.preventDefault();
            } else {
                if (nKeyCode < 96 || nKeyCode > 105) e.preventDefault();
            }
        }
    });
});

Enjoy!

Uploading a file to Server in Asp.net MVC 3 /4.

View page:


@using (Html.BeginForm("Index", "MyController", FormMethod.Post , new { enctype = "multipart/form-data" }))
{
//  Controls for your Model........(see below)

 <div>
                <div class="innerLeftContainer">
                    <label >Full Name:</label>
                </div>
                <div class="innerRightContainer">
                    @Html.TextBoxFor(model => model.FullName, new {@class = "inputTextBox"})
                    @Html.ValidationMessageFor(model=>model.FullName)
                </div>
            </div>


<div id="dvUpload">
                <div class="innerLeftContainer">
                    <label>Upload Document:</label>
                </div>
                    <div class="innerRightContainer">
                        <input type="file" id="DocumentUpload" name="file" />
                    </div>
            </div>


}


Note: The Form Method and the enctype is highly required for uploading your file to the server orthrwise you will always get the HttpPostedFileBase as null.


Action Method: ( in the Controller)
 [HttpPost]
        public ActionResult Index(HttpPostedFileBase file, MyModel model)
        {
            // Verify that the user selected a file
            if (file != null && file.ContentLength > 0)
            {
                // extract only the fielname
                var fileName = Path.GetFileName(file.FileName);
                if (fileName != null)
                {
                    // store the file inside ~/App_Data/uploads folder
                    var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
                    file.SaveAs(path);
                }
            }
            // redirect back to the index action to show the form once again
            return RedirectToAction("Index");
        }

Test you Website with different screen resolution and in diferent device

While browsing, today I find out that by providing you website url  below the link helps you to test your site in different resolution.

http://quirktools.com/screenfly/

For Example: I need to test: WWW.Google.com, so give the URL in the textbox. once you give it will activate the devices resolution

Searching Records from the Kendo Grid by Date given in the Search Box.

While working on a project I came to an issue in kendo grid i.e to search the Grid records using Date.
Say , I had an accounts list from a bank in which lots of data are displayed including A/C opening date, Last log-in, Last transaction, Last Unsuccessful Log-in and there is a search box that finds the records when the date is given in the search box. But to my dismay it doesn't works for me, after spending a valuable of 1 day of my work , I had got the success.

So here is the image below:

The Code to make your grid work for dates filtration or searching:

In the web page(.html / .cshtml / .jsp etc)
<div id="grid"></div>

Script:
<script type="text/javascript">

$(document).ready(function () {

       initGrid();

      
/// This function is called when you start typing in the search textbox. Here Id of search textbox is #search.

    $('#search').keyup(function () {

        clearTimeout($.data(this, 'timer'));

        var wait = setTimeout(searchDataSource, 500);

        $(this).data('timer', wait);

    });

});

 function searchDataSource() {

        var query = $("#search").val();

        var $filter = [

                       { field: "AccOpenDate", operator: "eq", value: new Date(query) },

                       { field: "LastLogin", operator: "eq", value: new Date(query) },

                       { field: "LastTrans", operator: "eq", value: new Date(query) },

                       { field: "FaliureLogin", operator: "eq", value: new Date(query) }

        ];

        if (query.length > 2)  // search only when the no. of character typed is greater than 2

        {

            grid.data("kendoGrid").dataSource.filter({

                logic: "or",

                filters: $filter

            });

        } else if (query.length == 0)

            grid.data("kendoGrid").dataSource.filter([]);

    }

 function initGrid() {

        grid = $("#grid").kendoGrid({

            dataSource: {

                transport: { read: "/Bank/accounts" },

                schema: { data: "Data", total: "Total" },

                pageSize: 30,

                serverPaging: false,

                serverFiltering: false,

                serverSorting: false

            },

            height: gridHeight,

            change: function () {

                var selectedRows = this.select();

                selectedElement = this.dataItem(selectedRows[0]);

                showActionPane(selectedElement.Name != null && selectedElement.Name != "");

            },

            selectable: "single",

            filterable: true,

            sortable: true,

            pageable: true,

            resizable: true,

            columns: [

                { field: "Name", title: "Name", width: 60, template: '<a href="/Account/Details/#=Id#">#=Name#</a>' },

                { field: "Status", title: "Status", width: 50 },

                { field: "AccountType", title: "Account Type", width: 80 },

                { field: "AccOpenDate", title: "A/c Open Date", width: 50, template: '#=(AccOpenDate==null)?"":kendo.toString(kendo.parseDate(AccOpenDate,"0:MM/dd/yyyy"),"MM/dd/yyyy") #', filterable: true, format: "{0:M/d/yyyy}", type: "date" },

                { field: "LastLogin", title: "Last Login", width: 50, template: '#=(LastLogin==null)?"":kendo.toString(kendo.parseDate(LastLogin,"0:MM/dd/yyyy"),"MM/dd/yyyy") #', filterable: false, format: "{0:M/d/yyyy}", type: "date" },

                { field: "LastTrans", title: "Last Transaction", width: 50, template: '#=(LastTrans==null)?"":kendo.toString(kendo.parseDate(LastTrans,"0:MM/dd/yyyy"),"MM/dd/yyyy") #', filterable: false, format: "{0:M/d/yyyy}", type: "date" },

                { field: "FaliureLogin", title: "Unsuccessful Login", width: 50, template: '#=(FaliureLogin==null)?"":kendo.toString(kendo.parseDate(FaliureLogin,"0:MM/dd/yyyy"),"MM/dd/yyyy") #', filterable: false, format: "{0:M/d/yyyy}", type: "date" }

            ]

        });

    }

output:
Search records by Date through Search Textbox text:  ( here searching the record occurs on all the columns)

Search records by Date through filter Button: ( here searching the record which has opened on 04/04/2013. So two records where as in the above it is searching all the columns having 04/04/2013. so three records. 

How to count the number of check-box checked on a particular condition from a table using Jquery

Scenario: Assume that a table has data from a cricket team with details such as ID , Name, Role , Age ,City, Average. SO you need to calculate how many bowlers you have selected from the table, total no. of players selected and their average age.

Similarly, if batsman age or count is required then simply change the value of Contains to "Batsman" from the above code.

Happy Coding!

How to check all the check box when All check-box is checked and uncheck All check-box, if one of the check-box from the group is unchecked

       
<form name="frmChkForm" id="frmChkForm">
<input type="checkbox" name="chkcc9" id="chkAll">Check Me
<input type="checkbox" name="Bowler" class="chkGroup">Bowler
<input type="checkbox" name="Batsman" class="chkGroup">Batsman
<input type="checkbox" name="AllRounder" class="chkGroup">AllRounder
</form>

$("#chkAll").click(function() {
   $(".chkGroup").attr("checked", this.checked);
});

With added functionality to ensure the check all checkbox gets checked/dechecked if all individual checkboxes are checked:

$(".chkGroup").click(function() {
  $("#chkAll")[0].checked = $(".chkGroup:checked").length == $(".chkGroup").length;
});

Happy Coding!

Blank out a form/ reset a form with jQuery

First method:
<form id="form">
<input type="text" value="Here is some data" id="data" />
<input type="button" value="Clear Input" id="button" />
</form>

$(function(){
 
    $('#button').click(function(){
       $(':input','#form').not(':button, :submit, :reset, :hidden').val('').removeAttr('checked,selected');
    });
});

Second method:
function clearForms()
{
  var i;
  for (i = 0; (i < document.forms.length); i++) {
    document.forms[i].reset();
  }
}

Happy Coding!

Ajax method of calling Action method of a controller:

I need to call a action method in order to save the uploaded image file using Jquery or the Ajax method. So below is the code for it.


$.ajax({
           url: "/Image/UploadTest", // Image is the controller & UploadTest is Action Method
           type: "POST",
           data: $("#frmTest").serialize(),   // Here provide the form Id
           async: false,
           cache: false,                      // Don't keep the cache
           beforeSend: function () {  // This Executes before calling the Ajax Request
                  $("#uploadProgress").show();   // Here I am showing Uploader image
              },
           complete: function () {
                  $("#uploadProgress").html("Upload completed"); 
                // Executes on Ajax request complete
              },
          success: function (msg) {

                  if (msg == "ok")
                      $("#uploadProgress").hide();  // hiding the uploader image on successs
                  else
                      alert("Error while uploading");

              }
          });

Reading a CSV file with Linq

A simple single line of code  to read the CSV file in Linq:

rawFile = (from line in File.ReadAllLines(fileName).AsParallel()

            select line.Split(',')).ToList();

Happy Coding!

Kendo Grid with Search Functionality

<!DOCTYPE html>

<html>

<head>

<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />

<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />

<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />

<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />

<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />

<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>

<meta charset=utf-8 />

<title>JS Bin</title>

</head>

<body>

  <div id="grid"></div>

</body>

</html>

<script type=”text/javascript”>

  $("#grid").kendoGrid({

  dataSource:[ {

      foo: "Foo 1",

      bar: "Bar 1"

    } , {

      foo: "Foo 2",

      bar: "Bar 2"

    }

  ]

});

var grid = $("#grid").data("kendoGrid");

$("<tr><th class='k-header' data-field='foo'><input /></th><th data-field='bar' class='k-header' ><input /></th></tr>").appendTo($("#grid thead")).find("input").keyup(function() {

    grid.dataSource.filter({

    operator: "contains",

    value: $(this).val(),

    field: $(this).parent("th").data("field")

  });

  });

</script>

Happy Coding!

Kendo UI Grid Page size showing NaN of NaN.

In kendo grid, sometimes you will get the page size of the grid as NaN  of NaN.

The reason behind it was that the kendo grid is telling that the page size is not define, although you have define it and on clicking the page size or selected page the NaN of NaN goes.

Solution:

To fix the above solution , just redefine the page-size in the dataSource and the above issue will go.

Happy Coding!

Kendo Grid- Binding the JSON Data after getting response from the Ajax Call.

In Kendo UI while you are getting the data as a JSON object  and you want to bind into a grid, so follow the method below :
<script type= "text/javascript">
$(document).ready(
function( )
{
     InitializeGrid( );
 }

 function InitializeGrid() {
        $.ajax({
            async: false,
            type: "POST",
            url: "/Employee/GetEmployeeByFilter",
            data: $('#frmSearch').serialize(),
        }).success(function (result) {
            grid = $("#grid").kendoGrid({
                dataSource: { data: result.Data, total: result.Total, pageSize: 30 },
                schema: { data: "Data", total: "Total" },
                type: "POST",
                serverPaging: false,
                serverFiltering: false,
                serverSorting: false,
                height: gridHeight,
                toolbar: kendo.template($("#template").html()),
                change: function () {
                    var selectedRows = this.select();
                    selectedElement = this.dataItem(selectedRows[0]);
                },
                selectable: "single",
                filterable: true,
                sortable: true,
                pageable: true,
                resizable: true,
                columns: [
                    { field: "Name", title: "Name", width: 65 },
                    { field: "Emp_No", title: "Emp No", type: 'string', width: 62 },
                    { field: "Salary", title: "Salary", type: 'string', width: 78 },
                  ]
            });
        });
    }
</script>

View:

<div id="EmployeeReport">
    <h1 id="employeeReport">EmployeeReport</h1>
    <div id="grid"></div>
</div>

In the controller side:

   public ActionResult GetEmployeeByFilter( Receive the Parameters from the client side )
        {
                // Do the processing......
                return Json(new { Data =List of object you want to Pass to client side,
                                           Total = List's Count }, JsonRequestBehavior.AllowGet);
        }

Happy coding!

Kendo UI Sorting Date field in a grid having empty spaces and dates

Today i came to an issue that the date field are not sorted properly in the kendo grid if it has empty or Null spaces in it. the sorting occurs fine for descending order but fails when it is ascending order.

To fix the above issue a small trick will work for it. Just use this line of code in the grid filtration.

{field: "DateJoined", title: "Deployed", width: 50, template: '#=(DateJoined==null)?"":kendo.toString(kendo.parseDate(DateJoined,"MM/dd/yyyy"),"MM/dd/yyyy") #', format: "{0:M/d/yyyy}", type: "date" },

Happy coding!

How to fix the non-breaking of a sentence in HTML which has a hyphen(-) in it ?

Some times if you provide data inside a span or a column as : abcdef-test@gmail.com, you will notice that in IE it will be displayed as :
abcedf-
test@gmail.com
To fix the above issue, i will provide you two solutions.


Solution -1: Use <nobr> Tag

You can use <nobr> tag to represent your data as <nobr>abcdef-test@gmail.com</nobr>



Solution -2: Use CSS

You can use CSS to fix the above issue as:

<span style="white-space: nowrap;">abcdef-test@gmail.com</span>

Cheers!

Getting the Error: "Templates Can be used only with field access,property access, single dimension, or Single-parameter Custom Indexer Expression" in Asp.Net MVC3/MVC4

While working on an MVC3 project I need to Show the short date  & time in the display for HTML helper, but when I used it is throwing the above error, the reason behind it was that the HTML helper DisplayFor and EditorFor  takes directly the properties of the model rather than the functions which are associated with it.
  @Html.DisplayFor(model => model.DateStart.Value.ToShortDateString( ))

To fix the above situation you can simply remove the DisplayFor and use as :

@if(Model.DateStart!=null)
{
  Model.DateStart.ToShortDate( )
}

However, the best method to fix this situation is create a partial class with the above field and use the DisplayFormat properties to it with the one you wants.

    [DisplayName("Start Date")]
    [DisplayFormat(DataFormatString="{0:MM/dd/yyyy}",  ApplyFormatInEditMode=true)]
    public System.Nullable<System.DateTime> ModifiedStartDate
    {
        get
        {
            return this.StartDate.ToShortDateString( );
        }
        set
        {
            this.StartDate = value;
        }
    }

How to use it:
  @Html.DisplayFor(model => model.ModifiedStartDate)