In this article I am going to demonstrate how to achieve basic CRUD (Create, Read, Update and Delete) functionality by using jquery dialog(s) in asp.net mvc. In this article I also these points:
1) How to implement global validation by extending ActionFilterAttribute.
2) Global custom message box by using jquery dialog.
3) Use of webgrid control to display the list.
4) Browse dialog by using jquery.ui.
5) Confirmation message box on Delete.
Our final product will something look like this:
I have taken an example of Product, SubCategory and Category by using Code first approach of entity framework, in which Category belongs to SubCategory and SubCategory belongs to Product. The database diagram should be something like below:
1) Microsoft Visual Studio IDE
2) SQL Server Database
I am using visual studio 2012 and SQL Server 2008 database.
Let’s start by creating sample project and learn step by step:
1) Open Microsoft Visual Studio 2012.
2) Select New Project.
3) Select ASP.NET MVC4 Web Application and Enter Name.
4) Select Empty option from the Project template and View Engine as Razor.
5) Add Category class in Models folder and replace with the following code:
6) Add SubCategory class and ad the following properties its configuration:
7) Like the above add Product class and replace with the following code:
8) Now in order to test our application we need some sample data, so for its configuration add a ProductDbContextInitializer class which inherits DropCreateDatabaseIfModelChanges class of System.Data.Entity. Before doing this do not forget to install Entity framework because we are using Code first approach of Entity Framework in order to perform CRUD in database. It will automatically create database and tables if not already exist, we do not need to worry about database part. Easy way of including Entity Framework library in a project:
Go to Tools à Library Package Manager à Package Manager Console à Type install package entityframework
9) Now add a DbContext class to add the tables and configuration. Please change the connection string part according to your database location and authentication:
These nine simple steps helps you create and configure database with some sample data. The properties of the classes are understood and meaningful that’s why I do not waste my time on commenting or explaining the property.
Now let’s move towards our main concern of the article i.e. using multiple and managing jquery dialog(s):
1) Include jquery and jquery.ui in a project:
Go to Tools à Library Package Manager à Package Manager Console à
· For jquery, type install package jquery
· For jquery.ui, type install package jquery.ui.combined
· For ajax, type install package jQuery.Ajax.Unobtrusive
2) Add a Product controller in Controller folder and replace the code with the below. The functions of ProductController is pretty clear with its functions name.
3) Add a ValidationActionFilter class to validate the data globally, you do not need to place ModelState.IsValid in every function before inserting or updating any record, just add ValidationActionFilter as attribute and all you have done it.
4) Add a Index view of ProductController and replace the code with the following:
5) Add a partial view _ProductList in Views/Product and replace the code with the following in order to display the Product list in webgrid:
6) Create a WebGridSortHelper at the root level of project to customize the sort display in webgrid:
In Views/web.config add the following namespace in the namespaces tag, it help you to easily access the namespace classes in views.
7) Add a partial view _Product in Views/Product which is used to add/edit a product information:
9) Add onAjaxFailure method to handle global validation message, which is given below:
10) The above method (onAjaxFailure) also uses showMessageBox method in order to display the custom message box by using jquery.ui dialog, so create showMessageBox function in the same app.js:
11) To add/choose/delete a product, subcategory and category we need dialogs, so for dialogs, first create these two global variables in app.js:
These variables is used for storing the references of dialog, arrDialogRef stores a reference of dialogs on dialog open event and release the reference on close event of dialog and curDialogRef always have a reference of most recent open dialog.
12) To open a add/choose dialog and for confirmation message on delete and for display the list of products on form load, update the following code in app.js:
13) Now in order to display or update the data in a list, create updateSection method in app.js:
14) Create makeAjaxCall (to make ajax call) function which is used for making delete request via ajax after delete confirmation:
15) Add a SubCategory controller and add some following necessary methods:
16) Add a partial view _SubCategoryList in Views/SubCategory folder and replace the code as given below:
17) Add a partial view _SubCategory in Views/SubCategory, set the code as given below:
18) Add the closeDialog method to close the dialog in app.js:
19) Add updateContainer method in app.js to update the parent section, for e.g. If you browse a sub category list and select a subcategory, then the subcategory section of product will be updated.
20) Create updateSearchContainer method in app.js which is used for updating the content in case of search performed on modal dialog(s):
21) Create last and final Category controller, add the methods given below:
22) Create a partial view _CategoryList in Views/Category folder:
23) Create a partial view _Category in Views/Category folder:
Now run or debug your application, I hope it works fine. You have any question or doubt regarding this article or sample, you can ask.
I have attached source code too. If you find any mistake or suggestion for this sample, please must share.
Read Next part of this article Repository and Unit of Work with Entity Framework.