c# - 如何在 ASP.net MVC4 的 webgird 中绑定(bind) JSON 返回结果值

Question

我想使用 Json 在 webgrid 中绑定(bind) Datatable 值。我使用 DropDownlist 选择依赖于我想在 webgrid 中绑定(bind)它的那些名字的人的名字。现在我使用了一些代码但无法在网格中绑定(bind)数据。

我的代码是:

查看

<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("Cheque_Date", "Cheque_Date", format: item => ((item.Cheque_Date == null) ? "" : item.Cheque_Date.ToString("dd/MM/yyyy")), style: "name"),
                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>

脚本:

<script type="text/javascript">
        $(document).ready(function () {

            $("#Cust_Id").change(function () {
                firstDDLValue = $("#Cust_Id").val();
               // alert(firstDDLValue);
                $.post('@Url.Action("SelectCustomerByID", "Admin")', { secondValue: firstDDLValue }, function (ReceiptList) {
                   alert(firstDDLValue);
                        var grdPipeline = $find("#grid");
                        grdPipeline.set_dataSource(ReceiptList);
                        grdPipeline._pi.show(grdPipeline);
                        grdPipeline.applyClientBinding();
                        grdPipeline._pi.hide(grdPipeline);
                        alert(firstDDLValue);
                    $("#ItemName").text(Data);
                });
            });

        });
    </script>

控制:

public JsonResult SelectCustomerByID(string secondValue)
            {
                Receipt Recepit = new Receipt();
                int CustID = 0;
                if (secondValue != "")
                    CustID = Convert.ToInt32(secondValue);
                ObservableCollection<Receipt> ReceiptList = new ObservableCollection<Receipt>();
                ReceiptList = Recepit.GetReceiptListByCustID(CustID);
                return Json(ReceiptList, JsonRequestBehavior.AllowGet);
            }

型号:

public ObservableCollection<Receipt> GetReceiptListByCustID(int CustID)
    {
        ObservableCollection<Receipt> ReceiptList = new ObservableCollection<Receipt>();
        DataTable dtReceipt = new DataTable();

        DbParameter[] objParams = new DbParameter[1];
        objParams[0] = objDAL.CreateParameter("@REC_Cust_ID", DbType.Int32, CustID);
        dtReceipt = objDAL.ExecuteTable(CommandType.StoredProcedure, "[sp_Receipt_Select_ByCustID]",objParams);

        foreach (DataRow dr in dtReceipt.Rows)
        {
            ReceiptList.Add(new Receipt
            {
                Id = Convert.ToInt32(dr["REC_Id_I"]),
                Cust_Name = dr["CUS_Name_V"].ToString(),
                Pay_Amount = dr["REC_PaidAmount_M"].ToString(),
                Pay_Mode = dr["REC_PayMode_C"].ToString(),
                Bank_Name = dr["REC_BankName_V"].ToString(),
                Bank_Address = dr["REC_BankAddress"].ToString(),
                ChequeNo = dr["REC_ChequeNo_V"].ToString(),
                Cheque_Date = dr["REC_ChequeDate_D"].ToString(),
                Date = Convert.ToDateTime(dr["REC_Date_D"].ToString()),

            });
        }
        return ReceiptList;
    }

Answer 1

您可以使用 PartialView 来绑定(bind) Web 网格中的数据，我使用了这段代码:

脚本:

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

Controller :

`public ActionResult SelectCustomerByID(Receipt model, string secondValue)
        {
            //Receipt Recepit = new Receipt();
            int CustID = 0;
            if (secondValue != "")
            CustID = Convert.ToInt32(secondValue);
                ObservableCollection<Receipt> ReceiptList = new ObservableCollection<Receipt>();
                Receipt Receipt = new Models.Receipt();
            if(CustID!=0)
                ReceiptList = Receipt.GetReceiptListByCustID(CustID);
            else
                ReceiptList = Receipt.GetReceiptList();

                ViewData["Count"] = ReceiptList.Count;
                return PartialView("_Recepitgrid", ReceiptList);


        }