如何在 ASP.net MVC4 上的 webgird 中绑定 JSON 返回结果值
本文关键字:绑定 JSON 返回 结果 webgird 上的 ASP net MVC4 | 更新日期: 2023-09-27 18:33:56
我想使用 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;
}
您可以使用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);
}