This is the main view :
@model IEnumerable<Northwind.Order>
@{
ViewBag.Title = "Ajax";
Layout = "~/Views/Shared/MasterDetailsLayoutPage.cshtml";
}
@section onReady{
var oTable;
$('#companies tbody td img').live('click', function () {
var nTr = this.parentNode.parentNode;
if (this.src.match('details_close')) {
this.src = "/Content/images/details_open.png";
oTable.fnClose(nTr);
}
else {
this.src = "/Content/images/details_close.png";
var orderid = $(this).attr("rel");
$.get("Me?OrderID=" + orderid, function (detalet) {
oTable.fnOpen(nTr, detalet, 'details');
});
}
});
oTable = $('#companies').dataTable({
"bServerSide": true,
"sAjaxSource": 'AjaxHandler',
"bJQueryUI": true,
"aoColumns":
[
{ "bSortable": false,
"bSearchable": false,
"fnRender": function (oObj)
{
return '<img src="/Content/images/details_open.png" alt="expand/collapse" rel="' + oObj.aData[0] + '" />';
}
},
null,
null,
null
]
});
}
<table id="companies" class="display">
<thead>
<tr>
<th></th>
<th>Order ID</th>
<th>Customer ID</th>
<th>Ship Address</th>
</tr>
</thead>
<tbody></tbody>
</table>
And this is the partial view that loads inside the datatable :
@model Northwind.Order
@{
ViewBag.Title = "Me";
Layout = "~/Views/Shared/MasterDetailsLayoutPage.cshtml";
}
<div>
<dl class="dl-horizontal">
<dt>
@Html.DisplayNameFor(model => model.CustomerID)
</dt>
<dd>
@Html.DisplayFor(model => model.CustomerID)
</dd>
<dt>
@Html.DisplayNameFor(model => model.Customer.ContactName)
</dt>
<dd>
@Html.DisplayFor(model => model.Customer.ContactName)
</dd>
<dt>
@Html.DisplayNameFor(model => model.EmployeeID)
</dt>
<dd>
@Html.DisplayFor(model => model.EmployeeID)
</dd>
<dt>
@Html.DisplayNameFor(model => model.OrderDate)
</dt>
<dd>
@Html.DisplayFor(model => model.OrderDate)
</dd>
<dt>
@Html.DisplayNameFor(model => model.RequiredDate)
</dt>
<dd>
@Html.DisplayFor(model => model.RequiredDate)
</dd>
<dt>
@Html.DisplayNameFor(model => model.ShippedDate)
</dt>
<dd>
@Html.DisplayFor(model => model.ShippedDate)
</dd>
<dt>
@Html.DisplayNameFor(model => model.ShipVia)
</dt>
<dd>
@Html.DisplayFor(model => model.ShipVia)
</dd>
<dt>
@Html.DisplayNameFor(model => model.Freight)
</dt>
<dd>
@Html.DisplayFor(model => model.Freight)
</dd>
<dt>
@Html.DisplayNameFor(model => model.ShipName)
</dt>
<dd>
@Html.DisplayFor(model => model.ShipName)
</dd>
<dt>
@Html.DisplayNameFor(model => model.ShipAddress)
</dt>
<dd>
@Html.DisplayFor(model => model.ShipAddress)
</dd>
<dt>
@Html.DisplayNameFor(model => model.ShipCity)
</dt>
<dd>
@Html.DisplayFor(model => model.ShipCity)
</dd>
<dt>
@Html.DisplayNameFor(model => model.ShipRegion)
</dt>
<dd>
@Html.DisplayFor(model => model.ShipRegion)
</dd>
<dt>
@Html.DisplayNameFor(model => model.ShipPostalCode)
</dt>
<dd>
@Html.DisplayFor(model => model.ShipPostalCode)
</dd>
<dt>
@Html.DisplayNameFor(model => model.ShipCountry)
</dt>
<dd>
@Html.DisplayFor(model => model.ShipCountry)
</dd>
</dl>
</div>
<table class="table" cellpadding="4" cellspacing="0"
border="0" style="padding-left:50px;">
<tr>
<th>Order ID </th>
<th>CUSTOMER </th>
<th>OrderDate </th>
<th>RequiredDate </th>
<th>ShippedDate</th>
<th>Freight</th>
<th>ShipName</th>
<th>ShipAddress </th>
<th>ShipCity </th>
<th>ShipPostalCode</th>
<th>ShipCountry</th>
<th>Total</th>
</tr>
<tr>
<td>
@Html.DisplayFor(model => model.OrderID)
</td>
<td>
@Html.DisplayFor(model => model.Customer.ContactName)
</td>
<td>
@Html.DisplayFor(model => model.OrderDate)
</td>
<td>
@Html.DisplayFor(model => model.RequiredDate)
</td>
<td>
@Html.DisplayFor(model => model.ShippedDate)
</td>
<td>
@Html.DisplayFor(model => model.Freight)
</td>
<td>
@Html.DisplayFor(model => model.ShipName)
</td>
<td>
@Html.DisplayFor(model => model.ShipAddress)
</td>
<td>
@Html.DisplayFor(model => model.ShipCity)
</td>
<td>
@Html.DisplayFor(model => model.ShipPostalCode)
</td>
<td>
@Html.DisplayFor(model => model.ShipCountry)
</td>
<td>@Northwind.Controllers.HomeeController.getOrderTotal(Model.Order_Details)</td>
</tr>
</table>
<table class="table" cellpadding="4" cellspacing="0"
border="0" style="padding-left:50px;">
<tr>
<th>Product ID</th>
<th>Product </th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Discount</th>
<th>Total</th>
</tr>
@foreach (var item in Model.Order_Details)
{
<tr>
<td>
@item.ProductID
</td>
<td>
@item.Product.ProductName
</td>
<td>
@item.UnitPrice
</td>
<td>
@item.Quantity
</td>
<td>
@item.Discount
</td>
<td>
@Northwind.Controllers.TestController.getOrderDetailTotal(item)
</td>
</tr>
}
</table>
How to to LAZY LOAD , i mean from the performance aspects , when the application runs , not to load all the partial views for every daatatable record , but to load only that that is being selected .I appriciate every help .Thanks.
What I have tried:
i just explained above the problem