Tuesday, July 23, 2013

Rich Interactive CRUD Operation In ASP.NET MVC

CRUD is fundamental operation in any application. There are many ways we can implement CRUD operation in ASP.NET MVC. If you google with bing(scott’s dialog), you will find thousands of example. However, this write-up is simple way to perform CRUD using AJAX in ASP.NET MVC. I have used the following library alone with ASP.NET MVC:

1> JQuery
2> JQuery UI
3> Bootstrapper(Not mandatory)

 You will find the source code here.

CRUD

In order to implement ajax post, I have used Ajax.BeginForm of ASP.NET MVC. The main advantage of  Ajax.BeginForm is you don’t need to do anything to submit the form as a ajax request. Moreover, it has all the default behavior of submit such as it validates the form in client side. You can use your regular form design of asp.net mvc and replace Html.BeginForm with Ajax.BeginForm.  To open the dialog, I used JQuery modal dialog.

After inserting or updating any item, we do refresh the tabular view. In my implementation, I have written a reusable javascript code to update the table. To use the reusable function, the property name has to be with table header(th) in form of  data-source="Title". Once we have property name of any particular cell, we can retrieve cell value from model. The beauty of javascript is we can get the value of any property using dot(.) operator or using key index.
Download the source code and have a look into it. It’s very simple but  powerful way to implement rich interactive CRUD operation in ASP.NET MVC. .

Hope it helps!

No comments: