DATATABLES ROW DETAIL

ggdd

Please find attached two png files . What im trying to do is , when i click the PLUS image in the datatable , it should open up Me.chtml (instead of string "TEST") , that is a partial view , it stored the product details information and it is related with ORDER ID .

These are the controller and the views :

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Mvc;
using Northwind.Models;
using Northwind.ViewModel;
using Northwind;

namespace Northwind.Controllers
{
public class TestController : Controller
{
private dbNorthwindEntities db = new dbNorthwindEntities();
Orders or = new Orders();

    public ActionResult Index1()
    {
        return View();
    }



    /*   [HttpPost]
       public ActionResult Me(int OrderID)
       {

           return PartialView("Me", db.Orders.Find(OrderID));
       }*/

//    [HttpPost]
    public ActionResult Me(int? OrderID)
    {
        var detalet = db.Order_Details;
        var orderDetalet = (from e in detalet
                            where (OrderID == null || e.OrderID == OrderID)
                            select e).ToList();
        return View(orderDetalet);
    }

    public JsonResult GetData()
    {
        try
        {
            using (db = new dbNorthwindEntities())
            {
                var myList = or.GetOrders(db);
                return Json(myList, JsonRequestBehavior.AllowGet);
            }
        }
        catch (Exception)
        {
            throw;
        }
    }




}

}

The master view

<style>

td.details-control {
background: url('/Content/images/details_open.png') no-repeat center center;
cursor: pointer;

}
tr.details td.details-control {
background: url('/Content/images/details_close.png') no-repeat center center;
}

</style>

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th></th>
            <th>Order  ID</th>

            <th>Customer ID</th>
            <th>ContactName</th>
            <th>Employee ID</th>
            <th>Order Date</th>
            <th>Required Date</th>
            <th>Ship Via</th>
            <th>Freight</th>
            <th>Ship name</th>
            <th>Ship Address</th>
            <th>Ship City</th>
            <th>Ship Region</th>
            <th>Ship Postal</th>
            <th>Ship Country</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th></th>
            <th>Order  ID</th>

            <th>Customer ID</th>
            <th>ContactName</th>

            <th>Employee ID</th>
            <th>Order Date</th>
            <th>Required Date</th>
            <th>Ship Via</th>
            <th>Freight</th>
            <th>Ship name</th>
            <th>Ship Address</th>
            <th>Ship City</th>
            <th>Ship Region</th>
            <th>Ship Postal</th>
            <th>Ship Country</th>
        </tr>
    </tfoot>

</table>

function format(d) { return "TEST"; } $(document).ready(function () { var dt = $('#example').DataTable({ "ajax": { "url": "/Test/GetData", "type": "GET", "dataSrc": "", "method": "GET", "dataType": "json", " destroy": true }, "columns": [ { "class": "details-control", "orderable": false, "data": null, "defaultContent": "" }, { "data": "OrderID" }, { "data": "CustomerID" }, { "data": "ContactName" }, { "data": "EmployeeID", }, { "data": "OrderDate" }, { "data": "RequiredDate" }, { "data": "ShipVia" }, { "data": "Freight" }, { "data": "ShipName" }, { "data": "ShipAddress" }, { "data": "ShipCity" }, { "data": "ShipRegion" }, { "data": "ShipPostalCode" }, { "data": "ShipCountry" } ], "order": [[1, 'asc']] }); var detailRows = []; $('#example tbody').on( 'click', 'tr td.details-control', function () { var tr = $(this).closest('tr'); var row = dt.row( tr ); var idx = $.inArray( tr.attr('id'), detailRows ); if ( row.child.isShown() ) { tr.removeClass( 'details' ); row.child.hide(); // Remove from the 'open' array detailRows.splice( idx, 1 ); } else { tr.addClass( 'details' ); row.child( format( row.data() ) ).show(); // Add to the 'open' array if ( idx === -1 ) { detailRows.push( tr.attr('id') ); } } } ); // On each draw, loop over the `detailRows` array and show any child rows dt.on( 'draw', function () { $.each( detailRows, function ( i, id ) { $('#'+id+' td.details-control').trigger( 'click' ); } ); } ); } );

And the partial view

@model IEnumerable<Northwind.Order_Detail>

@foreach (var item in Model) { }

Product ID	Product	Unit Price	Quantity	Discount
@item.ProductID	@item.Product.ProductName	@item.UnitPrice	@item.Quantity	@item.Discount

allan

Have a look at this blog post which details how to Ajax load content into a child row.

Allan