Bind WebGrid form AJAX

Question

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 qui

Answer 1

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>

And inside _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 });
    }
}

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