none
MVC 3 busqueda con webgrid y ingreso de nuevo usuario con ajax RRS feed

  • Pregunta

  • Tengo una vista:

     

    @model Infoquality.PSMS.Presentation.Web.MVC.Client.Models.ViewModels.IssueSearchViewModel

    @{
        ViewBag.Title ="Buscar publicación";
        Layout = "~/Views/Shared/_Layout.cshtml";    
    }
    @{
        var grid = new WebGrid(Model.getListado(),columnNames: new []{"IssueId","CommercialNumber","CommercialDate"}, rowsPerPage:10,canPage:true,canSort:false, ajaxUpdateContainerId: "grid");
        }


    <h2>Busqueda de publicaciones</h2
    <fieldset>
    <legend>Criterios de Búsqueda</legend>
        <div class="editor-label">Revista</div>
        <div>
           @* @Html.DropDownListFor(model =>model.IssueId,Model.Magazines)*@
        </div>
        <div class="editor-label">Número de publicación:</div>
        <div>
            @Html.TextBoxFor(model =>model.CommercialNumber)
        </div>
        <div class="editor-label">Fecha:</div
        <div>
            @Html.EditorFor(model=>model.CommercialDate)
        </div>
        <br/>
            <button type="submit">Buscar</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
           
            <button id ="add-issue" name="add-issue"  onclick ="">Nuevo</button>
            
    </fieldset>
    @grid.GetHtml(
        firstText: "<< Primera",
        previousText: "< Anterior",
        nextText: "Siguiente >",
        lastText: "Última >>",
        columns: new [] {
            grid.Column("IssueId",header: "Issue"),
            grid.Column("CommercialNumber",header:"Número comercial"),
            grid.Column("CommercialDate", header :"Fecha comercial" ),
            grid.Column("", header: "Acciones",
                        format: @<text>
                                    @Html.ActionLink("Editar",   "Edit",   new { id = item.IssueId} )
                                    |
                                    @Html.ActionLink("Eliminar""Delete"new { id = item.IssueId })
                                </text>
            )      
           
    })

    ahora lo que quiero es que en el boton nuevo se me llame una nueva vista parcial 
    <div id="dialog"><div>

    la vista parcial es de un modelo diferente al modelo de la busqueda de esta forma:

    @model Infoquality.PSMS.Presentation.Web.MVC.Client.Models.IssueModel


    @using (Ajax.BeginForm("FormName""IssueCreate""Issue"new AjaxOptions { UpdateTargetId= "dialog"}))
    {
         <table width="100%">
            <tr align="center">
                <td>         
                    <table >
                        <tr>
                            <td colspan="2">&nbsp;</td>
                        </tr>
                        <tr>
                            <td>
                                @Html.LabelFor(model => model.ProductId)
                            </td>
                            <td>
                               @* @Html.DropDownListFor(model => model.ProductId, Model.Products)*@                           
                            </td>
                            <td>
                                @Html.ValidationMessageFor(model => model.ProductId)
                            </td>    
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>                    
                        <tr>
                            <td>
                                @Html.LabelFor(model => model.PublicationNumber)                            
                            </td>
                            <td>
                                @Html.EditorFor(model => model.PublicationNumber)
                                
                            </td>
                            <td>
                                @Html.ValidationMessageFor(model => model.PublicationNumber)
                            </td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td>
                                @Html.LabelFor(model => model.Enable)             
                            </td>
                            <td>
                                <table>
                                    <tr>
                                        <td>
                                            @Html.RadioButton("EnableIssue""1"true)Habilitada
                                        </td>
                                        <td>
                                            @Html.RadioButton("EnableIssue""0")Deshabilitada
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td>
                                @Html.LabelFor(model => model.PublicationDate)                            
                            </td>
                            <td>                            
                                @Html.EditorFor(model => model.PublicationDate)
                            </td>
                            <td>
                                @Html.ValidationMessageFor(model => model.PublicationDate)
                            </td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td>
                                @Html.LabelFor(model => model.CommercialDate)
                            </td>
                            <td>
                                @Html.EditorFor(model => model.CommercialDate)
                            </td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td>
                                @Html.LabelFor(model => model.Descripcion) 
                            </td>
                            <td>
                                @Html.TextAreaFor(model => model.Descripcion)
                            </td>
                            <td>
                                @Html.ValidationMessageFor(model =>model.Descripcion)
                            </td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td>
                                @Html.Label("Seleccione un archivo")
                                
                            </td>
                            <td>
                                <input id="IssuePDFFile" type="file" name ="IssuePDFFile" />
                            </td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td>
                                @Html.Label("Seleccione el cover")
                            </td>
                            <td>
                                <input id="IssueCoverFile" type="file" name ="IssueCoverFile"/> 
                                
                            </td>
                        </tr>                       
                        
                    </table>
                </td>
            </tr>
            
        </table>
    }

    la pregunta es como dedo usar jquery para poder insertar mediante ajax esta nueva entidad en mi controller??

     

    Gracias por su ayuda


    Carlos García
    martes, 15 de febrero de 2011 23:47

