In order to avoid this problem I thought of creating a html extension which is tightly coupled with your data that is going to bound to the Grid. Which helps the developer from writing any javascript codes(I know those who hates(not me! ) writing Javascript code like this extension).

This project has been uploaded to – http://code.google.com/p/mvc-fluent-jquery-plugin-controls/. You could find more details from there.

Datepicker is nice and cool plugin for displaying the calendar with ease. It is very easy to use JQuery plugin, it comes as part of JQueryUI library, so if you want to use this – first download JQueryUI from http://jqueryui.com/download and also download JQuery(http://docs.jquery.com/Downloading_jQuery) if you haven’t done yet.

For e.g. if you have a form like one below

<% using(Html.BeginForm()){%>
  <fieldset>
    <legend>Event Information</legend>
     <p>
        <label for="EventName">Event Name:</label>
        <%= Html.TextBox("EventName")%>
            </p>
            <p>
            <label for="StartDate">Start Date:</label>
            <%= Html.TextBox("StartDate")%>
            </p>
            <p>
            <label for="EndDate">End Date:</label>
            <%= Html.TextBox("EndDate")%>
            </p>
            <p>
                <input type="submit" value="Save" />
            </p>
  </fieldset>
<% }%>

and you want to attach datepicker to “StartDate” and “EndDate” input fields,

what you needs to do is call the datepicker function on the these input field selector like below.

<script language="javascript">
    $(document).ready(function() {
    $('#StartDate').datepicker();
    $('#EndDate').datepicker();
    });
</script>

This works fine as we expected

Difference in Date format patterns

Consider a scenario where your MVC application supports localization, then the selected date displayed in the input fields also should display the in the same date format of the current culture(This format could be custom one or default one). This leads to you another issue – Datepicker plugin given by the JQueryUI supports different date formats, but it is different from one that is available in .NET. For e.g. in order to display a long day name (“Thursday”) .NET uses “dddd” its equivalent in Datepicker is “DD”.

In order to solve this disparity between the .NET world and Datepicker world, I have created a html helper function, which could generate the Datepicker format from a .Net date format.

/// <summary>
/// JQuery UI DatePicker helper.
/// </summary>
public static class JQueryUIDatePickerHelper
{
    /// <summary>
    /// Converts the .net supported date format current culture format into JQuery Datepicker format.
    /// </summary>
    /// <param name="html">HtmlHelper object.</param>
    /// <returns>Format string that supported in JQuery Datepicker.</returns>
    public static string ConvertDateFormat(this HtmlHelper html)
    {
        return ConvertDateFormat(html, Thread.CurrentThread.CurrentCulture.DateTimeFormat.ShortDatePattern);
    }

    /// <summary>
    /// Converts the .net supported date format current culture format into JQuery Datepicker format.
    /// </summary>
    /// <param name="html">HtmlHelper object.</param>
    /// <param name="format">Date format supported by .NET.</param>
    /// <returns>Format string that supported in JQuery Datepicker.</returns>
    public static string ConvertDateFormat(this HtmlHelper html, string format)
    {
        /*
         *  Date used in this comment : 5th - Nov - 2009 (Thursday)
         *
         *  .NET    JQueryUI        Output      Comment
         *  --------------------------------------------------------------
         *  d       d               5           day of month(No leading zero)
         *  dd      dd              05          day of month(two digit)
         *  ddd     D               Thu         day short name
         *  dddd    DD              Thursday    day long name
         *  M       m               11          month of year(No leading zero)
         *  MM      mm              11          month of year(two digit)
         *  MMM     M               Nov         month name short
         *  MMMM    MM              November    month name long.
         *  yy      y               09          Year(two digit)
         *  yyyy    yy              2009        Year(four digit)             *
         */

        string currentFormat = format;

        // Convert the date
        currentFormat = currentFormat.Replace("dddd", "DD");
        currentFormat = currentFormat.Replace("ddd", "D");

        // Convert month
        if (currentFormat.Contains("MMMM"))
        {
            currentFormat = currentFormat.Replace("MMMM", "MM");
        }
        else if (currentFormat.Contains("MMM"))
        {
            currentFormat = currentFormat.Replace("MMM", "M");
        }
        else if (currentFormat.Contains("MM"))
        {
            currentFormat = currentFormat.Replace("MM", "mm");
        }
        else
        {
            currentFormat = currentFormat.Replace("M", "m");
        }

        // Convert year
        currentFormat = currentFormat.Contains("yyyy") ? currentFormat.Replace("yyyy", "yy") : currentFormat.Replace("yy", "y");

        return currentFormat;
    }
}

So how we could make use this helper method, just replace the datepicker initialization code we have written earlier with this

