Sou novato no MVC3 e no Razor e preciso de ajuda para vincular / carregar um WebGrid quando os dados forem retornados do post do AJAX. Qualquer ajuda seria realmente apreciada (data de vencimento do projeto se aproximando rapidamente);)

Meu cenário é este: eu tenho duas listas suspensas em cascata. A primeira lista contém as regiões do banco de dados. Quando uma região é selecionada, ela preenche a segunda lista suspensa com uma lista de instalações. Quando um recurso é selecionado, preciso preencher um WebGrid com uma lista de construções. Eu tenho as listas suspensas em cascata funcionando corretamente

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>

Aqui está minha chamada 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);
        }

    }
}
);

Meu controlador:

[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 Eu fiz alterações sugeridas, mas não vejo nada exibido na tela. Eu também não recebo nenhum erro. Eu percorri o código e confirmei que o objeto Model na exibição tinha 12 dos meus objetos personalizados de 'modelo de construção'.

Aqui está o meu 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. 
    }
}

Coisa interessante é quando eu faço uma fonte de visualização no navegador que vejo "Não há edifícios neste recurso.", Mas ele não está sendo exibido na tela e o modelo tem meus objetos personalizados quando eu percorri o código no depurador .