Respuestas

  • La pregunta es como dedo usar jquery para poder insertar mediante ajax esta nueva entidad en mi controller??


    Si vas a usar jquery para insertar la vista parcial mediante ajax, entonces la inserción se produce en el lado cliente, luego no la "insertas" en el controller. Lo que haces en el lado cliente es llamar mediante ajax a una URL cualquiera, que típicamente será una llamada a un método de acción del controlador que quieras. Ese controlador, lo que hace es devolver tu vista parcial como si fuera una vista completa. Y en el lado cliente, el código que inició la llamada ajax toma esa vista y la inserta en el lugar que le hayas asignado, por ejemplo, en un <span>.

    Por ejemplo, si lo quieres hacer directamente con jQuery:

    <script type="text/javascript">
      $(document).ready(function () {
        $('#submit').click(function () {
          $("#resultado").load('@Url.Action("MiMetodo")');
        });
      });
    </script>
    

    Donde "MiMetodo" se encuentra dentro del mismo controlador y hace un Return View("VistaParcial", datos);. "resultado" es el id de un span donde se inserta el resultado devuelto por la vista parcial.

    Si en lugar de usar directamente jQuery prefieres usar uno de los "helpers" de Ajax, puedes usar esto:

    @Ajax.ActionLink("Titulo del botón", "MiMetodo", new AjaxOptions { UpdateTargetId = "resultado" })
    

    Pero no he conseguido averiguar por qué este método no va bien (te abre una ventana separada) si te dejas activado el Unobtrusive javascript. Funciona bien si pones antes HtmlHelper.UnobtrusiveJavaScriptEnabled=false.

     

    • Marcado como respuesta charlyGarcia1 miércoles, 16 de febrero de 2011 22:13
    miércoles, 16 de febrero de 2011 9:29

