MVC 4 cách thiết id hàng cho một WebGrid

Question

Trong một cái nhìn Razor một phần tôi có điều này:

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

Trong trang chính tôi gọi

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

và sau đó tôi sử dụng để vượt qua OrderID với bộ điều khiển:

<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>  

Trong ActionResult từ điều khiển của tôi

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

Tôi không nhận được bất kỳ id nào.

Trong mã html được hiển thị, tôi đã thấy rằng không có bất kỳ Id nào để gửi trong ActionResult từ Bộ điều khiển.

Các hàng lưới không chứa bất kỳ nút nào như Chỉnh sửa, Xóa ... mục này không có ý định.

Tôi muốn xác định id cho mỗi hàng và sử dụng id này khi hàng được chọn và sau đó gửi id vào phương thức ActionResult từ Bộ điều khiển của tôi.

Bạn có thể cho tôi biết cách tôi có thể giải quyết vấn đề này không?

Cảm ơn bạn.

Answer 1

Bạn có thể chỉ định định dạng của mỗi cột khi bạn thiết lập các mạng lưới lên:

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

Điều này sẽ tạo ra các liên kết thích hợp với một ID để vượt qua trở lại điều khiển của bạn.

Answer 2

Tôi biết đây là một câu hỏi cũ, nhưng tôi cũng đã chiến đấu với điều này.

Tôi đã xử lý nó bằng cách sửa đổi HTML được tạo từ webgrid trước khi trả về chế độ xem để hiển thị.

1. Thêm "HtmlAgilityPack" bằng Trình quản lý gói - điều này được sử dụng để thao tác các nút HTML. Bạn có thể làm điều đó bằng tay, nhưng điều này làm cho nó MUCH dễ dàng hơn!
2. Subclass các webgrid
3. Override phương pháp GetHTML

4. Đặt này lên tầm nhìn của bạn, và vượt qua trong một lambda để trả về giá trị số nhận dạng từ mục mô hình

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

Đây là một "không chuẩn hóa" phiên bản để hiển thị khái niệm, trong mã sản xuất của tôi, tôi đã chuyển "SetRowIds" thành một hàm mới.

Tôi hiện đang sử dụng tính năng chặn HTML này để tạo các mẫu chỉnh sửa hàng, chân trang, v.v. - nó hoạt động độc đáo!