如何将值从 Telerik mvc ajax 网格传递到控制器

Question

我有 2 个 Telerik mvc ajax 网格，需要根据第一个网格上的选定行进行填充。

下面是我的代码：

@(Html.Telerik().Grid<PurchaseRequest>()
   .Name("grdPurchaseRequest")
   .DataBinding(binding => binding.Ajax()
     .Select("GetPurchaseRequests", "PurchaseOrder"))
   .DataKeys(keys => keys
    .Add(o => o.PurchaseRequestID))
  .Columns(cols =>
  {
    cols.Bound(c => c.PurchaseRequestID).ReadOnly().Hidden();
    cols.ForeignKey(c => c.ProjectID,(System.Collections.IEnumerable)ViewData["prProjects"],
               "ProjectID", "ProjectName");
    cols.Bound(c => c.FullName);
    cols.Bound(c => c.RequestDate).Format("{0:MM/dd/yyyy}");
    cols.Bound(c => c.Remarks);
    cols.Bound(c => c.CheckedBy);
    cols.Bound(c => c.ApprovedBy);
  })
  .ClientEvents(clientEvents => clientEvents.OnRowSelect("onRowSelected"))
  .RowAction(row =>
  {
    row.Selected = row.DataItem.PurchaseRequestID.Equals(ViewData["id"]);
  })
  .Pageable()
  .Sortable()
  .Filterable()
  .Selectable()

)

====第二个网格=====

这是将根据第一个网格上的选定记录填充的第二个网格

 @(Html.Telerik().Grid<PurchaseRequestDetail>().HtmlAttributes(new { style = "width: 50%"   })
 .Name("grdDetails")    
 .DataKeys(keys => keys
    .Add(o => o.PurchaseRequestDetailID)
    .RouteKey("PurchaseRequestDetailID"))
 .Columns(cols =>
 {
    cols.ForeignKey(c => c.ItemID, (System.Collections.IEnumerable)ViewData["prItems"],
                    "ItemID", "ItemName").Width(200).Title("Description");
    cols.Bound(d => d.ItemQuantity).Width(100).Title("Quantity");
    cols.Bound(d => d.ItemValue).Width(100).Title("Value per quantity").Format("Php  {0:###,###.00}");
    cols.Bound(d => d.TotalPrice).Width(500).Format("Php {0:###,###.00}")
        .Aggregate(aggs => aggs.Sum())
        .ClientFooterTemplate("Php <#= $.telerik.formatString('{0:n}', Sum) #>");
})    
 .DataBinding(binding => binding.Ajax()
    .Select("GetPurchaseRequestDetails", "PurchaseOrder", new { purchaseRequestID = "<#= PurchaseRequestID #>" }))
 .ClientEvents(clientEvents => clientEvents.OnDataBinding("onDataBinding"))
 .Pageable()
 .Sortable()

)

脚本代码

<script type="text/javascript">
  var purchaseRequestID;
  var purchaseRequestName;
  function onRowSelected(e) {
    var detailsGrid = $('#grdDetails').data('tGrid');
    purchaseRequestID = e.row.cells[0].innerHTML;
    purchaseRequestName = e.row.cells[1].innerHTML;
    // update ui text
    $('#purchaseRequestName').text(purchaseRequestName);
    // rebind the related grid
    //alert(purchaseRequestID);
    //location.href = "/PurchaseOrder/Index/" + purchaseRequestID;
    detailsGrid.rebind();
}
function onDataBinding(e) {
    e.data = $.extend(e.data, { purchaseRequestID: purchaseRequestID });
}

以下是控制器中的代码：

[HttpPost]
public ActionResult Create(PurchaseOrder purchaseorder)
    {
       if (ModelState.IsValid)
       {
           HERE, I WANT TO BE ABLE TO GET AND SAVE THE SELECTED ROW IN THE VIEW
           //purchaseorder.PurchaseRequestID = ViewBag.SelectedID;
           db.PurchaseOrders.Add(purchaseorder);
           db.SaveChanges();
           return RedirectToAction("Index");
        }

        ViewBag.SupplierID = new SelectList(db.Suppliers, "SupplierID", "Name", purchaseorder.SupplierID);
        ViewBag.OfficeID = new SelectList(db.Offices, "OfficeID", "OfficeName", purchaseorder.OfficeID);
        return View(purchaseorder);
    }

谢谢

Answer 1

如果你们中的一些人可能遇到同样的问题， 我使用 HiddenFor 来解决这个问题。请建议您是否有比这更好的方法。

@Html.HiddenFor(model => model.PurchaseRequestID)

and then i updated the script

<script type="text/javascript">
var purchaseRequestID;
var purchaseRequestName;
function onRowSelected(e) {
    var detailsGrid = $('#grdDetails').data('tGrid');
    purchaseRequestID = e.row.cells[0].innerHTML;
    purchaseRequestName = e.row.cells[1].innerHTML;
    // update ui text
    $('#purchaseRequestName').text(purchaseRequestName);
    $('#PurchaseRequestID').val(purchaseRequestID);
    detailsGrid.rebind();
}
function onDataBinding(e) {
    e.data = $.extend(e.data, { purchaseRequestID: purchaseRequestID });
}