如何使用 PartialView 在 ASP.Net MVC 上的 webgrid 中绑定数据答案

【问题标题】：How to use PartialView to bind Data in webgrid on ASP.Net MVC如何使用 PartialView 在 ASP.Net MVC 上的 webgrid 中绑定数据
【发布时间】：2013-10-05 11:50:32
【问题描述】：

我有一个 DropDownlist 和 Webgrid。当我加载页面所有绑定的数据时，我需要根据 DropDownlist 的变化在 Webgrid 中绑定数据。我该怎么做。

我的代码是：

Script:

它将调用控制器函数

<script type="text/javascript">
    $(document).ready(function () {
         $("#Cust_Id").change(function () {
          firstDDLValue = $("#Cust_Id").val();    
          $.post(
            '@Url.Action("SelectCustomerByID", "Admin")', 
            { 
                secondValue: firstDDLValue 
            }, 
            function (ReceiptList) {
           });
        });
    });
</script>

Controller Code:

public ActionResult SelectCustomerByID(Receipt model,string secondValue)
{
    int CustID = 0;
    if (secondValue != "")
    {
        CustID = Convert.ToInt32(secondValue);
    }
    ObservableCollection<Receipt> ReceiptList = new ObservableCollection<Receipt>();
    Receipt Receipt = new Models.Receipt();
    model.ReceiptList = Receipt.GetReceiptListByCustID(CustID);
    return View(model.ReceiptList);
}

【问题讨论】：

标签： c# javascript asp.net-mvc json asp.net-mvc-4

【解决方案1】：

您应该在操作中返回PartialView：

return PartialView(model.ReceiptList);

这仅适用于您有一个名为SelectCustomerByID 的视图。如果您有另一个名称的视图，您可以在重载中指定：

return PartialView("_NameOfPartialView", model.ReceiptList);

然后在$.post()的success函数中：

function (ReceiptList) {
    // ReceiptList will contain the html of the grid.
    $('#id-of-datagrid').html(ReceiptList);
}

注意：我认为您必须从SelectCustomerByID 中删除Receipt model 参数。

【讨论】：

先生，我尝试为 WEBGRID 设置 ID，但无法在其中设置 id..如何为 WEBGRID 设置 ID..
@PraveenS 将 web-grid 包装在一个 div 中，id 为：<div id="web-grid"></div>。然后你可以使用$('#web-grid')。
@PraveenS ReceiptList 返回什么？
ReceiptList 具有数据库值，但它没有返回到查看页面，这是一个问题先生
这就是我的意思。

【解决方案2】：

我找到了答案我刚刚修改了我的Script 并使用ParitalView 在网格中绑定数据我的解决方案代码是：

Script

<script type="text/javascript">
 $(document).ready(function () {
 $("#Cust_Id").change(function () {
 firstDDLValue = $("#Cust_Id").val();
 $.get('@Url.Action("SelectCustomerByID", "Admin")', { secondValue: firstDDLValue }, function (ReceiptList) {
  $('#gridContent').html(ReceiptList);
    });
  });
 });
</script>

我创建新的 _Recepitgrid.cshtml 为 PartialView 并将 Webgrid 的代码编写为与主视图中的相同。

Controller

public ActionResult SelectCustomerByID(Receipt model, string secondValue)
{
 int CustID = 0;
 if (secondValue != "")
 CustID = Convert.ToInt32(secondValue);
 ObservableCollection<Receipt> ReceiptList = new ObservableCollection<Receipt>();
 Receipt Receipt = new Models.Receipt();
 ReceiptList = Receipt.GetReceiptListByCustID(CustID);
 return PartialView("_Recepitgrid", ReceiptList);
}

现在它可以正常工作了..

【讨论】：