I work in an ASP.NET MVC project, Entity Framework. What I'm trying to do is register a record from a partial popup view.
In partial view I call it from the index in which I have a table with our code.
HTML: I have implemented the popup at the end of the Index in which I have implemented the save button which should persist the data in the DB, in the html I show the javascript where I try to communicate with the Save button and send the information to the 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");
}
}
}
}
The concrete problem is how I should do to persist my data from the partial popup view. I need to do it with JQuery or JavaScript