如何在ASP.net MVC中的Webgrid usig PartialView中綁定數據

Question

我是.Net MVC的新手。 我需要使用PartialView()將數據綁定到webgrid返回中，或者如果可以使用JSON返回，現在我的代碼將在Dropdown更改時執行，但不會綁定Web網格中的值。

JavaScript，模型，控制器代碼如下所示：

腳本

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

        });
    </script>

視圖：

<div id="divgrid" style="margin-top: 15px;">
 @{
 var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5, selectionFieldName: "selectedRow", ajaxUpdateContainerId: "gridContent");
grid.Pager(WebGridPagerModes.NextPrevious);}
 <div id="gridContent">
            @grid.GetHtml(
                tableStyle: "webgrid-table",
                headerStyle: "webgrid-header",
                footerStyle: "webgrid-footer",
                alternatingRowStyle: "webgrid-alternating-row",
                selectedRowStyle: "webgrid-selected-row",
                rowStyle: "webgrid-row-style",
                columns: grid.Columns(
                grid.Column("Id", "ID", style: "id"),
                grid.Column("Cust_Name", "Cust Name", style: "PName"),
                grid.Column("Pay_Amount", "Pay_Amount", style: "ICode"),
                grid.Column("Pay_Mode", "Pay_Mode", style: "IName"),
                grid.Column("Bank_Name", "Bank_Name", style: "Weight"),
                grid.Column("Bank_Address", " Bank_Address", style: "MakingCharge"),
                grid.Column("ChequeNo", "ChequeNo", style: "Certification"),
                grid.Column("Cheque_Date", " Cheque_Date", style: "Price"),
                grid.Column("Date", "Date", style: "Price"),
                grid.Column("Edit", "", @<a href='../Admin/EditReceipt?id=@item.ID' ><img src="~/Images/edit.png" alt='Edit' /></a>, style: "width:10%"),
                grid.Column(header: "Delete", format: @<text><a href="@Url.Action("DeleteReceipt", "Admin", new { Id = item.ID })" onclick="javascript:return confirm('Are you sure you'd like to delete this product?');"><img src="../Images/delete.png" alt='Delete' /></a></text>) ))
 @if (grid.HasSelection)
        {
             Receipt = (JewellaryWeb.Models.Receipt)grid.Rows[grid.SelectedIndex].Value;
                                <b>Id</b> @Receipt.Id<br />
                                <b>Name</b> @Receipt.Cust_Name<br />
                                <b>Amount</b> @Receipt.Pay_Amount<br />
                                <b>PayMode</b> @Receipt.Pay_Mode<br />
                                <b>BankName</b> @Receipt.Bank_Name<br />
                                <b>BankAddress</b> @Receipt.Bank_Address<br />
                                <b>ChequeNumber</b> @Receipt.ChequeNo<br />
                                <b>ChequeDate</b> @Receipt.Cheque_Date<br />
        }
</div>

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();
          model.ReceiptList = Receipt.GetReceiptListByCustID(CustID);
          return PartialView(model.ReceiptList);
        }

Answer 1

我找到了答案，我剛剛修改了腳本並使用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);
}

現在它將正常工作..