Блог

Я работаю с веб-сеткой MVC 3, и мне нужно добавить новую строку в webgrid, чтобы отобразить сумму цены из таблицы product.
Приветствуются любые идеи.
Вот мой код

 @{
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>)
    )
)
  

}

У меня была похожая проблема, поэтому я создал расширение встроенной MVC WebGrid. Код и пример использования находятся на https://gist.github.com/3211605. Надеюсь, это полезно.

Если вас устраивает использование 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. Задайте атрибут HTML ID вашей таблицы, используя параметр htmlAttributes WebGrid.GetHtml()
2. Поместите содержимое нижнего колонтитула в элемент на вашей странице
3. Используйте метод jQuery .appendTo(), чтобы добавить элемент содержимого в конец элемента TD нижнего колонтитула

Более надежное решение должно убедиться, что эти элементы существуют, но вы поняли идею.

Предполагая, что ваша модель уже содержит сумму (или метод для получения суммы), просто создайте свой нижний колонтитул следующим образом:

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

Это ужасный взлом, но он позволил мне продолжить мой день. Я думаю, что способ сделать это правильно — написать Html-помощник, который позволяет передавать строку нижнего колонтитула. Я немного разочарован, что в 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-код при закрытии таблицы и добавить строку.
Извините за набранный вручную код. Я использую проприетарное приложение и не решаюсь ничего вставить из него…

Добавьте новый элемент в IEnumerable, который вы используете в качестве источника для привязки к WebGrid.

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

var grid = new WebGrid(lineItems);
  

Я пока не нашел хорошего способа применить форматирование к этой общей строке. Возможно, это придется делать на стороне клиента.