我是MVC3和Razor的新手,一旦从AJAX发布返回数据,就需要绑定/加载WebGrid的帮助。任何帮助将不胜感激(项目截止日期很快临近);)
我的情况是这样的:我有两个级联的下拉列表。第一个列表包含数据库中的区域。选择区域后,它将在第二个下拉列表中填充一系列设施。选择设施后,我需要使用建筑物列表填充WebGrid。我的级联下拉菜单正常工作
Index.cshtml:
@using ThisController = MyProject.Controllers.BuildingModelsController @model IEnumerable<MyProject.Models.BuildingModel> <div id="tabs-2"> <!-- Current Buildings --> @{ if (Model != null && Model.Count() > 0) { var grid = new WebGrid(source: Model, rowsPerPage: ThisController.PageSize, ajaxUpdateContainerId: "tabs-2", defaultSort: "BuildingNumber"); grid.Bind(Model, rowCount: Model.Count(), autoSortAndPage: false); grid.Pager(WebGridPagerModes.All); grid.GetHtml( tableStyle: "display", alternatingRowStyle: "alt", columns: grid.Columns( //grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { EmployeeID = item.EmployeeID, ContactID = item.ContactID })), grid.Column("BuildingNumber", header: "Building Number"), grid.Column("ConstructionDate", header: "Construction Date"), grid.Column("ExtSquareFeet", header: "Exterior Sq. Ft."), grid.Column("IntSquareFeet", header: "Interior Sq. Ft."), grid.Column("IU_Avail", header: "IU Available"), grid.Column("SpaceAvail", header: "Space Available"), grid.Column("FixedAssetValue", header: "Fixed Asset Value"), grid.Column("FixedEquipValue", header: "Fixed Equipment Value") )); } else { @:There are no buildings at this facility. } } </div>
这是我的AJAX电话
var regId = $("#ddlRegion").val(); var facId = $("#ddlFacility").val(); $.ajax({ type: "POST", url: '@Url.Action("GetFacilityDetails")', data: { regionId: regId, facilityId: facId }, success: function (returndata) { if (returndata.ok) { var itemData = returndata.data; var address = itemData.Address + " " + itemData.City + " " + itemData.State + " " + itemData.Zip; $("#lblFacilityType").html(itemData.FacilityType); $("#lblFacilityPurpose").html(itemData.FacilityPurpose); $("#lblFacilityStatus").html(itemData.FacilityStatus); $("#lblFacilityAddress").html(address); $("#tabs").tabs({ disabled: [] }); //need to populate webgrid here } else { window.alert(' error : ' + returndata.message); } } } );
我的控制器:
[HttpPost] public ActionResult GetFacilityDetails(int regionId, string facilityId) { try { //ViewBag.Buildings = buildingsVM.GetFacilityBuildings(regionId, facilityId); var facility = buildingsVM.GetFacilityDetails(regionId, facilityId); facility.Buildings = buildingsVM.GetFacilityBuildings(regionId, facilityId) as List<BuildingModel>; return Json(new { ok = true, data = facility, message = "ok" }); } catch (Exception ex) { return Json(new { ok = false, message = ex.Message }); } }
@Darin我已建议您进行更改,但屏幕上未显示任何内容。我也没有任何错误。我逐步检查了代码,并确认视图中的Model对象具有12个自定义的“建筑模型”对象。
这是我的PartialView:
@model IEnumerable<COPSPlanningWeb.Models.BuildingModel> @{ if (Model != null && Model.Count() > 0) { var grid = new WebGrid(rowsPerPage: 50, defaultSort: "BuildingNumber", ajaxUpdateContainerId: "tabs-2"); grid.Bind(Model, rowCount: Model.Count(), autoSortAndPage: false); grid.Pager(WebGridPagerModes.All); grid.GetHtml( tableStyle: "display", alternatingRowStyle: "alt", columns: grid.Columns( grid.Column("BuildingNumber"), grid.Column("ConstructionDate"), grid.Column("ExtSquareFeet"), grid.Column("IntSquareFeet"), grid.Column("IU_Avail"), grid.Column("SpaceAvail"), grid.Column("FixedAssetValue"), grid.Column("FixedEquipValue") )); } else { @:There are no buildings at this facility. } }
有趣的是,当我在浏览器中执行视图源时,我看到“此设施没有建筑物。”,但是它没有显示在屏幕上,并且当我在调试器中逐步执行代码时,模型确实具有我的自定义对象。 。
您可以将WebGrid分为部分:
@using ThisController = MyProject.Controllers.BuildingModelsController @model IEnumerable<MyProject.Models.BuildingModel> <div id="tabs-2"> @Html.Partial("_Buildings") </div>
里面_Buildings.cshtml:
_Buildings.cshtml
<!-- Current Buildings --> @{ if (Model != null && Model.Count() > 0) { var grid = new WebGrid(source: Model, rowsPerPage: ThisController.PageSize, ajaxUpdateContainerId: "tabs-2", defaultSort: "BuildingNumber"); grid.Bind(Model, rowCount: Model.Count(), autoSortAndPage: false); grid.Pager(WebGridPagerModes.All); grid.GetHtml( tableStyle: "display", alternatingRowStyle: "alt", columns: grid.Columns( grid.Column("BuildingNumber", header: "Building Number"), grid.Column("ConstructionDate", header: "Construction Date"), grid.Column("ExtSquareFeet", header: "Exterior Sq. Ft."), grid.Column("IntSquareFeet", header: "Interior Sq. Ft."), grid.Column("IU_Avail", header: "IU Available"), grid.Column("SpaceAvail", header: "Space Available"), grid.Column("FixedAssetValue", header: "Fixed Asset Value"), grid.Column("FixedEquipValue", header: "Fixed Equipment Value") ) ); } else { @:There are no buildings at this facility. } }
现在,在成功的情况下,在控制器操作中返回以下部分:
[HttpPost] public ActionResult GetFacilityDetails(int regionId, string facilityId) { try { var facility = buildingsVM.GetFacilityDetails(regionId, facilityId); facility.Buildings = buildingsVM.GetFacilityBuildings(regionId, facilityId) as List<BuildingModel>; return PartialView("_Buildings", facility.Buildings); } catch (Exception ex) { return Json(new { ok = false, message = ex.Message }); } }
在您的AJAX调用中只需刷新:
var regId = $("#ddlRegion").val(); var facId = $("#ddlFacility").val(); $.ajax({ type: "POST", url: '@Url.Action("GetFacilityDetails")', data: { regionId: regId, facilityId: facId }, success: function (returndata) { if (!returndata.ok) { window.alert(' error : ' + returndata.message); } else { $('#tabs').tabs({ disabled: [] }); $('#tabs-2').html(returndata); } } });