Record data from a Partial View (popup)

2

I work with ASP.NET MVC 5, I have a partial view which when I press the Save button should persist the data in the db and go to the Index but it is not registering the data. I show code.

CONTROLLER

public ActionResult CreatePV()
    {
        var documento = SdProveedor.Lista();
        ViewBag.ListaDocumento = new SelectList(documento, "Id", "Descripcion");

        var model = new ProveedorDto();
        return PartialView(model);
    }

    // POST: Proveedor/Create
    [HttpPost]
    public ActionResult Create(ProveedorDto entity)
    {
        try
        {
            if (ModelState.IsValid)
            {
                //var documento = SdProveedor.Lista();
                //ViewBag.ListaDocumento = new SelectList(documento, "Id", "Descripcion");

                SdProveedor.Create(entity);
                return RedirectToAction("Index");
            }
            else
                return View(entity);
        }
        catch
        {
            return View(entity);
        }
    }

VIEW INDEX

<div id="myModal" class="modal fade in">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header" style="background-color: #337ab7;border-color:#2e6da4;color:#fff;">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h5 class="modal-title">Proveedor</h5>
        </div>
        <div class="modal-body">
            <div id="resultado"></div>
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-primary">Guardar</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
        </div>
    </div>
    </div>

PARTIAL VIEW

@model Demo.ServiciosDominio.Dtos.ProveedorDto

