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 quickly approaching) ;)

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

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>

Here's my AJAX Call

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

    }
}
);

My controller:

[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 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.

Here's my 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. 
    }
}

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.

I would suggest using a jQuery grid or some other grid that already "plays nice" with JavaScript Binding. Then use an MVC Action to provide the data. If that makes sense for you I can provide a code sample — Glenn Ferrie, Jul 05 '12 at 20:13
Can you please provide a code sample? Also, this looks like a 3rd party plugin. Is that right? I'm unable to use any 3rd party software in this application due to business requirements. — GamerDev, Jul 05 '12 at 20:56
even open source? jquery grid is contained in a free JS lib? — Glenn Ferrie, Jul 05 '12 at 23:12
Creating a javascript grid like this without the assistance of frameworks or tools is "heavy lifting" for a team of developers. you should abandon the idea of a javascript updated grid if you cannot use any 3rd part JS libraries — Glenn Ferrie, Jul 05 '12 at 23:14
Ok, I can give up on this idea, but do you know of any other why to do what I'm trying to accomplish? I need to have the region drop down populate a second facilities drop down. A facility can have no buildings or as many as 100. I would still like to display the buildings in a grid. — GamerDev, Jul 05 '12 at 23:25

score 7 · Accepted Answer · answered Jul 06 '12 at 05:44

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

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. — GamerDev, Jul 06 '12 at 15:35
Probably tabs-2 is not the active tab and is not visible at the moment. Try debugging your code to ensure that the `returndata` variable contains the correct HTML partial in the success callback. — Darin Dimitrov, Jul 06 '12 at 16:40
Thanks that did the trick. My returndata was not returning the HTML from the Partial View. Once I corrected that everything worked correctly. — GamerDev, Jul 06 '12 at 20:05
@Darin Dimitrov I implemented your solution, it works, but now the sort doesnt work, it redirects to GetFacilityDetails with sort attributes and fails. — user3770158, Dec 23 '14 at 06:03
@DarinDimitrov i was reading your old post. here you did not pass model to partial view. look at this line ` @Html.Partial("_Buildings")` tell me how partial view _Buildings.cshtml will get the model data to populate ? in your code scenario you assumed that both main and partial view stay in same folder ? — Thomas, Dec 24 '15 at 10:13
@Thomas, if you don't explicitly specify a model when rendering a partial, then the partial will have its model populated from the main view. So if the view from which you used the `Html.Partial` helper is strongly typed to `IEnumerable` then the `_Buildings.cshtml` partial will have this same model passed automatically. And yes, I assumed that the partial is in the same folder as the main view, otherwise you could explicitly specify the partial view location when rendering it. — Darin Dimitrov, Dec 24 '15 at 12:19
@DarinDimitrov you said `yes, I assumed that the partial is in the same folder as the main view, otherwise you could explicitly specify the partial view location ` when we keep partial view is in shared folder then model will be pass from main to partial automatically? — Thomas, Dec 24 '15 at 13:05
@Thomas, it doesn't matter where the partial is located. If you don't explicitly specify a model as second parameter when using the Html.Partial helper, then the model from the main view will be passed. — Darin Dimitrov, Dec 24 '15 at 16:08

Bind WebGrid form AJAX

1 Answers1

Linked