<script language="javascript">
    $(document).ready(function() {
    $('#StartDate').datepicker({ dateFormat: '<%= Html.ConvertDateFormat() %>' });
    $('#EndDate').datepicker({ dateFormat: '<%= Html.ConvertDateFormat() %>' });
    });
</script>

Hope this helps.

A post I forgot to publish which I wrote an year back

Here I wanted to show you the flexibility of JQuery.

Below is a HTML code that generates a grid with two rows and ten columns.

<div>

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>

<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
<div>20</div>

</div>

When the user double clicks on any of the cell, he can edit that content. The cell value get updated when user double clicks on any other cell.

Visit here to see the demo.

$(document).ready(function(){
$("div.column").dblclick(function(){ 

var content = $(this).text();
var width = $(this).width() -1;
var height = $(this).height() - 4;

var $editbox = $("<input type='text'" +
"style='width:" + width + ";" +
"height:" + height + ";" +
"border:none" +
"' value='" +  content + "' />"); 

$(this).empty();
$(this).prepend($editbox);
$editbox.focus();
$editbox.select();

$($editbox).bind("blur",function(){                     

content = $(this).val();
var parent = $(this).parent();
parent.html(content); 

});

});

});

The above code does all the trick.

First we hook the “Double Click” event to all the DIV with class name “column” using this

$(“div.column”).dblclick(function(){…});

Inside that, we dynamically add a textbox inside the DIV and set its text value as the HTML content of the parent DIV. And also we bind the “blur” event of this texbox to a function, so that whenever the focus leaves from the textbox, that function is called.

$($editbox).bind("blur",function(){

content = $(this).val();
var parent = $(this).parent();
parent.html(content);

});

inside that function, we set the HTML content of the DIV with the Textbox value.

Read the Part 1 of this tutorial if you don’t know how to call server side methods directly from client side.

In this post, I will explain how to pass data from client to server in JSON format.

Microsoft AJAX client library has built-in methods which helps in serializing and de-serializing JSON. The methods are defined in "Sys.Serialization.JavaScriptSerializer" class. In server side we have "JavaScriptSerializer"that will help you out to do the JSON serialization and de-serialization.

With the help of these two classes, we can easily do the data transfer. Suppose you have class called "Customer" in server side, which looks like this

using System;

namespace ServerClientInteration
{
    [Serializable]
    public class Customer
    {
        public int ID { get; set; }

        public string Name { get; set; }

        public string Address { get; set; }
    }
}

This is our payload for this example, we are going to move this object from server to client and vice versa. For that I have exposed two static methods on the server side; one is for retrieving the customer details and the other is for updating the customer.

  public partial class _Default : System.Web.UI.Page
    {
        private static Customer customer = null;

        protected void Page_Load(object sender, EventArgs e)
        {
            if (customer == null)
            {
                customer = new Customer();
                customer.ID = 1;
                customer.Name = "microsoft";
                customer.Address = "www.microsoft.com";
            }

        }

        [WebMethod]
        [ScriptMethod(UseHttpGet=true)]
        public static string GetTime()
        {
            return DateTime.Now.ToLongTimeString();
        }

        [WebMethod]
        [ScriptMethod(UseHttpGet = true)]
        public static string GetCustomer()
        {
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            return serializer.Serialize(customer);
        }

        [WebMethod]
        [ScriptMethod]
        public static string UpdateCustomer(string jsonCustomer)
        {
            try
            {
                JavaScriptSerializer serializer = new JavaScriptSerializer();
                Customer cust = serializer.Deserialize(jsonCustomer);
                customer.ID = cust.ID;
                customer.Name = cust.Name;
                customer.Address = cust.Address;

                return "Updated";
            }
            catch(Exception Exception)
            {

            }

            return "Error occured while updating";
        }
    }

In the above code, you can see "GetCustomer" and "UpdateCustomer" methods. "GetCustomer" will serialize the static customer object and return it as JSON string; "UpdateCustomer" method accepts JSON string as input and that string is de-serialized in to a customer object and the static customer variable is updated with the new values. "UpdateCustomer" will return status message after the update.

Usually, we persist the customer in DB or some other states, but here for simplicity I have used a static variable which will simulate the persistence.

Now we need to call this from the client-side, for that I have two hyperlinks; one will get the customer from the server and other send the customer to the server.

Here is how the HTML looks like

<head runat="server">
<title>Untitled Page</title>
<style type="text/css"> 

#result
{
width: 250px;
height: 300px;
overflow: auto;
border:1px solid #00d;
} 

