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">×</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