none
Cargar WebGrid con la selección de otro WebGrid RRS feed

  • Pregunta

  • Buenas tardes y gracias de antemano.

    Estoy con un pequeño problema (seguramente debido a mi poca esperiencia en MVC 4 con Razor).

    Mi cuestión es que tengo un webgrid en una vista y cuando seleccionan un row de ese webgrid hago una llamada Ajax, tendría que aparecer al lado otro webgrid con los resultados.

    La vista principal sería:

    @Html.Partial("gridSuscription")
    
    @Html.Partial("gridTables")
    
    Siendo las vistas igules pero con distinto modelo:
    <div class="tables" id="table-left">
        @grid.GetHtml(
                columns: grid.Columns(
                grid.Column("NombreSuscripcion", header: "Suscripción"),
                grid.Column("ServidorOrigen", header: "Servidor Origen"),
                grid.Column("ServidorDestino", header: "Servidor Destino"),
                grid.Column(format: @<input type="checkbox" name="editar" onchange="GetComments()" />)
                         ))
    </div>
    El controller sería:
     if (Request.IsAjaxRequest())
                {
                    return PartialView("gridTables", GetTables());
                }
                else 
                {
                    return View("gridSuscription", GetSubscription());
                }

    Y el código que uso de Ajax (mediante javascript) es:

    function GetComments() { $.ajax({ type: 'POST', url: '/CDC/Index/GetComments',//<--pagina web service etc donde esta el codigo servidor data: "{'Text':'" + "comment" + "','idParent':" + "parentID" + "}",//parametros contentType: "application/json; charset=utf-8", dataType: 'json', success: function (xhr, status) { if (xhr.d.status == 'OK') { //xhr.d <-- objeto con la info //codigo a ejecutar despues de recibido } else { //codigo cargando } }, error: function (xhr, status, error) { //codigo en error //var err = JSON.parse(xhr.responseText); } }); }

    Se ejecuta la PartialView cuando es una petición Ajax pero en mi vista no se muestra el nuevo grid (el grid de la derecha).

    Podrían orientarme o decirme por qué no se muestra el segundo grid??

    Muchas gracias!!

    domingo, 28 de septiembre de 2014 17:01

Todas las respuestas

  • >>Se ejecuta la PartialView cuando es una petición Ajax pero en mi vista no se muestra el nuevo grid (el grid de la derecha

    pero no veo donde inyectas el html de la partial view

    o sea deberias tener un <div> donde pongas el html de la partialview

    y en el $.ajax usarias la repsuesta

    success: function (data) {

    $("#divtabla").html(data);

    },

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    domingo, 28 de septiembre de 2014 18:56
  • Buenas tardes Leandro y muchas gracias por contestar.

    Comento más detalladamente, pido perdón de ante mano, en una de mis vistas (la principal) tengo esto:

    @model  List<MVC.Models.CFG_SUSCRIPCION>
    @{
        WebGrid grid = new WebGrid(Model, canPage: false, fieldNamePrefix: "wgSuscription");
    }
    
    <div class="tables" id="table-left">
        @grid.GetHtml(
                columns: grid.Columns(
                grid.Column("NombreSuscripcion", header: "Suscripción"),
                grid.Column("ServidorOrigen", header: "Servidor Origen"),
                grid.Column("ServidorDestino", header: "Servidor Destino"),
                grid.Column(format: @<input type="checkbox" name="editar" onchange="Prueba()" />)
                         ))
    </div>
    
    <div id="result">
    </div>

    En mi vista parcial tengo:

    @model List<MVC.Models.CFG_SUSCRIPCIONTABLAS>
    <div class="tables">
        @{
            <span>Número de tablas: @Model.Count()</span>
            WebGrid gridTables = new WebGrid(Model, canPage: false, fieldNamePrefix: "wbTable", ajaxUpdateContainerId: "result");
            gridTables.GetHtml(
                    columns: gridTables.Columns(
                    gridTables.Column("NombreTablaOri", header: "Tabla Origen"),
                    gridTables.Column("NombreTablaDst", header: "Tabla Destino"),
                    gridTables.Column(format: @<input type="checkbox" name="editar" onchange="GetComments()" />)
                     ));
        }
    </div>

    En mi fichero javascript:

    function Prueba() {
        $.ajax({
            //url: this.action,
            url:'Home/Index/',
            type: this.method,
            data: $(this).serialize(),
            success: function (result) {
                $('#result').html(result);
            }
        });
    }

    Y en mi controller:

    public ActionResult Index()
            {
                if (Request.IsAjaxRequest())
                {
                    return PartialView("gridTables", GetTables());
                }
                else 
                {
                    return View("gridSuscription", GetSubscription());
                }
            }

    Y cuando selecciono un check, como salta la función prueba() me hace todo bien (o eso parece...) pero justo a la hora de mostrar, en el controller me hace la diferencia bien pero no me muestra el grid, sí me muestra el número de tablas con el <span> que tengo, pero el grid de las tablas no :(

    Puede ser que el control WebGrid, el propio que viene con el framework, no lo pueda utilizar de esa forma??

    Muchas gracias de ante mano.

    domingo, 28 de septiembre de 2014 20:52
  • hola

    si pones un breakpoint en el action Index() puede validar que pasa por alli al invocarse desde el $.ajax ?

    algo que no entiendo es porque no le pones nombres representativos a los metodos

    que significa GetTables() ? aqui

    return PartialView("gridTables", GetTables());

    estas devolviendo o invocando que view ? es la primera o la segundo que mencionas

    porque una defines de modelo CFG_SUSCRIPCION y la otra  CFG_SUSCRIPCIONTABLAS son los mismo ambas son suscripcion

    la verdad las view, modelos y metodos que defines estan bastante confusos

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    domingo, 28 de septiembre de 2014 21:44
  • Buenas noches.

    Reconozco que los nombres no son muy representativos, pero es para hacer una prueba simple, de echo GetTables() en:

    • return PartialView("gridTables", GetTables());

    Lo que hace o pretendo hacer, es devolver la vista parcial llamada "gridTables" y paso el resultado del método GetTables() que lo único que hace es obtener un listado de datos, como digo, es para probarlo, no le estoy pasando ningún parámetro, símplemente quiero ver que recarga el grid cuando selecciono algo en el primer grid.

    Si pongo un breakpoint en el index, veo que entra en la rama de la petición de Ajax y realiza las operaciones, de echo, en la vista parcial, tengo puesto una etiqueta <span> donde pongo el total de lo que me traigo de BBDD y si me lo muestra; incluso puedo depurar por la vista parcial.

    Lo único que no consigo hacer es que se muestre el grid de las tablas a la par del primer grid.

    Muchas gracias de antemano.

    domingo, 28 de septiembre de 2014 22:27