Add multiple WebGrids with styles on one page without redundancy

Question

Basically, here is my code inside the view, and I don't want to repeat instances of WebGrid.

My model

public class UsersWithDetailsModels
{
    public IEnumerable<ApplicationUser> ApplicationUsers { get; set; }
    public IEnumerable<PersonalInfo> PersonalInfos { get; set; }
    public IEnumerable<CreditHistory> CreditHistories { get; set; }
    public IEnumerable<Transaction> Transactions { get; set; }
}

My controller

[AllowAnonymous]
public ActionResult Index(UsersWithDetailsModels model)
{
    return View(model);  // HERE: I can't get any data from database
}

Index.cshtml

@model IEnumerable<Lml.Models.UsersWithDetailsModels>

@{
    ViewBag.Title = "Home";
    Layout = null;

    // TABLE 1 with pager
    var pg = new WebGrid(Model, defaultSort: "Id", canPage: true, ajaxUpdateContainerId: "borrowersAppliedTable");
    pg.Pager(WebGridPagerModes.All);

    // TABLE 2 with pager
    var hg = new WebGrid(Model, defaultSort: "Id", canPage: true, ajaxUpdateContainerId: "borrowersAppliedAddressTable");
    hg.Pager(WebGridPagerModes.All);

    // TABLE 3 with pager
    var hg = new WebGrid(Model, defaultSort: "Id", canPage: true, ajaxUpdateContainerId: "borrowersAppliedMailingTable");
    hg.Pager(WebGridPagerModes.All);
}

Obviously, you can see how redundant this is.

In addition, I have column styles

<!-- TABLE 1 -->
<div class="col-lg-6">
    <h2>Borrowers Applied</h2>
    <div class="table-responsive">
        @pg.GetHtml(
            htmlAttributes: new { id = "borrowersAppliedTable" },
            tableStyle: "table table-bordered table-hover table-striped",
            footerStyle: "table-footer text-center",
            columns:
                pg.Columns(
                    pg.Column(columnName: "Id", header: "Entry ID", format: (item) => item.GetSelectLink(item.Id.ToString())),
                    pg.Column(columnName: "DateApplied", header: "Entry Date"),
                    pg.Column(columnName: "FullName", header: "Full Name"),
                    pg.Column(columnName: "Email", header: "Email address")
            )
        )
    </div>
</div>

<!-- TABLE 2 -->
<div class="col-lg-6">
    <h2>Home Addresses</h2>
    <div class="table-responsive">
        @hg.GetHtml(
            htmlAttributes: new { id = "borrowersAppliedAddressTable" },
            tableStyle: "table table-bordered table-hover table-striped",
            footerStyle: "table-footer text-center",
            columns:
                hg.Columns(
                    hg.Column(columnName: "Id", header: "Entry ID", format: (item) => item.GetSelectLink(item.Id.ToString())),
                    hg.Column(columnName: "Street", header: "Street Address"),
                    hg.Column(columnName: "City", header: "City/Municipality"),
                    hg.Column(columnName: "Zip", header: "ZIP Code"),
                    hg.Column(columnName: "State", header: "Province/State"),
                    hg.Column(columnName: "Country")
        )) 
    </div>
</div>

<!-- TABLE 3 -->
<div class="col-lg-6">
    <h2>Mailing Addresses</h2>
    <div class="table-responsive">
        @hg.GetHtml(
            htmlAttributes: new { id = "borrowersAppliedMailingTable" },
            tableStyle: "table table-bordered table-hover table-striped",
            footerStyle: "table-footer text-center",
            columns:
                hg.Columns(
                    hg.Column(columnName: "Id", header: "Entry ID", format: (item) => item.GetSelectLink(item.Id.ToString())),
                    hg.Column(columnName: "MailStreet", header: "Street Address"),
                    hg.Column(columnName: "MailCity", header: "City/Municipality"),
                    hg.Column(columnName: "MailZip", header: "ZIP Code"),
                    hg.Column(columnName: "MailState", header: "Province/State"),
                    hg.Column(columnName: "MailCountry", header: "Country")
            )
        )
    </div>
</div>

