在webgrid中添加行

Question

我正在使用MVC 3 webgrid，我需要在webgrid中添加一个新行，以显示产品表中的价格总和。
任何想法都表示赞赏。
这是我的代码

@{
WebGrid grid = new WebGrid(source: Model,
                           rowsPerPage: 3,
                           canSort: true,
                           canPage: true,
                           ajaxUpdateContainerId: "ajaxgrid");  


@grid.GetHtml(
    alternatingRowStyle: "altrow",
    mode: WebGridPagerModes.All,
    firstText: "<< ",
    previousText: "< ",
    nextText: " >",
    lastText: " >>",
    columns: grid.Columns(
            grid.Column(format: (item) => new HtmlString(Html.ActionLink("Edit", "Edit", new { id = item.ProductId }).ToString() + " | " +
                                                        Html.ActionLink("Delete", "Delete", new { id = item.ProductId }).ToString()
                                                        )
                        ),
            grid.Column("ProductId", "Product Id"),
            grid.Column("CategoryId", "Category Name", format: (item) => item.Category.CategoryName),
            grid.Column("ProductName", "Product Name"),
            grid.Column("Price", "Price", format: @<text>@String.Format("{0:c}", item.Price)</text>)
    )
)

}

Answer 1

我遇到了类似的问题，所以我创建了内置的MVC WebGrid的扩展。 代码和示例用法位于https://gist.github.com/3211605 。 希望它有用。

Answer 2

如果您可以使用JQuery并且页脚内容不是列对齐的，那么向WebGrid添加页脚有点笨拙，但并不困难：

@{
  var grid = new WebGrid(...);
}
@grid.GetHtml(
  ...,
  htmlAttributes: new { id = "myTable" }
)

<span id="footerContent">This will be in footer</span>

<script>
  $().ready(function () {
    $('#footerContent').appendTo('#myTable tfoot tr td:last');
  }
</script>

基础是：

1. 使用WebGrid.GetHtml（）的htmlAttributes参数设置表的HTML ID属性
2. 将页脚的内容放在页面上的元素中
3. 使用JQuery的.appendTo（）方法将内容元素添加到页脚的TD元素的末尾

一个更强大的解决方案应该确保这些元素存在，但你明白了。

假设您的模型已经包含总和（或获得总和的方法），只需构建您的页脚，如：

<span id="footerContent">@Model.Total</span>

Answer 3

这是一个可怕的黑客，但它让我继续我的一天。 我认为正确执行此操作的方法是编写一个允许您传入页脚行的Html Helper。 WebGrid没有内置页脚行，我有点失望。

 gridHtml = MvcHtmlString.Create(gridHtml.ToString().Replace("</table>", sbTotalsTable.ToString()));

    gridHtml is from   var gridHtml = @grid.GetHtml....blah..


    the sbTotalsTable is    var sbTotalsTable = new StringBuilder();

    sbTotalsTable.Append("<tr>");

    sbTotalsTable.Append("<td>");

    sbTotalsTable.Append(DataSource.Select(s=>s.PropToSum).Sum().ToString();//The total of that column
    sb.TotalsTable.Append("</td>");
    sb.TotalsTable.Append("</tr>");
    sb.TotalsTable.Append("</table>");//closing the table without opening it because the rest comes from the gridHtml.

只确保匹配手工构建表行中的列数。 请注意，没有表开始标记..整个想法是在表关闭时劫持创建的html并添加一行。 对不起手动键入的代码。 我是一个专有的应用程序，我不敢粘贴它...

Answer 4

将一个新项添加到IEnumerable，您将其用作要绑定到的WebGrid的源。

var lineItems = Model.LineItems;
var totalRow = new SalesLineItem
                {
                    SaleType = "Total Sales",
                    Amount = Model.TotalSales
                };
lineItems.Add(totalRow);

var grid = new WebGrid(lineItems);

我还没有找到一种很好的方法来将格式应用到这个总行。 这可能必须在客户端完成。