绑定 WebGrid 表单 AJAX [英] Bind WebGrid form AJAX

问题描述

我是 MVC3 和 Razor 的新手，一旦从 AJAX 帖子返回数据，我需要有关绑定/加载 WebGrid 的帮助.任何帮助都将不胜感激(项目到期日即将到来);)

我的情况是这样的:我有两个级联下拉列表.第一个列表包含数据库中的区域.选择一个区域后，它会在第二个下拉列表中填充设施列表.选择设施后，我需要使用建筑物列表填充 WebGrid.我的级联下拉菜单正常工作

Index.cshtml:

@using ThisController = MyProject.Controllers.BuildingModelsController@model IEnumerable<div id="tabs-2"><!-- 当前建筑-->@{如果(模型！= 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: "显示",交替行样式:alt"，列: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: "SpaceAvail"),grid.Column("FixedAssetValue", header: "Fixed Asset Value"),grid.Column("FixedEquipValue", header: "Fixed Equipment Value")));}别的{@:这个设施没有建筑物.}}

这是我的 AJAX 调用

var regId = $("#ddlRegion").val();var facId = $("#ddlFacility").val();$.ajax({类型:POST"，url: '@Url.Action("GetFacilityDetails")',数据:{ regionId:regId，facId:facId }，成功:函数(返回数据){如果(返回数据.确定){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({ 禁用: [] });//需要在这里填充webgrid}别的 {window.alert(' 错误:' + returndata.message);}}});

我的控制器:

[HttpPost]public ActionResult GetFacilityDetails(int regionId, string factoryId){尝试{//ViewBag.Buildings = buildingVM.GetFacilityBuildings(regionId, factoryId);var 设施 = buildingVM.GetFacilityDetails(regionId, factoryId);factory.Buildings = buildingVM.GetFacilityBuildings(regionId, factoryId) as List;返回 Json(new { ok = true, 数据 = 设施, 消息 = "ok" });}捕获(异常前){返回 Json(new { ok = false, message = ex.Message });}}

@Darin 我为您提出了更改建议，但我没有看到屏幕上显示任何内容.我也没有收到任何错误.我逐步完成了代码，并确认视图中的 Model 对象有 12 个我自定义的建筑模型"对象.

这是我的部分视图:

@model IEnumerable@{如果(模型！= 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: "显示",交替行样式:alt"，列:grid.Columns(grid.Column("BuildingNumber"),grid.Column("施工日期"),grid.Column("ExtSquareFeet"),grid.Column("IntSquareFeet"),grid.Column("IU_Avail"),grid.Column("SpaceAvail"),grid.Column("FixedAssetValue"),grid.Column("FixedEquipValue")));}别的{@:这个设施没有建筑物.}}

有趣的是，当我在浏览器中查看源代码时，我看到此设施中没有建筑物."，但它没有显示在屏幕上，而且当我逐步执行代码时，模型确实有我的自定义对象在调试器中.

解决方案

您可以将 WebGrid 放入部分:

@using ThisController = MyProject.Controllers.BuildingModelsController@model IEnumerable<div id="tabs-2">@Html.Partial("_Buildings")

在_Buildings.cshtml里面:

@{如果(模型！= 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: "显示",交替行样式:alt"，列: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: "SpaceAvail"),grid.Column("FixedAssetValue", header: "Fixed Asset Value"),grid.Column("FixedEquipValue", header: "Fixed Equipment Value")));}别的{@:这个设施没有建筑物.}}

现在在你的控制器操作中如果成功返回这个部分:

[HttpPost]public ActionResult GetFacilityDetails(int regionId, string factoryId){尝试{var 设施 = buildingVM.GetFacilityDetails(regionId, factoryId);factory.Buildings = buildingVM.GetFacilityBuildings(regionId, factoryId) as List;返回 PartialView("_Buildings", factory.Buildings);}捕获(异常前){返回 Json(new { ok = false, message = ex.Message });}}

并且在您的 AJAX 调用中只需刷新:

var regId = $("#ddlRegion").val();var facId = $("#ddlFacility").val();$.ajax({类型:POST"，url: '@Url.Action("GetFacilityDetails")',数据:{ regionId:regId，facId:facId }，成功:函数(返回数据){如果(！returndata.ok){window.alert(' 错误:' + returndata.message);} 别的 {$('#tabs').tabs({ 禁用: [] });$('#tabs-2').html(returndata);}}});

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.

解决方案

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

这篇关于绑定 WebGrid 表单 AJAX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！