MVC 4 如何为 WebGrid 设置行 ID答案

【问题标题】：MVC 4 how to set row id for a WebGridMVC 4 如何为 WebGrid 设置行 ID
【发布时间】：2013-06-25 08:42:35
【问题描述】：

在部分 Razor 视图中，我有这个：

    @model IList<Stratent.ScanCloud.Shared.DeliveryOrderLineDto>

    <div id="gridDiv" style="width:100%; max-height:250px; overflow:auto; border:1px solid #d1d3d4">
@{

    var grid = new  WebGrid(Model, defaultSort: "Date",
                           selectionFieldName: "SelectedRow",
                      `enter code here`     fieldNamePrefix: "gridItem", ajaxUpdateContainerId: "grid");

}

  @if (Model.Count > 0)
  {
      @grid.GetHtml(

          tableStyle: "grid",
          alternatingRowStyle: "gridrow_alternate",
          //format:@<tr id= '@item.OrderId'> </tr>,
          selectedRowStyle: "highlight",
          rowStyle: "gridrow",
          htmlAttributes: new {id = "grid"},
          columns: grid.Columns(
              grid.Column("OrderId", header: "OrderId " + Html.SortDirection(ref grid, "Client"), style: "width:9%"),
              grid.Column("Client", header: "Client " + Html.SortDirection(ref grid, "Client"), style: "width:9%"),
              grid.Column("Date", header: "Date " + Html.SortDirection(ref grid, "Date"), style: "width:9%"),
              grid.Column("Time", header: "Time " + Html.SortDirection(ref grid, "Time"), style: "width:9%"),
              grid.Column("Reference", header: "Reference " + Html.SortDirection(ref grid, "Reference"), style: "width:9%"),
              grid.Column("Order", header: "Order " + Html.SortDirection(ref grid, "Order"), style: "width:15%"),
              grid.Column("Customer", header: "Customer " + Html.SortDirection(ref grid, "Customer"), style: "width:15%"),
              grid.Column("Street", header: "Street " + Html.SortDirection(ref grid, "Street"), style: "width:9%"),
              grid.Column("Number", header: "No " + Html.SortDirection(ref grid, "Number"), style: "width:9%"),
              grid.Column("Town", header: "Town " + Html.SortDirection(ref grid, "Town"), style: "width:9%"),
              grid.Column("Crs", header: "Crs " + Html.SortDirection(ref grid, "Crs"), style: "width:15%"),
              grid.Column("Document", header: "Document " + Html.SortDirection(ref grid, "Document"), style: "width:15%")
              )


           )
  }

 @if(Model.Count == 0)
    {
        <p>There are no OrderLines available.</p>
    }

</div>

在主页我调用

<%Html.RenderPartial("_orderLinesList", Model.Items); %>

然后我使用它来将 orderId 传递给控制器：

<script type="text/javascript">
     $(function () {
        $("tbody tr").click(function () {
            var url = '<%=Url.Action("SelectOrderLine", "DeliveryOrderLines", new {id = "__id__"}) %>';
            url = url.replace('__id__', $(this).attr('id'));
            location.href = url;
        })
        .hover(function () { $(this).addClass('highlight'); }, function () { $(this).removeClass('highlight'); });
    });

</script>

在我的控制器的 ActionResult 中

 public ActionResult SelectOrderLine(int id)
    {
        return RedirectToAction("Index", "DeliveryOrderLine", new {id = id});
    }

我没有收到任何身份证。

在呈现的 html 代码中，我看到没有任何 Id 可以从 Controller 发送到 ActionResult。

网格行不包含任何按钮，如编辑、删除……这不是有意的。

我想为每一行定义一个 id，并在选择一行时使用这个 id，然后将 id 从我的控制器发送到 ActionResult 方法中。

你能告诉我如何解决这个问题吗？

谢谢。

【问题讨论】：

标签： asp.net asp.net-mvc-3 asp.net-mvc-4 c#-5.0

【解决方案1】：

我知道这是一个老问题，但我也一直在努力解决这个问题。

我通过修改从 webgrid 生成的 HTML 来处理它，然后再将其返回到视图进行渲染。

使用包管理器添加“HtmlAgilityPack” - 这用于操作 HTML 节点。您可以手动完成，但这使得它轻松多了！
子类化 webgrid
覆盖 GetHTML 方法

把它放到你的视图中，并传入一个 lambda 以从模型项返回标识符值

using HtmlAgilityPack;

public class SmartGrid<T> : WebGrid
{

     ...omitted for brevity...

    public IHtmlString GetHtml(string tableStyle = null, ...omitted for brevity..., Func<T, object> getRowId = null)
    {
        IHtmlString html =  base.GetHtml(tableStyle: tableStyle, ...omitted for brevity...);

        HtmlDocument doc = new HtmlDocument();
        doc.LoadHtml(html.ToString());

        for (int i = 0; i < this.Rows.Count; i++)
        { 
            HtmlNode node = _doc.DocumentNode.SelectSingleNode(String.Format("//table/tbody/tr[{0}]", i + 1));
            node.SetAttributeValue("id", getRowId(this.Rows[i].Value));
        }

        return new HtmlString(doc.DocumentNode.OuterHtml);
    }

这是一个显示概念的“非规范化”版本，在我的生产代码中，我已将“SetRowIds”移动到一个新函数中。

我现在正在使用这种对 HTML 的截取来生成行编辑模板、页脚等 - 效果很好！

【讨论】：

【解决方案2】：

您可以在设置网格时指定每列的格式：

grid.Column("InvoiceID", header: "Invoice",
                format: @<text>@Html.ActionLink((string)item.InvoiceID.ToString(),
                "Invoice", "Invoice", new { invoiceID = item.InvoiceID }, null)</text>),

这将生成带有 ID 的适当链接以传回您的控制器。

【讨论】：