Details

Written by: Stanko Milosev

Category: MVC 4

Published: 17 July 2013

Last Updated: 16 November 2021

Hits: 14648

Model:

public class myMaster
    {
        [Key]
        [DatabaseGenerated(DatabaseGeneratedOption.None)]
        [Column(Order = 0)]
        public int myKey1 { get; set; }

        [Key]
        [DatabaseGenerated(DatabaseGeneratedOption.None)]
        [Column(Order = 1)]
        public int myKey2 { get; set; }

        public string MyMasterName { get; set; }
    }

    public class myDetail
    {
        [Key]
        [Column(Order = 0)]
        [ForeignKey("myMaster")]
        public int myKey1 { get; set; }

        [Key]
        [Column(Order = 1)]
        [ForeignKey("myMaster")]
        public int myKey2 { get; set; }
        public virtual myMaster myMaster { get; set; }

        [Key]
        [Column(Order = 2)]
        [DatabaseGenerated(DatabaseGeneratedOption.None)]
        public int Ordinal { get; set; }

        public string MyDetailName { get; set; } 
    }

    public class MyTableDBContext : DbContext
    {
        public DbSet myMaster { get; set; }
        public DbSetmyDetail { get; set; }
    }

Create controllers using scaffolding.

Add partial view, like on the pictures:

 

In that partial view (in my case Detail.cshtml) write code like:

@model IEnumerable<MasterDetailDataTables.Models.myDetail>

<table id="invoiceDetails" class="display dataTable">
     
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.myKey1) @*name of the table, remove it if you do not want name to be visible*@
            </th>
        </tr>
    </thead>
     
    <tbody>
    </tbody>
     
    <tfoot>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.myKey1) @*name of the table, remove it if you do not want name to be visible*@
            </th>
        </tr>
    </tfoot>
 
</table>

Index.cshtml should look like:

@model IEnumerable<MasterDetailDataTables.Models.myMaster>

@section scripts {
 
    @Styles.Render("~/Content/themes/base/css")
    @Scripts.Render("~/bundles/table")
    
    <script src="/../../Scripts/myDataTables.js" type="text/javascript"></script>
}

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table id="myDataTable" class="display dataTable">
     
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.MyMasterName) @*name of the table, remove it if you do not want name to be visible*@
            </th>
        </tr>
    </thead>
     
    <tbody>
    </tbody>
     
    <tfoot>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.MyMasterName) @*name of the table, remove it if you do not want name to be visible*@
            </th>
        </tr>
    </tfoot>
 
</table>

@Html.Action("Detail")

Create methods like:

        

        public ActionResult Detail()
        {
            return PartialView();
        }

        public ActionResult MasterJson(
            jQueryDataTableParamModel param
        )
        {

            var myResult = Json(new
            {
                sEcho = param.sEcho,
                iTotalRecords = db.myMaster.Count(),
                iTotalDisplayRecords = db.myMaster.Count(),
                aaData = db.myMaster.OrderBy(x => x.MyMasterName).Skip(param.iDisplayStart).Take(param.iDisplayLength).ToList()

            },
                JsonRequestBehavior.AllowGet
            );
            return myResult;
        }

        public ActionResult DetailJSON(
            jQueryDataTableParamModel param
            )
        {

            var myResult = Json(new
            {
                sEcho = param.sEcho,
                iTotalRecords = db.myDetail.Count(),
                iTotalDisplayRecords = db.myDetail.Count(),
                aaData = db.myDetail.Where(x => ((x.myKey1 == param.myKey1) & (x.myKey2 == param.myKey2))).OrderBy(x => x.myKey1).Skip(param.iDisplayStart).Take(param.iDisplayLength).ToList()
                //aaData = db.Invoices.ToList()
            },
                JsonRequestBehavior.AllowGet
            );
            return myResult;
        }

Line:

aaData = db.myDetail.Where(x => ((x.myKey1 == param.myKey1) & (x.myKey2 == param.myKey2))).OrderBy(x => x.myKey1).Skip(param.iDisplayStart).Take(param.iDisplayLength).ToList()

Mean that entity framework will page the data. Taken from here.

DetailJson and MasterJson will be used later in ajax call.

jQueryDataTableParamModel should look like:

public class jQueryDataTableParamModel
        {
            /// 
            /// Request sequence number sent by DataTable,
            /// same value must be returned in response
            ///        
            public string sEcho { get; set; }

            /// 
            /// Text used for filtering
            /// 
            public string sSearch { get; set; }

            /// 
            /// Number of records that should be shown in table
            /// 
            public int iDisplayLength { get; set; }

            /// 
            /// First record that should be shown(used for paging)
            /// 
            public int iDisplayStart { get; set; }

            /// 
            /// Number of columns in table
            /// 
            public int iColumns { get; set; }

            /// 
            /// Number of columns that are used in sorting
            /// 
            public int iSortingCols { get; set; }

            /// 
            /// Comma separated list of column names
            /// 
            public string sColumns { get; set; }

            public int myKey1 { get; set; }
            public int myKey2 { get; set; }
        }

