Build a Master Details CRUD In ASP.Net MVC and JQuery And Bootstrap

Download Source Code Github Source Link

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:

	GO
	SET QUOTED_IDENTIFIER ON
	GO
	CREATE TABLE [dbo].[OrderMaster](
	[MasterId] [uniqueidentifier] NOT NULL,
	[CustomerName] [nvarchar](150) NOT NULL,
	[Address] [nvarchar](250) NOT NULL,
	[OrderDate] [datetime] NOT NULL,
	CONSTRAINT [PK_OrderMaster] PRIMARY KEY CLUSTERED
	(
	[MasterId] ASC
	)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
	) ON [PRIMARY]
	</pre>
	<br />
	<pre class="brush:sql" title="OrderMaster"> SET ANSI_NULLS ON
	GO
	SET QUOTED_IDENTIFIER ON
	GO
	CREATE TABLE [dbo].[OrderDetails](
	[DetailId] [uniqueidentifier] NOT NULL,
	[MasterId] [uniqueidentifier] NOT NULL,
	[ProductName] [nvarchar](50) NOT NULL,
	[Quantity] [int] NOT NULL,
	[Amount] [decimal](18, 0) NOT NULL,
	CONSTRAINT [PK_OrderDetails] PRIMARY KEY CLUSTERED
	(
	[DetailId] ASC
	)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
	) ON [PRIMARY]
	GO
	ALTER TABLE [dbo].[OrderDetails] WITH CHECK ADD CONSTRAINT [FK_OrderDetails_OrderMaster] FOREIGN KEY([MasterId])
	REFERENCES [dbo].[OrderMaster] ([MasterId])
	GO
	ALTER TABLE [dbo].[OrderDetails] CHECK CONSTRAINT [FK_OrderDetails_OrderMaster]
	GO

view raw DbScript.sql hosted with ❤ by GitHub

The next step is to add our tables to our model. Our model should look like the image below:

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:

	private ordersEntities db = new ordersEntities();
	public ActionResult getOrders()
	{
	var draw = Request.Form.GetValues("draw").FirstOrDefault();
	var model = (db.OrderMasters.ToList()
	.Select(x => new
	{
	masterId = x.MasterId,
	customerName = x.CustomerName,
	address = x.Address,
	orderDate = x.OrderDate.ToString("D")
	})).ToList();
	return Json(new
	{
	draw = draw,
	recordsFiltered = model.Count,
	recordsTotal = model.Count,
	data = model
	}, JsonRequestBehavior.AllowGet);
	}

view raw gistfile1.txt hosted with ❤ by GitHub

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.

	<div class="panel panel-default">
	<div class="panel-heading">
	<div class="row">
	<h2 class="panel-title pull-left">Orders</h2>
	<button
	class="btn btn-primary pull-right"
	id="addNewItem"
	style="margin-right: 5px"
	>
	Add New
	</button>
	</div>
	</div>
	<div class="panel-body">
	<table class="table table-striped table-bordered" id="ordersTable">
	<thead>
	<tr>
	<th>Customer Name</th>
	<th>Address</th>
	<th>Date</th>
	<th></th>
	</tr>
	</thead>
	<tbody></tbody>
	</table>
	</div>
	</div>

view raw dtableindex.html hosted with ❤ by GitHub

Since we will be using jQuery Datatable we have to include reference in our _Layout.cshtml file.

	<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css"></link>
	<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>

view raw tblstyle.js hosted with ❤ by GitHub

