title: Bind WebGrid form AJAX
body: <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) ;)</p>
  
  <p>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 </p>
  
  <p>Index.cshtml:</p>
  
  <pre><code>@using ThisController = MyProject.Controllers.BuildingModelsController
  @model IEnumerable&lt;MyProject.Models.BuildingModel&gt;
  
  &lt;div id="tabs-2"&gt;
      &lt;!-- Current Buildings --&gt;
      @{ 
          if (Model != null &amp;&amp; Model.Count() &gt; 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) =&gt; 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.
          }
       }   
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's my AJAX Call</p>
  
  <pre><code>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);
          }
  
      }
  }
  );
  </code></pre>
  
  <p>My controller:</p>
  
  <pre><code>[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&lt;BuildingModel&gt;;
  
          return Json(new { ok = true, data = facility, message = "ok" });
      }
      catch (Exception ex)
      {
          return Json(new { ok = false, message = ex.Message });
      }
  }
  </code></pre>
  
  <p>@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.  </p>
  
  <p>Here's my PartialView:</p>
  
  <pre><code>@model IEnumerable&lt;COPSPlanningWeb.Models.BuildingModel&gt;
  @{ 
      if (Model != null &amp;&amp; Model.Count() &gt; 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. 
      }
  }
  </code></pre>
  
  <p>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.</p>