As you can see these rows, I want to apply this to each table.

tableStyle: "table table-bordered table-hover table-striped",
footerStyle: "table-footer text-center",

I do not want to repeat it again and again.

Can someone help me find out the shortcut or is there some short and neat method when displaying multiple WebGrids on the same page?

Answer 1

html:

@model Lml.Models.UsersWithDetailsModels

@{
    ViewBag.Title = "Home";
    Layout = null;

    var configs = new[]
    {
        new
        {
            Model = (IEnumerable<object>)Model.ApplicationUsers,
            Id = "borrowersAppliedTable",
            Header = "Borrowers Applied",
            Columns = new[]
            {
                new {Name = "UserId", Header = "Entry ID"},
                new {Name = "DateApplied", Header = "Entry Date"},
                new {Name = "FullName", Header = "Full Name"},
                new {Name = "Email", Header = "Email address"}
            }
        },
        new
        {
            Model = (IEnumerable<object>)Model.PersonalInfos,
            Id = "borrowersAppliedAddressTable",
            Header = "Home Addresses",
            Columns = new[]
            {
                new {Name = "Id", Header = "Entry ID"},
                new {Name = "Street", Header = "Street Address"},
                new {Name = "City", Header = "City/Municipality"},
                new {Name = "Zip", Header = "ZIP Code"},
                new {Name = "State", Header = "Province/State"},
                new {Name = "Country", Header = "Country"}
            }
        },
        new
        {
            Model = (IEnumerable<object>)Model.CreditHistories,
            Id = "borrowersAppliedMailingTable",
            Header = "Mailing Addresses",
            Columns = new[]
            {
                new {Name = "Id", Header = "Entry ID"},
                new {Name = "MailStreet", Header = "Street Address"},
                new {Name = "MailCity", Header = "City/Municipality"},
                new {Name = "MailZip", Header = "ZIP Code"},
                new {Name = "MailState", Header = "Province/State"},
                new {Name = "MailCountry", Header = "Country"}
            }
        },
        ...
    };
    var tables = configs.Select(config =>
    {
        var grid = new WebGrid(config.Model, defaultSort: config.Columns[0].Name, canPage: true, ajaxUpdateContainerId: config.Id);
        grid.Pager(WebGridPagerModes.All);

        return new { Id = config.Id, Grid = grid, Header = config.Header, Columns = config.Columns};
    });
}

@{
    foreach (var table in tables)
    {
        <div class="col-lg-6">
            <h2>@table.Header</h2>
            <div class="table-responsive">
                @table.Grid.GetHtml(
                    htmlAttributes: new {id = table.Id },
                    tableStyle: "table table-bordered table-hover table-striped",
                    footerStyle: "table-footer text-center",
                    columns:
                        table.Grid.Columns(
                            table.Columns.Select((column, i) =>
                            {
                                return i == 0
                                    ? table.Grid.Column(columnName: column.Name, header: column.Header, format: (item) => item.GetSelectLink(item.Id.ToString()))
                                    : table.Grid.Column(columnName: column.Name, header: column.Header);
                            }).ToArray())
                    )
            </div>
        </div>
    }
}

Answer 2

, WebGrids . , , WebGrids, , . , , , :

        @hg.GetHtml(
        htmlAttributes: new { id = "borrowersAppliedAddressTable" },
        tableStyle: "webgrid",
        headerStyle: "webgrid-header",
        footerStyle: "webgrid-footer",
        columns:
            hg.Columns(
                hg.Column(columnName: "Id", header: "Entry ID", format: (item) => item.GetSelectLink(item.Id.ToString())),
                hg.Column(columnName: "Street", header: "Street Address"),
                hg.Column(columnName: "City", header: "City/Municipality"),
                hg.Column(columnName: "Zip", header: "ZIP Code"),
                hg.Column(columnName: "State", header: "Province/State"),
                hg.Column(columnName: "Country")
    )) 

JQuery

function ApplyStyles() {
    $('.webgrid').addClass('table table-bordered table-hover table-striped');
    $('.webgrid-header').addClass('table-header text-center');
    $('.webgrid-footer').addClass('table-footer text-center');
}

, , , , , .