ASP.Net MVC：如何自定义webgrid寻呼机UI

Question

我需要在webgrid寻呼机中添加一些html标签。 webgrid寻呼机是tfoot标记。

我当前的网格用户界面如下图所示。

但我希望我的寻呼机看起来像下图。

我想添加一些图片和文字以及寻呼机链接。

我从这个网站http://www.creativebloq.com/web-design/create-custom-tables-webgrid-9134626

获得了帮助

他们只是用以下方式用更多标签替换某些标签

.ToString().Replace("<tfoot><tr><td","<tfoot><tr class='footstuff'><td></td><td style='color: black;'>Records " + firstRecord + " to " + lastRecord + " of " + grid.TotalRowCount  + "</td><td></td><td></td><td></td><td")

他们的完整网格代码看起来像。

@MvcHtmlString.Create(
grid.GetHtml(mode: WebGridPagerModes.All, tableStyle: "tranlist", headerStyle: "headerstyle",  firstText: "First", lastText: "Last",   
columns: grid.Columns(
grid.Column("TranDate", header: "Trans Date", format: @<text>@item.TranDate.ToShortDateString()</text>),
grid.Column("Description", header: "Transaction Description", style: "bigcolumn"), grid.Column("Units", header: "Units", style: "smallcolumn"),
grid.Column("UnitPrice", header: "Unit Price", format: @<text>@item.UnitPrice.ToString("$0.00")</text>, style: "medcolumn"),
grid.Column("Total", canSort: false, header: "Total Price", format: @<text>@{double q = (item.Units * item.UnitPrice);} @q.ToString("$0.00")</text>, style: "medcolumn"),
grid.Column("TransactionID", header: "Action", style: "linkcolumn", canSort: false,
format: @<text> @Html.ActionLink("Edit", "Edit", new { id = item.TransactionID })
| @Html.ActionLink("Delete", "Delete", new { id = item.TransactionID })</text>)))
.ToString().Replace("<tfoot><tr><td","<tfoot><tr class='footstuff'><td></td><td style='color: black;'>Records " + firstRecord + " to " + lastRecord + " of " + grid.TotalRowCount  + "</td><td></td><td></td><td></td><td")
)

所以我重新构建了我的webgrid代码，如下所示，但它不起作用。在我的情况下，在寻呼机区域中没有添加任何内容。看下面的代码并告诉我我犯了哪个错误。

@MvcHtmlString.Create(
grid.GetHtml(
        tableStyle: "webgrid-table",
        headerStyle: "webgrid-header",
        footerStyle: "webgrid-footer",
        alternatingRowStyle: "webgrid-alternating-row",
        selectedRowStyle: "webgrid-selected-row",
        rowStyle: "webgrid-row-style",
        mode: WebGridPagerModes.All,
        firstText: "<<",
        previousText: "<",
        nextText: ">",
        lastText: ">>",
        numericLinksCount: 5,
        columns:
            grid.Columns
            (
            grid.Column(columnName: "ID", header: "ID", format: @<text>@item.ID</text>,style:"SmallCols"),
            grid.Column(columnName: "FirstName", header: "First Name", format: @<text>@item.FirstName</text>,style:"NameColWidth" ),
            grid.Column(columnName: "LastName", header: "Last Name", format: @<text>@item.LastName</text>,style:"NameColWidth"),

            grid.Column(columnName: "StateName", header: "State Name", format: @<text>@item.StateName</text>,style:"NameColWidth"),
            grid.Column(columnName: "CityName", header: "City Name", format: @<text>@item.CityName</text>,style:"NameColWidth"),
            grid.Column(header: "IsActive",
            format: @<text><input id="select" class="box" name="select" 
            type="checkbox" @(item.IsActive ? "checked='checked'" : "") value="@item.IsActive" /></text>
            , style: "text-center checkbox-width SmallCols")
            ))
.ToString().Replace("<tfoot><tr><td", "<tfoot><tr class='footstuff'><td></td><td style='color: black;'>Records 1 to 2 of 5 </td><td></td><td></td><td></td><td")
)            

寻求帮助。感谢