绑定WebGrid表单AJAX

Question

我是MVC3和Razor的新手，从AJAX post中返回数据后，我需要绑定/加载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. 
    } 
} 

是，当我做我看到“有没有建筑物在这个工厂。”在浏览器中查看源代码，但它没有被显示在屏幕上

有趣的事情当我在调试器中遍历代码时，模型确实具有我的自定义对象。

Answer 1

你可以把的WebGrid到部分：

@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. 
    } 
} 

现在你的控制器动作里面成功的情况下返回此部分：

[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); 
     } 
    } 
});