Show Multiple Web Grid on 1 View with MVC 5

Add controller method and provide multiple <List> to the view

    public ActionResult Index()

        {

            dynamic mymodel = new ExpandoObject();

            mymodel.ExpenceTypes = db.ExpenceTypes.ToList();

            mymodel.TransactionTypes = db.TransactionTypes.ToList();

            mymodel.TransactionSubTypes = db.TransactionSubTypes.ToList();

            return View(mymodel);

        }

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Create view for given Controller

Add following code in View

Index View -

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

@model dynamic

@{

    ViewBag.Title = "Index";

    Layout = "~/Views/Sharedd/_MasterPage.cshtml";

    var gridExpenceTypes = new WebGrid(source: Model.ExpenceTypes, canPage: true, rowsPerPage: 10, canSort: true);

    gridExpenceTypes.Pager(WebGridPagerModes.All);

    var gridTransactionType = new WebGrid(source: Model.TransactionTypes, canPage: true, rowsPerPage: 10, canSort: true);

    gridTransactionType.Pager(WebGridPagerModes.All);

    var gridTransactionSubType = new WebGrid(source: Model.TransactionSubTypes, canPage: true, rowsPerPage: 10, canSort: true);

    gridTransactionSubType.Pager(WebGridPagerModes.All);

}

<h2>Setting</h2>

@Html.ActionLink("Create Expence Type", "CreateExpenceType", null, new { id = "lnkCreate" })

<div id="content">

    @gridExpenceTypes.GetHtml(

tableStyle: "webgrid-table",

headerStyle: "webgrid-header",

footerStyle: "webgrid-footer",

alternatingRowStyle: "webgrid-alternating-row",

rowStyle: "webgrid-row-style",

                columns: gridExpenceTypes.Columns(

            //here i will add column for serial no

            gridExpenceTypes.Column(header: "Serial No", format: @<text><div>@(item.WebGrid.Rows.IndexOf(item) + 1)</div></text>),

           //gridExpenceTypes.Column(columnName: "ExpenceTypeID", header: "TransactionSubType ID"),

            gridExpenceTypes.Column(columnName: "ExpenceTypeID", header: "TransactionType"),

            gridExpenceTypes.Column(columnName: "ExpenceType1", header: "Expence Type"),

            gridExpenceTypes.Column(header: "Edit", format: @<text>@Html.ActionLink("Edit", "Edit", new { id = item.ExpenceTypeID }, new { @class = "lnkEdit" })</text>),

            gridExpenceTypes.Column(header: "Details", format: @<text>@Html.ActionLink("Details", "Details", new { id = item.ExpenceTypeID }, new { @class = "lnkDetail" })</text>),

            gridExpenceTypes.Column(header: "Delete?", format: @<text>@Html.ActionLink("Delete", "DeleteTransactionSubType", new { id = item.ExpenceTypeID }, new { @class = "lnkDelete" })</text>)

                                            ))

</div>

<br />

<hr />

@Html.ActionLink("Create Tranction Type", "CreateTransactionType", null, new { id = "lnkCreate" })

<br />

<div id="content">

    @gridTransactionType.GetHtml(

    tableStyle: "webgrid-table",

    headerStyle: "webgrid-header",

    footerStyle: "webgrid-footer",

    alternatingRowStyle: "webgrid-alternating-row",

    rowStyle: "webgrid-row-style",

            columns: gridTransactionType.Columns(

            //here i will add column for serial no

            gridTransactionType.Column(header: "Serial No", format: @<text><div>@(item.WebGrid.Rows.IndexOf(item) + 1)</div></text>),

            gridTransactionType.Column(columnName: "TransactionType1", header: "Transaction Type"),

            gridTransactionType.Column(header: "Edit", format: @<text>@Html.ActionLink("Edit", "Edit", new { id = item.TransactionTypeID }, new { @class = "lnkEdit" })</text>),

            gridTransactionType.Column(header: "Details", format: @<text>@Html.ActionLink("Details", "Details", new { id = item.TransactionTypeID }, new { @class = "lnkDetail" })</text>),

            gridTransactionType.Column(header: "Delete?", format: @<text>@Html.ActionLink("Delete", "DeleteConfirmed", new { id = item.TransactionTypeID }, new { @class = "lnkDelete" })</text>)

                        ))

</div>

<br />

<hr />

@Html.ActionLink("Create Tranction Sub Type", "TransactionSubType", null, new { id = "lnkCreate" })

<br />

<div id="content">

    @gridTransactionSubType.GetHtml(

tableStyle: "webgrid-table",

headerStyle: "webgrid-header",

footerStyle: "webgrid-footer",

alternatingRowStyle: "webgrid-alternating-row",

rowStyle: "webgrid-row-style",

        columns: gridTransactionType.Columns(

            //here i will add column for serial no

        gridTransactionSubType.Column(header: "Serial No", format: @<text><div>@(item.WebGrid.Rows.IndexOf(item) + 1)</div></text>),

        gridTransactionSubType.Column(columnName: "TransactionSubTypeID", header: "TransactionSubType ID"),

        gridTransactionSubType.Column(columnName: "TransactionTypeID", header: "TransactionType"),

        gridTransactionSubType.Column(columnName: "TransactionSubType1", header: "Transaction Sub Type"),

        gridTransactionSubType.Column(header: "Edit", format: @<text>@Html.ActionLink("Edit", "Edit", new { id = item.TransactionSubTypeID }, new { @class = "lnkEdit" })</text>),

        gridTransactionSubType.Column(header: "Details", format: @<text>@Html.ActionLink("Details", "Details", new { id = item.TransactionSubTypeID }, new { @class = "lnkDetail" })</text>),

        gridTransactionSubType.Column(header: "Delete?", format: @<text>@Html.ActionLink("Delete", "DeleteTransactionSubType", new { id = item.TransactionSubTypeID }, new { @class = "lnkDelete" })</text>)

                            ))

</div>

<br />

<hr />

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Output :: --