如何在 ASP.net MVC4 上的 webgird 中绑定 JSON 返回结果值

Posted 2023-04-12

【中文标题】如何在 ASP.net MVC4 上的 webgird 中绑定 JSON 返回结果值

【英文标题】：How to Bind JSON return result value in webgird on ASP.net MVC4

【发布时间】：2013-10-12 07:28:31

【问题描述】：

我想使用 Json 在 webgrid 中绑定 Datatable 值。我使用DropDownlist 来选择人名，这取决于我想在webgrid.Now 中绑定的那些名称我使用了一些代码，但无法在网格中绑定数据。

我的代码是：

查看

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

【参考方案1】：

你可以使用PartialView绑定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>

控制器：

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