Where

public int myKey1 { get; set; }
public int myKey2 { get; set; }

are added by me,as additional parameter sent from datatables

Download datatables and add media folder to your project, as I already described it here.

To \App_Start\BundleConfig.cs add code like: 

bundles.Add(new ScriptBundle("~/bundles/table").Include(
                    "~/Scripts/media/js/jquery.dataTables.js"));

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
					"~/Scripts/media/css/jquery.ui.core.css",
					"~/Scripts/media/css/jquery.ui.resizable.css",
					"~/Scripts/media/css/demo_table.css"));

Finaly, javascript:

var oTable;
var oInvoiceDetail;
var iMark = 0;
var iNumber = 0;

$(document).ready(function () {
	invoiceDetailsClick();
	oTable = $('#myDataTable').dataTable({
		"bProcessing": true,
		"bServerSide": true,
		"iDisplayLength": 10,
		"sAjaxSource": "MasterDetail/MasterJson",
		"fnServerData": function (sUrl, aoData, fnCallback, oSettings) {
			oSettings.jqXHR = $.ajax({
				"type": "POST",
				"url": sUrl,
				"data": aoData,
				"success": fnCallback,
				"dataType": "json",
				"cache": false
			});
		},
		"aoColumns": [
			{ "sWidth": '200px', "mData": "MyMasterName" }
		]
	});

});

function invoiceDetailsClick() {

	oInvoiceDetail = $('#invoiceDetails').dataTable({
		"bProcessing": true,
		"bServerSide": true,
		"iDisplayLength": 10,
		"sAjaxSource": "MasterDetail/DetailJson",
		"bFilter": false, //hides search field
		"bPaginate": false, //hides pagination
		"bInfo": false, //hides info
		"fnServerData": function (sUrl, aoData, fnCallback, oSettings) {
			/* Add some extra data to the sender */
			aoData.push({ "name": "myKey1", "value": iMark });
			aoData.push({ "name": "myKey2", "value": iNumber });
			oSettings.jqXHR = $.ajax({
				"type": "POST",
				"url": sUrl,
				"data": aoData,
				"success": fnCallback,
				"dataType": "json",
				"cache": false
			});
		},
		"aoColumns": [
			{ "sWidth": '200px', "mData": "myKey1" }
		]
	});
}


$("#myDataTable tbody").click(function (event) {
	$(oTable.fnSettings().aoData).each(function () {
		$(this.nTr).removeClass('row_selected');
	});

	$(event.target.parentNode).addClass('row_selected');

	var anSelected = fnGetSelected(oTable);

	var iRow = oTable.fnGetPosition(anSelected[0]);

	var data = oTable.fnGetData(iRow);


	iMark = data.myKey1;
	iNumber = data.myKey2;
	oInvoiceDetail.fnReloadAjax(); //data.Mark, data.Number
});

$.fn.dataTableExt.oApi.fnReloadAjax = function (oSettings, sNewSource, fnCallback, bStandingRedraw) {
	if (sNewSource !== undefined && sNewSource !== null) {
		oSettings.sAjaxSource = sNewSource;
	}

	// Server-side processing should just call fnDraw
	if (oSettings.oFeatures.bServerSide) {
		this.fnDraw();
		return;
	}

	this.oApi._fnProcessingDisplay(oSettings, true);
	var that = this;
	var iStart = oSettings._iDisplayStart;
	var aData = [];

	this.oApi._fnServerParams(oSettings, aData);

	oSettings.fnServerData.call(oSettings.oInstance, oSettings.sAjaxSource, aData, function (json) {
		/* Clear the old information from the table */
		that.oApi._fnClearTable(oSettings);

		/* Got the data - add it to the table */
		var aData = (oSettings.sAjaxDataProp !== "") ?
	that.oApi._fnGetObjectDataFn(oSettings.sAjaxDataProp)(json) : json;

		for (var i = 0; i < aData.length; i++) {
			that.oApi._fnAddData(oSettings, aData[i]);
		}

		oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();

		that.fnDraw();

		if (bStandingRedraw === true) {
			oSettings._iDisplayStart = iStart;
			that.oApi._fnCalculateEnd(oSettings);
			that.fnDraw(false);
		}

		that.oApi._fnProcessingDisplay(oSettings, false);

		/* Callback user function - for event handlers etc */
		if (typeof fnCallback == 'function' && fnCallback !== null) {
			fnCallback(oSettings);
		}
	}, oSettings);
};

function fnGetSelected(oTableLocal) {
	var aReturn = new Array();
	var aTrs = oTableLocal.fnGetNodes();

	for (var i = 0; i < aTrs.length; i++) {
		if ($(aTrs[i]).hasClass('row_selected')) {
			aReturn.push(aTrs[i]);
		}
	}
	return aReturn;
}