In order to populate our datatable we need to write some jQuery code:

	$(function () {
	var orderUrl = '@Url.Action("getOrders", "Home")';
	var table = $("#ordersTable").DataTable({
	"processing": true,
	"serverSide": true,
	"filter": false,
	"orderMulti": false,
	"ajax": {
	"url": orderUrl,
	"type": "POST",
	"datatype": "json"
	},
	"columns": [
	{ "data": "customerName", "name": "customerName", "autoWidth": true },
	{ "data": "address", "name": "address", "autoWidth": true },
	{ "data": "orderDate", "name": "orderDate", "autoWidth": true },
	{ "data": null, "name": "Action", "defaultContent": '<a class="editItem" href="https://www.blogger.com/blogger.g?blogID=5042006714878717715#">Edit Order</a>', "autoWidth": true }
	]
	});
	};

view raw script.js hosted with ❤ by GitHub

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.

	<div class="modal fade" id="newOrderModal" role="dialog" tabindex="-1">
	<div class="modal-dialog modal-lg" role="document">
	<div class="modal-content">
	<div class="modal-header">
	<button
	aria-label="Close"
	class="close"
	data-dismiss="modal"
	type="button"
	>
	<span aria-hidden="true">×</span>
	</button>
	<br />
	<h4 class="modal-title">New Order Information</h4>
	</div>
	<div class="modal-body">
	<h3>Order Master</h3>
	<hr />
	<div class="form-horizontal">
	<input id="orderMasterId" type="hidden" />
	<br />
	<div class="form-group">
	<label class="control-label col-md-2"> Customer Name </label>
	<br />
	<div class="col-md-4">
	<input
	class="form-control"
	id="customerName"
	placeholder="Customer Name"
	type="text"
	/>
	</div>
	<label class="control-label col-md-2"> Address </label>
	<br />
	<div class="col-md-4">
	<input
	class="form-control"
	id="address"
	placeholder="Customer Address"
	type="text"
	/>
	</div>
	</div>
	</div>
	<h3 style="margin-top: 10px">Order Details</h3>
	<table class="table" id="detailsTable">
	<thead>
	<tr>
	<th style="width: 35%">Product</th>
	<th style="width: 20%">Unit Price</th>
	<th style="width: 15%">Quantity</th>
	<th style="width: 20%">Amount</th>
	<th style="width: 10%"></th>
	</tr>
	</thead>
	<tbody></tbody>
	<tfoot>
	<tr>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td>
	<a
	class="btn btn-info"
	href="https://www.blogger.com/blogger.g?blogID=5042006714878717715#"
	id="addMore"
	>Add Detail</a
	>
	</td>
	</tr>
	</tfoot>
	</table>
	</div>
	<div class="modal-footer">
	<button class="btn btn-default" data-dismiss="modal" type="button">
	Close
	</button>
	<button class="btn btn-primary" id="saveOrder" type="button">
	Save Order
	</button>
	</div>
	</div>
	</div>
	</div>

view raw jqueryTblModal.html hosted with ❤ by GitHub

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:

	<div class="modal fade" id="orderDetailsModal" role="dialog" tabindex="-1">
	<div class="modal-dialog" role="document">
	<div class="modal-content">
	<div class="modal-header">
	<button
	aria-label="Close"
	class="close"
	data-dismiss="modal"
	type="button"
	>
	<span aria-hidden="true">×</span>
	</button>
	<br />
	<h4 class="modal-title">Order Details</h4>
	</div>
	<div class="modal-body">
	<div class="form-horizontal">
	<div class="form-group">
	<input id="detailId" type="hidden" />
	<label class="control-label col-md-3"> Product Name </label>
	<br />
	<div class="col-md-9">
	<input
	class="form-control"
	id="productName"
	placeholder="Product Name"
	type="text"
	/>
	</div>
	</div>
	<div class="form-group">
	<label class="control-label col-md-3"> Price </label>
	<br />
	<div class="col-md-4">
	<input
	class="form-control"
	id="price"
	placeholder="Product Price"
	type="text"
	/>
	</div>
	<label class="control-label col-md-2"> Quanity </label>
	<br />
	<div class="col-md-3">
	<select class="form-control" id="quantity">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	</select>
	</div>
	</div>
	<div class="form-group">
	<div class="col-md-3 col-lg-offset-9">
	<a
	class="btn btn-default"
	href="https://www.blogger.com/blogger.g?blogID=5042006714878717715#"
	id="addToList"
	>Add To List</a
	>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

view raw order-details.html hosted with ❤ by GitHub

Because of the length of this post, I have pushed the source code in my github page for download