Dar um Submit em um form Modal e retornar novamente para a mesma janela Modal - Asp.net MVC
Minha View Edit é aberta dentro de uma janela modal Bootstrap através de uma função dinâmica criada para os botões Create, Edit e Delete. Cada botão possui a sua respectiva url de referência e uma propriedade data-modal="" para ser chamada no evento click de cada botão (Ex: data-modal="" href="/pessoa-gerenciar/editar-pessoa/' + full.id). No evento click, é chamada a função "openmodal", a url é passada por parâmetro e a #modalGenerica é aberta. Há também a função "bindForm" que faz com que cada submit dado na view Edit funcione corretamente e que a view Edit permaneça sempre dentro da modal #modalGenerica.
Até aí tudo perfeito e funcionando corretamente!
//Bloco da Janela Modal
<div class="modal fade modal-primary" id="modalGenerica" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div id="contentModal">
</div>
</div>
</div>
</div>
//Controller
[HttpPost]
[Authorize(Policy = "CanWritePessoaData")]
[Route("pessoa-gerenciar/editar-pessoa/{id:int}")]
[ValidateAntiForgeryToken]
public IActionResult Edit(PessoaViewModel pessoaViewModel)
{
if ((pessoaViewModel.PessoaNatureza == Domain.ValueObjects.Pessoa.PessoaNatureza.Juridica && pessoaViewModel.PessoaJuridicaViewModel == null) || (pessoaViewModel.PessoaNatureza == Domain.ValueObjects.Pessoa.PessoaNatureza.Fisica && pessoaViewModel.PessoaFisicaViewModel == null))
{
var pessoa = _pessoaAppService.Change(pessoaViewModel);
ModelState.Clear();
return View(pessoa);
}
if (!ModelState.IsValid) return View(pessoaViewModel);
_pessoaAppService.Update(pessoaViewModel);
if (IsValidOperation())
ViewBag.Sucesso = "Pessoa Atualizada!";
return View(pessoaViewModel);
}
//JavaScript
$(document).ready(function () {
$.ajaxSetup({ cache: false });
// busca os elementos do atributo data-modal e os inscreve no evento click
$('a[data-modal]').on('click', function (e) {
// Abre a janela modal com o formulario solicitado
openmodal(this.href);
return false;
});
$('table').on('click', 'a[data-modal]', function (e) {
//Este tratamento personaliza a Modal Excluir
if (this.id == 'btnExcluir') {
$(".modal-dialog").addClass("modal-lg");
$(".modal-dialog").addClass("modal-danger");
}
openmodal(this.href);
return false;
});
$('#modalGenerica').on('hidden.bs.modal', function () {
$('#contentModal').html('');
});
dataTablePrincipalLoad();
});
function openmodal(url) {
// Faz uma requisição get e carrega o formulário na janela modal
$('#contentModal').load(url, function () {
$('#modalGenerica').modal({
keyboard: true
}, 'show');
//Enviar o foco para campo Descrição
$('#modalGenerica').on('shown.bs.modal', function (event) {
// $("#txtNomeCompleto").focus();
});
$("#pessoaNatureza").on('change', function (event) {
document.getElementById("frmEdit").submit();
//open(ur);
});
// Inscreve o evento submit
bindForm(this);
});
}
function bindForm(dialog) {
// Inscreve o formulário na janela modal com o evento submit
$('form', dialog).submit(function () {
if ($(this).valid()) {
// Realiza una requisição ajax
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
// Se a requisição for satisfatória, recarrega a página atual
if (result.success) {
window.location = window.location;
} else {
$('#contentModal').html(result);
bindForm();
}
}
});
return false;
} else {
return false;
}
});
}
function dataTablePrincipalLoad() {
$('.dataTables_filter input').attr('placeholder', 'Search...').hide();
var table = $("#dtPrincipal").DataTable({
"processing": true, // for show progress bar
"serverSide": true, // for process server side
"filter": true, // this is for disable filter (search box)
"orderMulti": false, // for disable multiple column at once
//"dom": '<"top"i>rt<"bottom"lp><"clear">',
// "ordering": false,
"ajax": {
"url": '/pessoa-gerenciar/getPessoa',
"type": "POST",
"datatype": "json"
},
"columnDefs": [
//Estilos Das Colunas
{ className: "align-center", "targets": [0] },
{ className: "align-center", "targets": [3] },
//Largura das Colunas
{ width: 100, targets: 0 },
{ width: 100, targets: 3 }
],
"columns": [
{ "data": "id", "name": "Id", "autoWidth": true },
{ "data": "nomeRazao", "name": "NomeRazao", "autoWidth": true },
{ "data": "apelidoFantasia", "name": "ApelidoFantasia", "autoWidth": true },
{
"render": function (data, type, full, meta) {
return '<div class="btn-group" aria-label="Button group with nested dropdown" role="group"><a id="btnEditar" data-modal="" href="/pessoa-gerenciar/editar-pessoa/' + full.id + '"class="btn btn-sm btn-icon btn-default btn-outline" title="Visualizar/Editar"><i class="icon wb-edit" aria-hidden="true"></i></a><a id="btnExcluir" data-modal="" href="/pessoa-gerenciar/remover-pessoa/' + full.id + '" class="btn btn-sm btn-icon btn-default btn-outline" title="Excluir"><i class="icon wb-trash" aria-hidden="true"></i></a><div class="btn-group" role="group"><a title="Mais Ações" class="btn btn-sm btn-outline btn-default dropdown-toggle" id="exampleGroupDrop2" data-toggle="dropdown" aria-expanded="false"><i class="icon wb-grid-4" aria-hidden="true"></i></a><div class="dropdown-menu" aria-labelledby="exampleGroupDrop2" role="menu"><a class="dropdown-item" href="javascript:void(0)" role="menuitem"><i class="icon wb-time" aria-hidden="true"></i>Histórico</a></div></div></div>';
}
}
],
"language": {
"sEmptyTable": "Nenhum registro encontrado",
"sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
"sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
"sInfoFiltered": "(Filtrados de _MAX_ registros)",
"sInfoPostFix": "",
"sInfoThousands": ".",
"sLengthMenu": "_MENU_ resultados por página",
"sLoadingRecords": "Carregando...",
"sProcessing": "Processando...",
"sZeroRecords": "Nenhum registro encontrado",
"sSearch": "Pesquisar",
"searchPlaceholder": "Digite algo...",
"oPaginate": {
"sNext": "Próximo",
"sPrevious": "Anterior",
"sFirst": "Primeiro",
"sLast": "Último"
},
"oAria": {
"sSortAscending": ": Ordenar colunas de forma ascendente",
"sSortDescending": ": Ordenar colunas de forma descendente"
}
}
});
$('.search-input').on('keyup change', function () {
var index = $(this).attr('data-column'),
val = $(this).val();
table.columns(index).search(val.trim()).draw();
});
}
//View Edit
@using Retaguarda.Domain.ValueObjects.Pessoa
@model Retaguarda.Application.ViewModels.Pessoa.PessoaViewModel
@{
ViewData["Title"] = "Editar Pessoa";
Layout = null;
}
<div>
<form asp-action="Edit" asp-controller="Pessoa" id="frmEdit">
@Html.AntiForgeryToken()
<div class="modal-shadow">
<div class="modal-header modal-header-primary">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title text-center"> @ViewData["Title"] </h4>
</div>
<div class="form-horizontal">
<você:summary />
<div class="panel-body">
@await Html.PartialAsync("_Pessoa")
@if (Model.PessoaNatureza == PessoaNatureza.Fisica)
{
<div id="divPessoaFisica">
@await Html.PartialAsync("_PessoaFisica")
</div>
}
else if (Model.PessoaNatureza == PessoaNatureza.Juridica)
{
<div id="divPessoaJuridica">
@await Html.PartialAsync("_PessoaJuridica")
</div>
}
</div>
</div>
<div class="modal-footer">
<div class="col-md-offset-2 col-md-10">
<button id="btnSalvar" type="submit" class="btn btn-primary"><i class="icon wb-check"></i> Salvar </button>
<button id="btnFechar" class="btn btn-danger" data-dismiss="modal"><i class="icon wb-close"></i> Fechar </button>
</div>
</div>
</div>
</form>
</div>
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
PROBLEMA:
Quando eu seleciono no dropdown #pessoaNatureza uma determinada pessoa (por exemplo pessoa jurídica), preciso fazer um submit no evento change para que a model seja alterada com dados de pessoa jurídica e preciso que a view Edit seja retornada para dentro da mesma janela modal, mas isso não está acontecendo e a view é aberta em uma página e com um layout desconfigurado. Parece que o bind não funcionada... (O Interessante é que para Salvar funciona perfeitamente, mas para o evento change do drop-down não!). Acho que estou tentando dar o submit com document.getElementById("frmEdit").submit(); e não está fazendo o bind corretamente, pois não passa pela função openmodal. Já tentei fazer isso, mas não consegui, pois teria que chamar a função de dentro dela... ALguém saberia como me ajudar?
$("#pessoaNatureza").on('change', function (event) {
document.getElementById("frmEdit").submit();
//open(ur);
});

Discussão (1)
Carregando comentários...