Mvc 3 with Ajax Support

Recently I started working on ASP.NET MVC3 with the Razor view engine. Initially had to face some difficulty with lack of knowledge about Razor view engine and then I managed to handle things smoothly. I came across an issue when implementing a simple AJAX post back form where I needed to show my submitted results in a grid view without user to experiencing a post back in the same page. I created a partial view for my input data form and included in the Index page using @Html.RenderPartial. Then I created an Ajax.BeginForm block and moved my partial view into AJAX block. AJAX post back was successful but every time it returns a whole page into my UpdateTargetId which is a DIV.

After doing couple of hours of R&D I was able come up with the following solution and it is working fine.

Solution

I created another partial view for my grid and placed in the Index page. Now my index page markup looks like below.

We need to introduce a new overload for Index method and the return type should be PartialViewResult. My Index overload method in controller as follows.

Finally my page looks like as follows.

You can download the complete source code here

JQuery Datepicker with MVC3

Datepicker is a control that you can easily use as a popup with text field to input date. Here I'm trying to cover all the necessary coding parts to implement a date picker in MVC 3 application.

Firstly, we'll write a JQuery script

Before you work with the above script you will need to add following directives.

You can add above directives to either in you page where your jquery script written or if your page refers the common _layout.cshtml, then you can move these directives into tag of the _layout.cshtml.

Secondly,

We need to call the datepicker from the control where you need to connect the datepicker. Here we will going to link our date picker with a text field as below.

@Html.LabelFor(model => model.ExpireOn)

@Html.TextBox("ExpireOn", (Model.ExpireOn.ToShortDateString()), new { @class = "date" })

@Html.ValidationMessageFor(model => model.ExpireOn)

You can download complete code sample here