MVC 4如何为WebGrid设置行ID

Question

在一个部分 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); %>

并且我使用这个方法将订单号传递给控制器：

<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});
    }

我没有接收到任何id。

在渲染的html代码中，我发现从控制器返回的ActionResult中缺少id。

网格行不包含像编辑、删除等按钮，这不是故意的。

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

请问您如何解决这个问题？

谢谢。

- Adi Toma

Answer 1

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

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

这将生成一个带有ID的适当链接，以返回给您的控制器。

- Simon

Answer 2

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

我通过修改从WebGrid生成的HTML来处理它，在将其返回到视图进行渲染之前。

1. 使用包管理器添加"HtmlAgilityPack" - 这用于操作HTML节点。你也可以手动操作，但这样会更容易！
2. 子类化webgrid
3. 重写GetHTML方法

4. 将此代码放在视图中，并传入一个lambda表达式来从模型项返回标识符值

   using HtmlAgilityPack;
   
   public class SmartGrid<T> : WebGrid
   {
   
        ...为了简洁省略部分代码...
   
       public IHtmlString GetHtml(string tableStyle = null, ...为了简洁省略部分代码..., Func<T, object> getRowId = null)
       {
           IHtmlString html =  base.GetHtml(tableStyle: tableStyle, ...为了简洁省略部分代码...);
   
           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拦截来生成行编辑模板、页脚等——它运行得很好！

- James Joyce