JQuery Treeview with MVC3

First I thought implementing a tree view in MVC3 Razor will be a big headache. But if you believe me or not, thanks to Jquery plugins it's very easy to implement a tree view using Jquery. So I would like to share a small example about how to implement a JQuery tree view in MVC3 Razor.

It's very simple.

First of all you will need to download jquery.treeview.css and jquery.treeview.js. Here is the download link. http://dev.jquery.com/view/trunk/plugins/treeview/

By looking at the source code you can get a complete idea about how to implement a tree view. You can download the source code here.

Enjoy with Jquery power.

Cascading dropdownlist in MVC3 Razor

I was searching a cascading dropdownlist for MVC 3 Razor for my new project at work. Since I’m new to MVC 3 I searched for similar example in the Internet, but couldn’t find any example to fulfill my requirement. There were lots of similar example but most of them are not working or not compatible with Razor. Eventually I was able to come up with a working solution and one good example from the internet also helped me to develop this solution. I hope this will help you a lot.

Razor View

Controller

Most of the example I have seen in the internet, it returns IList type collection as a Json result from the controller. I think that is the main reason for most of the examples does not work. But what I have done here is, instead of sending IList collection as the Json result, I'm sending a SelectListItem collection. It's working fine and if you have any suggestion please do send me to improve this solution.

Also you can download complete source code here

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