0

Trabajo en un proyecto ASP.NET MVC, Entity Framework. Lo que intento hacer es dar de alta a un registro desde una vista parcial popup.

A la vista parcial la llamo desde el index en el cual tengo una tabla muestro código.

HTML: Tengo implementado el popup al final del Index en el cual tengo implementado el botón guardar el cual debe persistir los datos la DB, en el html muestro el javascript donde intento comunicarme con el botón Guardar y enviar la información a la db.

@model IEnumerable<KR.AplicacionWeb.Models.ClienteViewModel>

@{
    ViewBag.Title = "Cliente";
}

<h3>Cliente</h3>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

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

<link href="~/Content/DataTables/css/datatables.min.css" rel="stylesheet" />
<script src="~/Scripts/DataTables/datatables.min.js"></script>
</head>

<body>
    <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" id="btnCreate" 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>ClienteId</td>
                            <td>Razón Social</td>
                            <td>Número documento</td>
                            <td>Dirección</td>
                            <td>Fijo</td>
                            <td>Email</td>
                            <td>Estado</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>
                        @foreach (var row in Model)
                        {
                            <tr>
                                <td>@row.ClienteId</td>
                                <td>@row.RazonSocial</td>
                                <td>@row.NumeroDocumento</td>
                                <td>@row.Direccion</td>
                                <td>@row.Fijo</td>
                                <td>@row.Email</td>
                                <td>@row.Estado</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 type="text/javascript" language="javascript">
    $(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"
                }
            }
        });
    });

    //$(document).ready(function () {
    //    $('#proveedores').DataTable({
    //        "ajax": "data/objects.txt",
    //        "columns": [
    //            { "data": "ClienteId" },
    //            { "data": "RazonSocial" },
    //            { "data": "NumeroDocumento" },
    //            { "data": "Direccion" },
    //            { "data": "Fijo" },
    //            { "data": "Email" },
    //            { "data": "Estado" }
    //        ]
    //    });
    //});

    $(document).ready(function () {
        $('#proveedores').DataTable();
    });

    function llamarVistaParcial() {
        $.ajax({
            cache: false,
            async: true,
            type: "GET",
            url: '@Url.Action("CreatePV", "Cliente")',
            data: {},
            success: function (response) {
                //$('#resultado').html('');
                $('#resultado').empty().html(response);
                $("#myModal").modal('show');
            }
        });
        //$("#myModal").modal('show');
    };

        $('form').submit(function (e) {
            e.preventDefault();
            //$('#message').empty();
            var $form = $(this);
            if ($form.valid()) {
                $.ajax({
                    url: '@Url.Action("CreatePV", "Cliente")',
                    type: this.method,
                    data: $(this).serialize(),
                    cache: false,
                    success: function (result) {
                        if (result.guardado) {

                        }
                    },
                    error: function (result) {
                    }
                });
            }
        });


    </script>
</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">Cliente</h5>
                </div>
                <div class="modal-body">
                    <div id="resultado"></div>
                </div>
                <div class="modal-footer">
                    <button id="btnCreate" type="submit" class="btn btn-primary">Guardar</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>

CONTROLLER

namespace KR.AplicacionWeb.Controllers
{
    public class ClienteController : Controller
    {
        MapperConfiguration config;
        private ISaCliente clienteService;

        public ClienteController(ISaCliente _clienteService)
        {
        clienteService = _clienteService;
    }

    // GET: Cliente
    public ActionResult Index()
    {
        List<Cliente> _cliente = clienteService.GetAll().ToList();
        config = new MapperConfiguration(cfg => cfg.CreateMap<Cliente, ClienteViewModel>());
        List<ClienteViewModel> list = config.CreateMapper().Map<List<ClienteViewModel>>(_cliente);
        return View(list);
    }

    // GET: 
    public ActionResult CreatePV()
    {
        var model = new ClienteViewModel();
        return PartialView(model);
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create(ClienteViewModel entity)
    {
        try
        {
            if (ModelState.IsValid)
            {
                config = new MapperConfiguration(cfg => cfg.CreateMap<ClienteViewModel, Cliente>());
                var cliente = config.CreateMapper().Map<Cliente>(entity);
                clienteService.Create(cliente);
            }
            return PartialView("CreatePV", entity);
        }
        catch (Exception)
        {
            return PartialView("CreatePV");
        }
    }
}

}

El problema concreto es como debo hacer para persistir mis datos de la vista parcial popup. Necesito hacerlo con JQuery o JavaScript

2
  • Hermano, ¿Lograste hacerlo funcionar?
    – fredyfx
    Commented el 1 dic. 2017 a las 17:16
  • @fredyfx Si mi hermano, gracias por el interés voy a retomar ese proyecto de practica. Commented el 4 dic. 2017 a las 15:37

1 respuesta 1

1

El problema concreto es como debo hacer para persistir mis datos de la vista parcial popup.

De la misma manera en que persistes datos de un formulario o usando AJAX.

Necesito hacerlo con JQuery o JavaScript

jQuery es igual a JavaScript, así que siempre estarás usando JavaScript. Según veo estás usando jQuery, así que te pondré un ejemplo usando esta librería.


Una vez cargada la vista parcial en la modal (popup tiene otro significado), solo necesitas enviar los datos que ingresas allí hacia el backend. Por ejemplo:

$.ajax({
  url: '@Url.Action("Create", "Cliente")',
  type: 'POST',
  data: $('#form').serialize()
})
.done(function (response) {
  // ok
});

Hay distintas formas de enviar datos hacia el backend por AJAX, las más usadas:

  • JSON
  • Form Data

En el código de arriba, se usa jQuery#serialize para serializar un formulario de modo que se cree un string clave/valor, en pocas palabras, una URL con query params, para que pueda ser transportado en la petición. El otro método es agregar manualmente los campos a un objeto para enviarlo como JSON:

Nota: es necesario que los controles (inputs, selects, etc.) tengan el atributo name definido.

var data = {
  nombre: $('#name').val()
  ... // lo mismo con cada control
};

$.ajax({
  type: 'POST',
  url: '@Url.Action("Create", "Cliente")',
  data: data
})
.done(function (response) {
  // ok
});

En C# obtendrás lo que has enviado en la petición en ClienteViewModel.

8
  • El id #form donde esta en el HTML? Commented el 18 mar. 2017 a las 18:03
  • @PedroÁvila Pues en el form: <form id="loquesea">...</form>.
    – gugadev
    Commented el 18 mar. 2017 a las 18:04
  • @using (Html.BeginForm("CreatePV", "Cliente", "POST")) el id va en esa linea? Commented el 19 mar. 2017 a las 2:53
  • Sería así? @using (Html.BeginForm("CreatePV", "Cliente", FormMethod.Post, new {id="form"})) Commented el 19 mar. 2017 a las 3:21
  • Estoy usando la primera opcion y no funciona Commented el 19 mar. 2017 a las 4:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.