@using (Html.BeginForm()) 
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
    @*<h4>Proveedor</h4>
    <hr />*@
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
        <div class="col-md-5 text-right">
            @Html.LabelFor(model => model.RazonSocial, htmlAttributes: new { @class = "control-label" })
        </div>

        <div class="col-md-7 text-right">
            @Html.EditorFor(model => model.RazonSocial, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.RazonSocial, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-5 text-right">
            @Html.LabelFor(model => model.DocumentoIdentidad, htmlAttributes: new { @class = "control-label" })
        </div>

        <div class="col-md-7 text-right">
            @Html.EnumDropDownListFor(x => x.DocumentoIdentidad, "<<SELECCIONE>>", new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.DocumentoIdentidad, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-5 text-right">
            @Html.LabelFor(model => model.NumeroDocumento, htmlAttributes: new { @class = "control-label" })
        </div>

        <div class="col-md-7 text-right">
            @Html.EditorFor(model => model.NumeroDocumento, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.NumeroDocumento, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-5 text-right">
            @Html.LabelFor(model => model.Direccion, htmlAttributes: new { @class = "control-label" })
        </div>

        <div class="col-md-7 text-right">
            @Html.EditorFor(model => model.Direccion, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Direccion, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-5 text-right">
            @Html.LabelFor(model => model.Telefono, htmlAttributes: new { @class = "control-label" })
        </div>

        <div class="col-md-7 text-right">
            @Html.EditorFor(model => model.Telefono, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Telefono, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-5 text-right">
            @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label" })
        </div>

        <div class="col-md-7 text-right">
            @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
        </div>
    </div>

    @*<div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Guardar" class="btn btn-default" />
                <input type="button" value="Cerrar" class="btn btn-default" />
            </div>
        </div>*@
    </div>
    }

GENERATED HTML

    <html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Proveedor - My ASP.NET Application</title>
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/modernizr-2.6.2.js"></script>

    <script src="/scripts/jquery-3.1.1.min.js"></script>
    <script src="/Scripts/bootstrap.min.js"></script>
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/Home">Application name</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                </ul>
            </div>
        </div>
    </div>

    <div class="container body-content">


<h3>Proveedor</h3>


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <link href="/Content/datatables.min.css" rel="stylesheet" />



    <script src="/scripts/botonFlotanteDespegable.js"></script>
    <link href="/Content/css/botonFlotante.css" rel="stylesheet" />



</head>
<body>


    <br />
    <br />
    <div class="contenedor">
        <button class="botonF1">
            <span class="glyphicon glyphicon-pencil"></span>
        </button>

        <button class="botonFlotante botonF4">
            <span class="glyphicon glyphicon-download-alt span.glyphicon"></span>
        </button>
        <button class="botonFlotante botonF5" onclick="llamarVistaParcial();" data-toggle="modal" data-target="#myModal">
            <span class="glyphicon glyphicon-plus"></span>
        </button>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <table id="proveedores" class="table table-hover display">
                <thead style="background-color:#337ab7;border-color:#2e6da4;color:#fff;">
                    <tr>
                        <td>ProveedorId</td>
                        <td>Razón Social</td>
                        <td>Número documento</td>
                        <td>Dirección</td>
                        <td>Teléfono</td>
                        <td><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></td>
                        <td><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td>
                    </tr>
                </thead>


                <tbody>
                        <tr>
                            <td>1</td>
                            <td>COMERCIAL PEPITA</td>
                            <td>10617044</td>
                            <td>MI CASA</td>
                            <td>25454547</td>
                            <td><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></td>
                            <td><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>LA FABRICA</td>
                            <td>45645</td>
                            <td>BABAHOYO</td>
                            <td>45612</td>
                            <td><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></td>
                            <td><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>dfsdfsdfsdf</td>
                            <td>3434343</td>
                            <td></td>
                            <td></td>
                            <td><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></td>
                            <td><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>PEDRO &#193;VILA N&#218;&#209;EZ</td>
                            <td>10617044</td>
                            <td>MI CASA</td>
                            <td></td>
                            <td><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></td>
                            <td><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td>
                        </tr>
                        <tr>
                            <td>5</td>
                            <td>HOLA</td>
                            <td>123456</td>
                            <td></td>
                            <td></td>
                            <td><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></td>
                            <td><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td>
                        </tr>
                        <tr>
                            <td>6</td>
                            <td>HOLA 2</td>
                            <td>00000</td>
                            <td>XXXXX</td>
                            <td>3333</td>
                            <td><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></td>
                            <td><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td>
                        </tr>
                        <tr>
                            <td>7</td>
                            <td>HOLA 3</td>
                            <td>111</td>
                            <td>BABAHOYO</td>
                            <td>333</td>
                            <td><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></td>
                            <td><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td>
                        </tr>
                        <tr>
                            <td>8</td>
                            <td>GDGDFGDFG</td>
                            <td>DFGDFG</td>
                            <td>DFGDFGD</td>
                            <td></td>
                            <td><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></td>
                            <td><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td>
                        </tr>
                        <tr>
                            <td>9</td>
                            <td>DESIGE</td>
                            <td>00125452</td>
                            <td>FDGDFGFDG53453</td>
                            <td>DFGDFG</td>
                            <td><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></td>
                            <td><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td>
                        </tr>
                        <tr>
                            <td>10</td>
                            <td>dfFDFD</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></td>
                            <td><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td>
                        </tr>
                        <tr>
                            <td>11</td>
                            <td>fdsfsf</td>
                            <td>5454545</td>
                            <td></td>
                            <td></td>
                            <td><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></td>
                            <td><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td>
                        </tr>
                        <tr>
                            <td>12</td>
                            <td>PRUEBA ER</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></td>
                            <td><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td>
                        </tr>
                        <tr>
                            <td>13</td>
                            <td>dfGDFG</td>
                            <td>5454</td>
                            <td>RTE</td>
                            <td></td>
                            <td><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></td>
                            <td><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td>
                        </tr>
                        <tr>
                            <td>14</td>
                            <td>flaco</td>
                            <td>4545454</td>
                            <td>mi casa</td>
                            <td>444</td>
                            <td><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></td>
                            <td><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td>
                        </tr>
                        <tr>
                            <td>15</td>
                            <td>dfdfd</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></td>
                            <td><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td>
                        </tr>
                        <tr>
                            <td>16</td>
                            <td>babahoyo</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></td>
                            <td><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td>
                        </tr>
                        <tr>
                            <td>17</td>
                            <td>fgfdgdfgdfgdgfdgffgf</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></td>
                            <td><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td>
                        </tr>
                        <tr>
                            <td>18</td>
                            <td>hghghgg</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></td>
                            <td><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td>
                        </tr>
                        <tr>
                            <td>19</td>
                            <td>FUNKO</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></td>
                            <td><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td>
                        </tr>
                        <tr>
                            <td>20</td>
                            <td>LESCANO</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></td>
                            <td><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td>
                        </tr>
                        <tr>
                            <td>21</td>
                            <td>YOL FASHION</td>
                            <td>4578545</td>
                            <td>FGDGFDG</td>
                            <td>5656</td>
                            <td><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></td>
                            <td><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td>
                        </tr>
                        <tr>
                            <td>22</td>
                            <td>SDSA</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></td>
                            <td><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td>
                        </tr>
                </tbody>
            </table>
        </div>
    </div>





            <script src="/scripts/datatables.min.js"></script>

            <script>
                $(document).ready(function () {

                    $("#proveedores").DataTable({
                        "language": {
                            "sProcessing": "Procesando...",
                            "sLengthMenu": "Mostrar _MENU_ registros",
                            "sZeroRecords": "No se encontraron resultados",
                            "sEmptyTable": "Ningún dato disponible en esta tabla",
                            "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                            "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
                            "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
                            "sInfoPostFix": "",
                            "sSearch": "Buscar:",
                            "sUrl": "",
                            "sInfoThousands": ",",
                            "sLoadingRecords": "Cargando...",
                            "oPaginate": {
                                "sFirst": "Primero",
                                "sLast": "Último",
                                "sNext": "Siguiente",
                                "sPrevious": "Anterior"
                            },
                            "oAria": {
                                "sSortAscending": ": Activar para ordenar la columna de manera ascendente",
                                "sSortDescending": ": Activar para ordenar la columna de manera descendente"
                            }
                        }
                    });
                });


                //$('#btnF2').on('click', function(e){
                //    alert('your are click me');
                //});
            </script>
            <script>
                function llamarVistaParcial() {
                    var laURLDeLaVista = '/Proveedor/CreatePV';
                    $.ajax({
                        cache: false,
                        async: true,
                        type: "GET",
                        url: laURLDeLaVista,
                        data: {},
                        success: function (response) {
                            //$('#resultado').html('');
                            $('#resultado').html(response);
                            $("#myModal").modal('show');
                        }
                    });
                    //$("#myModal").modal('show');
                };
            </script>




<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Chrome","requestId":"1e767ad044ff4fd8a95e31aa6c8a2046"}
</script>
<script type="text/javascript" src="http://localhost:13758/465bd761a53b4c66824603acd0acf201/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>
<div id="myModal" class="modal fade in">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #337ab7;border-color:#2e6da4;color:#fff;">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h5 class="modal-title">Proveedor</h5>
            </div>
            <div class="modal-body">
                <div id="resultado"></div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Guardar</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
            </div>
        </div>
        </div>
</div>







        <hr />
        <footer>
            <p>&copy; 2017 - My ASP.NET Application</p>
        </footer>
    </div>



</body>
</html>
    
asked by Pedro Ávila 23.02.2017 в 20:07
source

1 answer

1

As far as I can understand with the code that you are showing, when you open the modal window all the content of the partial view you are putting it in

<div id="resultado"></div>

If this is correct, the error is that the submit button that you use to save is outside the form .

I recommend that you remove the comment to the buttons that you have inside the partial view, very surely with these if it will work.

Now, if you want to keep the buttons in the footer as you are designing, you must change the location of the form

INDEX

 @using (Html.BeginForm("Create","NombreDelControlador")) 
    {
    @Html.AntiForgeryToken()
    <div id="myModal" class="modal fade in">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #337ab7;border-color:#2e6da4;color:#fff;">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h5 class="modal-title">Proveedor</h5>
            </div>
            <div class="modal-body">
                <div id="resultado"></div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Guardar</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
            </div>
        </div>
        </div>
    }

so that the whole modal window covers you and your partial view should look like this,

PARTIAL VIEW

<div class="form-horizontal">
    @*<h4>Proveedor</h4>
    <hr />*@
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
        <div class="col-md-5 text-right">
            @Html.LabelFor(model => model.RazonSocial, htmlAttributes: new { @class = "control-label" })
        </div>

        <div class="col-md-7 text-right">
            @Html.EditorFor(model => model.RazonSocial, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.RazonSocial, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-5 text-right">
            @Html.LabelFor(model => model.DocumentoIdentidad, htmlAttributes: new { @class = "control-label" })
        </div>

        <div class="col-md-7 text-right">
            @Html.EnumDropDownListFor(x => x.DocumentoIdentidad, "<<SELECCIONE>>", new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.DocumentoIdentidad, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-5 text-right">
            @Html.LabelFor(model => model.NumeroDocumento, htmlAttributes: new { @class = "control-label" })
        </div>

        <div class="col-md-7 text-right">
            @Html.EditorFor(model => model.NumeroDocumento, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.NumeroDocumento, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-5 text-right">
            @Html.LabelFor(model => model.Direccion, htmlAttributes: new { @class = "control-label" })
        </div>

        <div class="col-md-7 text-right">
            @Html.EditorFor(model => model.Direccion, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Direccion, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-5 text-right">
            @Html.LabelFor(model => model.Telefono, htmlAttributes: new { @class = "control-label" })
        </div>

        <div class="col-md-7 text-right">
            @Html.EditorFor(model => model.Telefono, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Telefono, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-5 text-right">
            @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label" })
        </div>

        <div class="col-md-7 text-right">
            @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
        </div>
    </div>

    @*<div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Guardar" class="btn btn-default" />
                <input type="button" value="Cerrar" class="btn btn-default" />
            </div>
        </div>*@
    </div>
    
answered by 23.02.2017 / 20:20
source