n
nSooner or later you will have a master and details crud operation in ASP.Net MVC as a requirement in one of your applications.
n
nIn 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.
nnnn
nnnnThis 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.
n
nA customer order application will be built in this article. The app will save data into two tables – A Master and a details table.
n
nLets start by creating the tables required:nn
n
nn
nnnThe next step is to add our tables to our model. Our model should look like the image below:n
nnnn
n
n
nWe 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:
n
n
n
nThere 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.nnNow let’s modify our index.cshtml file to list all our orders from ordermaster table.nnn
n
nSince we will be using jQuery Datatable we have to include reference in our _Layout.cshtml file.n
nnnnn
nn
n
nIn order to populate our datatable we need to write some jQuery code:nn
n
n
nIn the above code, we made an Ajax post request to our getOrders method to populate our jQuery DataTable.
n
n If we run our application so far we (if you pre populate your ordermaster table with sample data) should have something like this:nnn
n
n
n
nnnnn
nThe 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.nn
n
nThe new order information form above look like this:nnnn
n
n
n
nIn order to add order details we need to create another modal form that we will use to collect order details:
n
n
nnn
nnBecause of the length of this post, I have pushed the source code in my github page for download