Ir para conteúdo
Jalber Romano

Dar um Submit em um form Modal e retornar novamente para a mesma janela Modal - Asp.net MVC

Recommended Posts

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);
           
        });

 

DWAmx.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Luiz Fernando 111
      Caros amigos, estou tentando adicionar soma entre inputs do html e do javascript, mas com esse exemplo, apenas consegui colocar no input do html. Como faço para implementar no input do javascript e somar o valor junto com o Valor Total mostrar lucro quando foi debito e prejuizo quando for crédito ? Alguém poderia me dá help !!!
       
       

    • Por Bobrinha
      Olá a todos.
       
      Tenho uma dúvida e não sei se é possível caso tenha alguma sugestão por favor avise.
       
      Adicionar resultado de um innerhtml dentro de um link atributo href é possível? ou seja eu tenho um input onde seleciono um ano 
       
      <select id="ano"> <option selected>2019</option> <option value="2018">2018</option> <option value="2017">2017</option> </select> <div id="anoAtual"></div> No query pego o valor ou seja o ano selecionado e jogo no html
       
      $("select").change(function () { document.getElementById("ano").innerHTML = document.getElementById("anoAtual").value; });  
      Agora vem a dúvida como eu jogo na URL? existe uma outra forma? é possível?
       
      <a href='resultado.php&ano=COMO JOGAR O ANO AQUI?'>  
       
    • Por LuanMartinsTI
      Eu tenho o seguinte codigo para capturar minha camera e meu audio, toda vez que eu entro na pagina x ela executa o js e pede acesso a camera de quem acessa a pagina, porem eu vou bloquear essa pagina para que apenas eu ou pessoa autorizadas possam acessar, queria saber o seguinte, eu sei capturar o video e audio, mas como eu vou mostrar pro usuario o meu video e o meu audio??
      <script> video = document.createElement('video'); video.width = 320; video.height = 240; video.autoplay = true; var hasUserMedia = navigator.webkitGetUserMedia ? true : false; navigator.webkitGetUserMedia('video', function(stream){ video.src = webkitURL.createObjectURL(stream); }, function(error){ console.log("Navegador nao suporta", error); }); </script>  
    • Por martinazzo
      não consigo apagar, então deixei assim... se alguém conseguir por favor
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.