</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<div>
<a href="javascript:callServerMethod()" >Call Server method</a>
<hr />
<a href="javascript:getCustomer()" >Get Customer</a>
<div id="result"></div>
<hr />
<div>
ID : <input type="text" id="custID" /><br />
Name : <input type="text" id="custName" /><br />
Adress : <input type="text" id="custAdd" /><br />
</div>
<a href="javascript:updateCustomer()" >Update customer</a><br /> 

</div>
<script language="javascript" type="text/javascript">
//<![CDATA[ 

function callServerMethod()
{
PageMethods.GetTime(callBackMethod);
} 

function callBackMethod(result)
{
alert(result);
} 

function getCustomer()
{
PageMethods.GetCustomer(callBackGetCustomer);
} 

function callBackGetCustomer(result)
{
var customer = Sys.Serialization.JavaScriptSerializer.deserialize(result);
var content = "<br />ID :" +  customer.ID + "<br />" + "Name : " + customer.Name + "<br />" + "Address : " + customer.Address;
$get("result").innerHTML += content;
} 

var clientCustomer = function(id,name,add){
this.ID = id;
this.Name = name;
this.Address = add;
}; 

function updateCustomer()
{
var id = $get("custID").value;
var name = $get("custName").value;
var address = $get("custAdd").value; 

var customer = new clientCustomer(id,name,address);
var serializedCustomer = Sys.Serialization.JavaScriptSerializer.serialize(customer);
PageMethods.UpdateCustomer(serializedCustomer,callBackUpdateCustomer);
} 

function callBackUpdateCustomer(result)
{
alert(result);
} 

//]]>
</script>
</form>
</body>

I think the above code is self explanatory, let me know if you have any difficulty in understanding this.

Hope this will gave some idea about passing JSON between client and server. I have uploaded the source code in my server and you can get it from here – http://www.rajeeshcv.com/download/ServerClientInteration.zip

This feature(calling server side static method) is not enabled by default, so you have to manually enable this and it is very very simple; just set the "EnablePageMethods" property of the "ScriptManager" to true like this

<asp:scriptmanager id="ScriptManager1" runat="server" enablepagemethods="true">      </asp:scriptmanager>

After this, create a public static method in your asp.net page and decorate it with WebMethod(System.Web.Services.dll) and ScriptMethod(System.Web.Extensions.dll) attributes. For example I have created a static method called "GetTime()" which returns current time as string.

public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        [WebMethod]
        [ScriptMethod]
        public static string GetTime()
        {
            return DateTime.Now.ToLongTimeString();
        }
    }  

Now you have configured everything correctly and I will show you how to call this method from the client side.

Earlier you have set the "EnablePageMethods" property of "ScriptManager" to true, as a result of that a new object called "PageMethods" is created by the ScriptManager when the page is rendered. This object has all the public static methods in that page. So that you call the server side method like PageMethods.[ServerSideMethodName]. When calling this methods from client side you have to provide a callback function because here all the call scriptmanager made will be asynchronous, and this callback method will get the returned result.

Below is the sample code

	function callServerMethod()
        {
            PageMethods.GetTime(callBackMethod);
        }

        function callBackMethod(result)
        {
            alert(result);
        }

Complete aspx page looks like this

<body>     <form id="form1" runat="server">       <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">      </asp:ScriptManager>      <div>          <a href="javascript:callServerMethod()" >Call Server method</a>      </div>      <script language="javascript" type="text/javascript">      //<![CDATA[          function callServerMethod()          {              PageMethods.GetTime(callBackMethod);          }          function callBackMethod(result)          {              alert(result);          }      //]]>      </script>      </form>
</body>

Extra bits

In the above code you can see that I have placed link, when user click on that link a message is shown with the server time. So behind an asynchronous request is send to the server in this format (http://[sitename]/[MethodName]). Server in turn returns the result as JSON back to the client. Here is a screen shot from the firebug

There is optimization we have do here – you can see that, by default the request is a POST request, but in our case a POST request is heavy because we could have achieved the same using a GET request ( Difference between POST and GET ).

In order to change this request in to a GET request, we need to do a minor tweaking in the server side, set "UseHttpGet=true" parameter for the "ScriptMethod" attribute.

	[WebMethod]
        [ScriptMethod(UseHttpGet=true)]
        public static string GetTime()
        {
            return DateTime.Now.ToLongTimeString();
        }

After this you can see that, request is changed to a GET request

Get more details from here http://code.google.com/p/weblayoutmanager/

Please let me know your suggestions

Please go to http://www.rajeeshcv.com/projects/layoutmanager-jquery-plugin/ to read more about this plugin and how to use it.

Demo and source is available here – http://labs.rajeeshcv.com/layoutmanager/default.html