Todas las respuestas

  • La pregunta es como dedo usar jquery para poder insertar mediante ajax esta nueva entidad en mi controller??


    Si vas a usar jquery para insertar la vista parcial mediante ajax, entonces la inserción se produce en el lado cliente, luego no la "insertas" en el controller. Lo que haces en el lado cliente es llamar mediante ajax a una URL cualquiera, que típicamente será una llamada a un método de acción del controlador que quieras. Ese controlador, lo que hace es devolver tu vista parcial como si fuera una vista completa. Y en el lado cliente, el código que inició la llamada ajax toma esa vista y la inserta en el lugar que le hayas asignado, por ejemplo, en un <span>.

    Por ejemplo, si lo quieres hacer directamente con jQuery:

    <script type="text/javascript">
      $(document).ready(function () {
        $('#submit').click(function () {
          $("#resultado").load('@Url.Action("MiMetodo")');
        });
      });
    </script>
    

    Donde "MiMetodo" se encuentra dentro del mismo controlador y hace un Return View("VistaParcial", datos);. "resultado" es el id de un span donde se inserta el resultado devuelto por la vista parcial.

    Si en lugar de usar directamente jQuery prefieres usar uno de los "helpers" de Ajax, puedes usar esto:

    @Ajax.ActionLink("Titulo del botón", "MiMetodo", new AjaxOptions { UpdateTargetId = "resultado" })
    

    Pero no he conseguido averiguar por qué este método no va bien (te abre una ventana separada) si te dejas activado el Unobtrusive javascript. Funciona bien si pones antes HtmlHelper.UnobtrusiveJavaScriptEnabled=false.

     

    • Marcado como respuesta charlyGarcia1 miércoles, 16 de febrero de 2011 22:13
    miércoles, 16 de febrero de 2011 9:29
  • Gracias Alberto mira una de las soluciones al problema que tenia es la siguiente:

    @model MVC.Client.Models.ViewModels.IssueSearchViewModel

    @{
        ViewBag.Title ="Buscar publicación";
        Layout = "~/Views/Shared/_Layout.cshtml";    
    }
    @{
        var grid = new WebGrid(Model.getListado(),columnNames: new []{"IssueId","CommercialNumber","CommercialDate"}, rowsPerPage:10,canPage:true,canSort:false, ajaxUpdateContainerId: "grid");
        }

    <h2>Busqueda de publicaciones</h2
    <fieldset>
    <legend>Criterios de Búsqueda</legend>
        <div class="editor-label">Revista</div>
        <div>
           @* @Html.DropDownListFor(model =>model.IssueId,Model.Magazines)*@
        </div>
        <div class="editor-label">Número de publicación:</div>
        <div>
            @Html.TextBoxFor(model =>model.CommercialNumber)
        </div>
        <div class="editor-label">Fecha:</div
        <div>
            @Html.EditorFor(model=>model.CommercialDate)
        </div>
        <br/>
            <button type="submit">Buscar</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
           
            <button id ="show-dialog" name="show-dialog"  onclick ="">Nuevo</button>
            
    </fieldset>
    @grid.GetHtml(
        firstText: "<< Primera",
        previousText: "< Anterior",
        nextText: "Siguiente >",
        lastText: "Última >>",
        columns: new [] {
            grid.Column("IssueId",header: "Issue"),
            grid.Column("CommercialNumber",header:"Número comercial"),
            grid.Column("CommercialDate", header :"Fecha comercial" ),
            grid.Column("", header: "Acciones",
                        format: @<text>
                                    @Html.ActionLink("Editar",   "Edit",   new { id = item.IssueId} )
                                    |
                                    @Html.ActionLink("Eliminar""Delete"new { id = item.IssueId })
                                </text>
            )      
           
    })
    <script type="text/javascript">

        $(function () {
            $('#dialog-div').dialog({
                autoOpen: false,
                modal: true,
                height: 700,
                width: 600,
                open: function () {
                    $(this).load('@Url.Action("IssueCreate")'); aqui se llama a la accion de mi controller
    //               
                },
                buttons: {
                    'Aceptar'function () {
                        @{
                            if (ViewContext.ClientValidationEnabled)
                            {
                                <text>jQuery.validator.unobtrusive.parse('#form-create');</text>
                            }
                        }
                        if ($("#form-create").valid()) {
                            $.ajax({
                                type: "POST",
                                url: $("#form-create").attr('action'),
                                data: $("#form-create").serialize(),
                                dataType: "text/plain",
                                success: function (response) {
                                    $("#dialog-div").html(response);
                                    //$(this).dialog('close');
                                },
                                error: function (response) {
                                    alert(response);
                                    $("#dialog-div").dialog('close');
                                }
                            });
                        }
                    },
                    Cancel: function () {
                        $(this).dialog('close');
                    }
                }
            });
            $('#show-dialog').button().click(function () {
                $('#dialog-div').dialog('open');
            });
        });

    </script>

    <h2>Prueba</h2>

    Contenido fuera del diálogo

    <br />

    <div id='dialog-div'> Y en este div voy a mostrar el dialog que voy a cargar
        Contenido dentro del dialogo
    </div>
    Con esto cargaria la nueva vista parcial que necesito para guardar mis datos.

    Carlos García
    miércoles, 16 de febrero de 2011 22:22