Use Multiple Grids on Partial View

Sometimes we need to have multiple grids on a single view at that time create a model which have property of different models like following.

[DataContract]
    public class DashboardGridModel
    {
        [DataMember]
        public List<MilestoneDelays> MilestoneDelay { get; set; }
        [DataMember]
        public List<Receivables> Receivable { get; set; }
        [DataMember]
        public List<PaymentDues> PaymentDue { get; set; }
 }

[DataContract]
    public class MilestoneDelays
    {
        [DataMember]
        public string CustomerName { get; set; }
        [DataMember]
        public string ProjectName { get; set; }
        [DataMember]
        public string MileStoneName { get; set; }
        [DataMember]
        public int Amount { get; set; }
        [DataMember]
        public string EndDate { get; set; }
    }
    [DataContract]
    public class Receivables
    {
        [DataMember]
        public string InvoiceNo { get; set; }
        [DataMember]
        public string InvoiceDate { get; set; }
        [DataMember]
        public string CustomerName { get; set; }
        [DataMember]
        public string ProjectName { get; set; }
        [DataMember]
        public string Amount { get; set; }
    }
    [DataContract]
    public class PaymentDues
    {
        [DataMember]
        public string InvoiceNo { get; set; }
        [DataMember]
        public string InvoiceDate { get; set; }
        [DataMember]
        public string CustomerName { get; set; }
        [DataMember]
        public string ProjectName { get; set; }
        [DataMember]
        public string Amount { get; set; }
    }

Now create a Partial view

@model Common.Models.DashboardGridModel
<div>
    <div>
        <br />
        <div class="span12 panel panel-primary grid">
            <div class="panel-heading">
                <h5 class="panel-title">Milestone Delays</h5>
            </div>
            <div class="row-fluid">
                <div id="GroupDetailGrid" class="divGrid">
                    <table class="table table-bordered table-striped table-hover gridtable">
                        <thead>
                            <tr>
                                <th>Customer Name
                                </th>
                                <th>Project Name
                                </th>
                                <th>Mile stone
                                </th>
                                <th>End Date
                                </th>
                                <th class="text-right">Amount
                                </th>
                                <th>&nbsp;
                                </th>
                            </tr>
                        </thead>
                        @foreach (var item in Model.MilestoneDelay)
                        {
                            <tr>
                                <td>@item.CustomerName
                                </td>
                                <td>@item.ProjectName
                                </td>
                                <td>@item.MileStoneName
                                </td>
                                <td>@item.EndDate
                                </td>
                                <td class="text-right">@item.Amount
                                </td>
                            </tr>
                        }
                    </table>                 
                </div>
            </div>
        </div>
    </div>
    <div>
        <div class="span12 panel panel-primary grid">
            <div class="panel-heading">
                <h5 class="panel-title">Receivables                     
                </h5>
            </div>
            <table class="table table-bordered table-striped table-hover gridtable">
                        <thead>
                            <tr>
                                <th>Invoice No
                                </th>
                                <th>Invoice Date
                                </th>
                                <th>Customer Name
                                </th>
                                <th>Project Name
                                </th>
                                <th class="text-right">Amount
                                </th>
                                <th>&nbsp;
                                </th>
                            </tr>
                        </thead>
                        @foreach (var item in Model.Receivable)
                        {
                            <tr>
                                <td>@item.InvoiceNo
                                </td>
                                <td>@item.InvoiceDate
                                </td>
                                <td>@item.CustomerName
                                </td>
                                <td>@item.ProjectName
                                </td>
                                <td class="text-right">@item.Amount
                                </td>
                            </tr>
                        }
                    </table>
          
        </div>
    </div>
    <div>
        <div class="span12 panel panel-primary grid">
            <div class="panel-heading">
                <h5 class="panel-title">Outstanding
                </h5>
            </div>
            <table class="table table-bordered table-striped table-hover gridtable">
                        <thead>
                            <tr>
                                <th>Invoice No
                                </th>
                                <th>Invoice Date
                                </th>
                                <th>Customer Name
                                </th>
                                <th>Project Name
                                </th>
                                <th class="text-right">Amount
                                </th>
                                <th>&nbsp;
                                </th>
                            </tr>
                        </thead>
                        @foreach (var item in Model.PaymentDue)
                        {
                            <tr>
                                <td>@item.InvoiceNo
                                </td>
                                <td>@item.InvoiceDate
                                </td>
                                <td>@item.CustomerName
                                </td>
                                <td>@item.ProjectName
                                </td>
                                <td class="text-right">@item.Amount
                                </td>
                            </tr>
                        }
                    </table>
        </div>
    </div>
</div>

Now add Div on webpage body where you want to load this partial view of grids.

<div id="DashboardGrids" style="width:80%;float:left;"></div>

Now add an action in controller which will be called to render partial view

[HttpGet]
        public ActionResult RanderPartial(string Criteria, string FromYear, string FromMonth, string ToYear, string ToMonth, string ProjectList)
        {
            DashBoardServices Dashboard = new DashBoardServices();
            DashboardGridModel DashboardModel = new DashboardGridModel();
            DashboardModel.MilestoneDelay = DataTableExtensoins.ToList<MilestoneDelays>(Dashboard.GetDelayedMilestoneGrid(Criteria, FromYear, FromMonth, ToYear, ToMonth, ProjectList).Tables[0]);
            DashboardModel.Receivable = DataTableExtensoins.ToList<Receivables>(Dashboard.GetReceivablesGrid(Criteria, ProjectList).Tables[0]);
            DashboardModel.PaymentDue = DataTableExtensoins.ToList<PaymentDues>(Dashboard.GetPaymentDuesGrid(Criteria, ProjectList).Tables[0]);
            return PartialView("_GridData", DashboardModel);
        }

Now add the following script and call it on button click or on document ready.

function BindGrid() {       
var Projects = "";
        $(".chk").each(function () {
            if ($(this).is(':checked'))
                Projects += $(this).val() + ",";
        });
        var ProjectList = Projects.substring(0, Projects.length - 1);
        var Criteria = $("#ddlCriteria").val();
        var From = "", To = "", Title = "";;
        var Tenure = $("#ddlTenure").val();
        var FromYear, FromMonth, ToYear, ToMonth;
        if (Tenure == "Monthly") {
            From = $("#ddlFrom").val();
            To = $("#ddlTo").val();
            FromYear = From.toString().substring(0, 4);
            FromMonth = From.toString().substring(4, 6);
            ToYear = To.toString().substring(0, 4);
            ToMonth = To.toString().substring(4, 6);
            //Title = "(Period " + $("#ddlFrom").val() + "-" + $("#ddlTo").val() + ")";
            Title = "";
        }
        $.get('../Dashboard/RanderPartial', { Criteria: Criteria, FromYear: FromYear, FromMonth:FromMonth, ToYear: ToYear,ToMonth:ToMonth, ProjectList: ProjectList }, function (data) {
            $('#DashboardGrids').html(data);
        });
    }