绑定的WebGrid AJAX形式 [英] Bind WebGrid form AJAX
问题描述
我是一个新手，MVC3和剃刀，我需要绑定/加载的WebGrid一旦数据从AJAX后返回的帮助。任何帮助真的会pciated（项目截止日期迅速接近）AP $ P $;）
I'm a newbie to MVC3 and Razor and I need help on binding/loading a WebGrid once data is returned from AJAX post. Any help would really be appreciated (project due date quickly approaching) ;)
我的情况是这样的：我有两个级联下拉列表。所述第一列表包含从数据库中的区域。一旦一个区域被选中填充第二个下拉与设施清单。一旦一个设备被选择我需要填充的WebGrid与建筑物的列表。我有正常工作的级联下拉菜单
My scenario is this: I have two cascading drop down lists. The first list contains the regions from the database. Once a region is selected it populates the second drop down with a list of facilities. Once a facility is selected I need to populate a WebGrid with a list of buildings. I have the cascading drop downs working correctly
Index.cshtml：
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调用
Here's my AJAX Call
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我给你建议的修改，但我没有看到屏幕上显示的任何东西。我没有得到任何错误，无论是。我经历了code踩，我证实，在视图的模型对象我的自定义建筑模型对象12。
@Darin I made you suggested changes, but I'm not seeing anything displayed on the screen. I don't get any errors either. I stepped through the code and I confirmed that the Model object in the view has 12 of my custom 'building model' objects.
下面是我的PartialView：
Here's my 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.
}
}
有趣的是，当我做我看到浏览器中查看源文件有没有建筑物在这个工厂。，但它没有被显示在屏幕上和模型确实有我的自定义对象时，我通过$加强C $ c。在调试器。
Interesting thing is when I do a view source in the browser I see "There are no buildings at this facility.", but it's not being displayed on the screen and the Model does have my custom objects when I stepped through the code in the debugger.
推荐答案
您可以把进入的WebGrid部分：
You could put the WebGrid into a partial:
@using ThisController = MyProject.Controllers.BuildingModelsController
@model IEnumerable<MyProject.Models.BuildingModel>
<div id="tabs-2">
@Html.Partial("_Buildings")
</div>
和里面的 _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.
}
}
和现在成功的情况下你的控制器动作内返回此部分：
And now inside your controller action in case of success return this partial:
[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调用只需刷新：
and in your AJAX call simply refresh:
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);
}
}
});
这篇关于绑定的WebGrid AJAX形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
