I have an ASP.NET MVC project where I have a PartialView INDEX and another CREATE. in my INDEX, I have a Generic MODAL block where my PartialViews open in Modal form.
<div class="modal fade" data-backdrop="static" id="pessoaHistory" role="dialog">
<div class="modal-dialog" style="width: 95%; height: 500px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Histórico de Alterações</h4>
</div>
<div class="modal-body scoll-tree">
<p id="pessoaHistoryData"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
To call my CREATE PartialView I use the btnNew button that makes a call via JavaScrip / Ajax and everything works perfectly!
<a id="btnNovo" asp-action="Create" data-modal="" class="btn btn-outline btn-default" data-toggle="tooltip"
data-original-title="Cadastrar Novo" data-container="body">
<span title="Cadastrar Novo" class="icon wb-plus"></span> Cadastrar Novo
</a>
My JS File:
$(document).ready(function () {
$.ajaxSetup({ cache: false });
$('a[data-modal]').on('click', function (e) {
// Abre la ventana modal con el formulario solicitado
openmodal(this.href);
return false;
});
$('#modalPessoa').on('hidden.bs.modal', function () {
$('#contentModal').html('');
});
});
function openmodal(url) {
$('#contentModal').load(url, function () {
$('#modalPessoa').modal({
keyboard: true
}, 'show');
//$("#PessoaNatureza").change(function () {
// document.getElementById('frmCreate').submit();
//});
// Suscribe el evento submit
bindForm(this);
});
}
function bindForm(dialog) {
$('form', dialog).submit(function () {
if ($(this).valid()) {
// Realiza una petición ajax
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
if (result.success) {
window.location = window.location;
window.location.reload(); //Ajuda na exclusao, atualizando o grid
} else {
$('#contentModal').html(result);
bindForm();
}
}
});
return false;
} else {
return false;
}
});
}
@using SistemaComercial.Domain.ValueObjects
@model SistemaComercial.Application.ViewModels.Pessoa.PessoaViewModel
@{
ViewData["Title"] = "Cadastrar Nova Pessoa";
}
<div>
<form asp-action="Create" asp-controller="Pessoa" id="frmCreate">
@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">
<div id="validationSummary" class="text-center">
<vc:summary />
</div>
<div class="panel-body">
<div class="tab-pane active" id="exampleTabsOne" role="tabpanel">
<div class="form-horizontal">
<div class="form-group row">
<label asp-for="PessoaNatureza" class="col-md-2 control-label"></label>
<div class="col-md-3">
<select asp-for="PessoaNatureza" asp-items="Model.PessoasNaturezas" data-plugin="selectpicker" title="Selecione uma opção" class="form-control show-tick show-menu-arrow"></select>
<span asp-validation-for="PessoaNatureza" class="text-danger"></span>
</div>
</div>
@if (Model.PessoaNatureza == PessoaNatureza.Fisica)
{
@*<div id="divPessoaJuridica">
@await Html.PartialAsync("_PessoaJuridica")
</div>*@
<div id="divPessoaFisica">
@await Html.PartialAsync("_PessoaFisica")
</div>
}
else if (Model.PessoaNatureza == PessoaNatureza.Juridica)
{
@*<div id="divPessoaFisica" style="display:none">
@await Html.PartialAsync("_PessoaFisica")
</div>*@
<div id="divPessoaJuridica">
@await Html.PartialAsync("_PessoaJuridica")
</div>
}
</div>
</div>
@*<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="submit" class="btn btn-success"><i class="icon wb-check" aria-hidden="true"></i> Gravar</button>
<a asp-action="Index" class="btn btn-danger">
<span title="Retornar à Lista" class="icon wb-arrow-left"></span> Retornar à lista
</a>
</div>
</div>*@
<div class="modal-footer">
<button id="btnSalvar" type="submit" class="btn btn-primary"><i class="icon wb-check"></i> Salvar </button>
<a class="btn btn-danger" data-dismiss="modal">
<span title="Fechar" class="icon wb-close"></span> Fechar
</a>
</div>
</div>
</div>
</div>
</form>
</div>
Thank you all!