Latest News

A definitive guideline on implementing Master-Details View in ASP.NET MVC

Today. ASP.NET is being widely used for developing different types of web apps ranging from commercial apps to the social, business and health applications. No matter what your mobile app development requirement is, with ASP.NET you’ll be able to create the one that will surprise you pleasantly. Today, through this article, I’lll be offering you an in-depth guideline on implementing the Master-Details View during development of LoB(Line of Business) applications. So, let’s get going!

What’s exactly Master-Details type of view?

Master-Details View is basically a flexibility offered to the users wherein they can easily view the Master list of products that they are managing via the respective ASP.NET application. Clicking on any of the rows will display a Details view which will contain all the records available for the respective Master view. For example, in case of an order management application, it is the Master-Details view that could provide information about all the Orders that have been placed by different Customers(here, the phenomenon of viewing the orders is referred to as Master View).

Now, coming to the steps involved with implementation of Master Details View using ASP.NET MVC, Web API and Knockout.js

Step 1-Open Visual Studio 2014 and create an empty ASP.NET MVC application named as: A4_Master_Details.

Step 2- Now, go to the App Data folder and add a new SQL Server Database with the name as ‘Applications.mdf’. After this, add the following tables to this SQL Server Database:


CREATETABLE[dbo].[Customer] (
[CustomerId] INT IDENTITY (1, 1) NOTNULL,
[CustomerName] VARCHAR(200) NOTNULL,
[ContactNo] VARCHAR(100) NOTNULL,


CREATETABLE[dbo].[Orders] (
[CustomerId] INT NOTNULL,
[OrderedItem] VARCHAR(100) NOTNULL,
[OrderedQuantity] INT NOTNULL,
FOREIGNKEY([CustomerId]) REFERENCES[dbo].[Customer] ([CustomerId])

Step 3- Now, create a model in the Models folder by adding a ADO.NET Entity Framework and the using the Database First approach. Select the Applications.mdf database along with Customer and Orders Table for completing the wizard.

Step 4- Now, add the ASP.NET WEB API controller by right-clicking on the Controllers folder and adding an empty Web API Controller that’s named as ‘CustomerOrderAPIController. Now, in this controller, add the following action methods:







publicclassCustomerOrderAPIController : ApiController


ApplicationsEntities ctx;



ctx = newApplicationsEntities();




publicList<Customer> GetCustomers()


var Res = (from c inctx.Customers.ToList()

select newCustomer()


CustomerId = c.CustomerId,

CustomerName = c.CustomerName,

Email = c.Email,

ContactNo = c.ContactNo






publicList<Order> GetOrders(intid)


var Res = (from o inctx.Orders.ToList()

where o.CustomerId == id

select newOrder()


OrderId = o.OrderId,

OrderedItem = o.OrderedItem,

OrderedQuantity = o.OrderedQuantity,

OrderedDate = o.OrderedDate








Step 5- Go to the Controllers folder and add an Empty MVC Controller called ‘CustomerOrderController’.

Step 6- Now, for implementing the Client-Side logic, you need to add jQuery, jQuery UI and Knockout.js libraries. For this, simply go to the Scripts folder and a new folder called ‘MyScripts’. Within this folder, add the new JavaScript file called ‘MasterDetailsLogic.js. To this file, add the below mentioned code:


/// <reference path=”../jquery-2.1.1.min.js” />


/// <reference path=”../jquery-ui.min-1.11.1.js” />

/// <reference path=”../knockout-3.2.0.js” />

(function () {


var currentWin = $(window); //The Windows Object

var divDialog = $(“#detailcontainer”);

var top = (currentWin.height() – divDialog.height()) / 2; //Get the Top

var left = (currentWin.width() – divDialog.width()) / 2; //and the left


//The Dialog object


autoOpen: false,

width: 400,

minHeight: 250,

maxHeight: 350,

resizable: true



//Set the Position for the dialog


position: “center”,

top: top,

left: left


var MSViewModel = function () {

var self = this;

self.Customers = ko.observableArray([]); //Array for Customers

self.Orders = ko.observableArray([]); //Array for Orders

self.ErrorMessage = ko.observable(); //The Error Message

self.CustomerId = ko.observable(); //The Customer Id

self.CustomerName = ko.observable(); //The Customer NAme



//The Customer Object

var Customer = {

CustomerId: self.CustomerId,






//The Fucntion to make call to WEB API

//and returns the Customer Object

function loadCustomers() {


url: “/Customers”,


}).done(function (resp) {


}).error(function (err) {

self.ErrorMessage(“Error!!!!”+ err.status);




//The Function to Open and Show the Dialog box

self.openDetailsDialog = function (cust) {

self.CustomerName(cust.CustomerName); //USed to Display Customer Name





//Function call WEB API to Get Orders for the Customer

function getOrdersByCustomers(cust) {


url: “/Customer/Orders/”+ cust.CustomerId,


}).done(function (resp) {


}).error(function (err) {

self.ErrorMessage(“Error! “+ err.status);








Step 7- Finally, in the Index.cshtml file, add <style> and the HTML Markup along with DataBinding accompanied by the observables that have been declared in the ViewModel:


So that was a quick mashup of server and client-side web technologies like WEB API, ASP.NET MVC, jQuery Ajax and Knockout for seamless implementation of Master-Details view in a Line of Business(LoB) application.


Leave a comment

seks shop - izolasyon
basic theory test book basic theory test