綁定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); 
     } 
    } 
});