Sooner or later you will have a master and details crud operation in ASP.Net MVC as a requirement in one of your applications.
In this article am going to walk you through how to create a complete CRUD operations in asp.net mvc in a single page using jQuery.
This article assumes that you already know how to create an ASP.Net MVC Application using Visual Studio, hence creating solution in visual studio will not be covered. There are many tutorials online that shows how to creating a solution in visual studio.
A customer order application will be built in this article. The app will save data into two tables - A Master and a details table.
Lets start by creating the tables required:
We are going to be writing all our code in our HomeController, so lets write the code that list all orders in our ordermaster's table:
There is nothing so complex about the above code, as you can see we will be using jQuery DataTable to display the orders that is why we included some parameters in our Json result. Now let's modify our index.cshtml file to list all our orders from ordermaster table.
Since we will be using jQuery Datatable we have to include reference in our _Layout.cshtml file.
In order to populate our datatable we need to write some jQuery code:
In the above code, we made an Ajax post request to our getOrders method to populate our jQuery DataTable.
If we run our application so far we (if you pre populate your ordermaster table with sample data) should have something like this:
The next thing we are going to do is to create a form that will handle new order creation using bootstrap modal since our application is going to be a single page app.
The new order information form above look like this:
In order to add order details we need to create another modal form that we will use to collect order details:
Because of the length of this post, I have pushed the source code in my github page for download
Post a Comment
0Comments