Soy un novato en MVC3 y la navaja de Afeitar y necesito ayuda sobre la unión/la carga de un WebGrid una vez que los datos se devuelven desde AJAX post. Cualquier ayuda sería muy apreciada (proyecto fecha de vencimiento se aproxima rápidamente) 😉

Mi escenario es el siguiente: tengo dos en cascada listas desplegables. La primera lista contiene las regiones de la base de datos. Una vez que se selecciona una región llena el segundo desplegable con una lista de las instalaciones. Una vez que una instalación está seleccionado necesito rellenar un WebGrid con una lista de los edificios. Tengo la cascada de los menus desplegables de funcionar correctamente

Índice.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>

Aquí está mi Llamada 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);
        }

    }
}
);

Mi 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 me hizo pensar en cambios, pero no estoy viendo nada en la pantalla. No me da ningún error, ya sea. Caminé a través del código y me confirmó que el Modelo de objeto en la vista de 12 de mi costumbre de construcción de modelo de objetos.

Aquí está mi 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. 
    }
}

Cosa interesante es que cuando hago ver código fuente en el navegador veo que «no Hay edificios en este centro.», pero es que no se muestran en la pantalla y el Modelo tiene mi costumbre objetos cuando entré a través del código en el depurador.

  • Yo sugeriría usar un jQuery grid o alguna otra red que ya se «juega bonito» con JavaScript Unión. A continuación, utilice un MVC Acción para proporcionar los datos. Si que tiene sentido para que usted me puede dar un ejemplo de código
  • Puede usted por favor proporcione un ejemplo de código? Además, esto se ve como un plugin de 3 ª parte. Es ese derecho? Yo soy incapaz de usar la 3ª parte de software en esta aplicación debido a los requisitos de negocio.
  • incluso de código abierto? jquery grid está contenida en un libre JS lib?
  • La creación de una cuadrícula javascript como este sin la asistencia de marcos o herramientas es el «trabajo pesado» para un equipo de desarrolladores. usted debe abandonar la idea de un javascript actualizado de la red si usted no puede usar ninguna parte 3 librerías JS
  • Ok, puedo renunciar a esta idea, pero no se sabe de ningún otro por lo que para hacer lo que estoy tratando de lograr? Necesito tener la región desplegable rellenar un segundo instalaciones desplegable. Una instalación puede no tener edificios o tantos como 100. Todavía me gustaría mostrar los edificios en una cuadrícula.
  • el uso de jquery grid – voy a dar un ejemplo de código

InformationsquelleAutor Que | 2012-07-05

1 Comentario

  1. 7

    Usted podría poner la WebGrid en un parcial:

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

    Y dentro de _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.
        }
    }   

    Y ahora en el interior de su controlador de acción en caso de éxito devuelve este parcial:

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

    y en su llamada AJAX simplemente actualizar:

    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);
            }
        }
    });
    • Hice los cambios sugeridos, pero no estoy viendo nada en la pantalla. No me da ningún error, ya sea. Caminé a través del código y me confirmó que el Modelo de objeto en la vista de 12 de mi costumbre de construcción de modelo de objetos.
    • Probablemente pestañas-2 no es la pestaña activa y no es visible en el momento. Intentar depurar el código para asegurarse de que el returndata variable contiene el código HTML correcto parcial en el éxito de devolución de llamada.
    • Gracias por lo que hizo el truco. Mi returndata no era devolver el HTML de la Vista Parcial. Una vez que he corregido que todo funcionaba correctamente.
    • Dimitrov he implementado su solución funciona, pero ahora el tipo no trabaja, se le redirige a GetFacilityDetails con atributos de ordenación y falla.
    • estaba leyendo tu anterior post. aquí no pase de modelo a la vista parcial. mira esta línea ` @Html.Parcial(«_Buildings»)` cuéntame cómo vista parcial _Buildings.cshtml obtendrá el modelo de datos para rellenar ? en el código escenario, se asume que ambas principal y vista parcial de la estancia en la misma carpeta ?
    • si no especifica un modelo al rendir un parcial, entonces el parcial tendrá su modelo poblada de la vista principal. Así que si la vista desde el que se usa la Html.Partial helper es inflexible a IEnumerable<MyProject.Models.BuildingModel>, a continuación, el _Buildings.cshtml parcial tendrán este mismo modelo se pasan automáticamente. Y sí, yo supuse que el parcial es en la misma carpeta que la vista principal, de lo contrario podrías especificar explícitamente la vista parcial ubicación a la hora de renderizar.
    • usted dijo yes, I assumed that the partial is in the same folder as the main view, otherwise you could explicitly specify the partial view location cuando mantenemos vista parcial es en la carpeta compartida, a continuación, modelo será pasar de los principales y parciales, de forma automática?
    • no importa donde el parcial se encuentra. Si no especifica un modelo como segundo parámetro cuando se utiliza el Html.Parcial ayudante, entonces el modelo de la vista principal será pasado.

Dejar respuesta

Please enter your comment!
Please enter your name here