Jump to content
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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By clickanapolis
      Boa tarde pessoal, desculpa se postei em lugar errado, mais não sei aonde postar essa minha dúvida. Estou finalizando um projeto que consiste em uma plataforma de processo seletivo e na etapa final os candidatos iram fazer uma prova online.
       
      O cliente me perguntou se é possível bloquear o navegador, tipo se ele sair do navegador ou mudar de aba tipo o sistema finalizar a prova do candidato, visto que o sistema irá identificar que ele foi fazer uma pesquisa.
       
      Eu particularmente não vi nada igual ate hj e não sei se existe algo seja em javascript ou qualquer outro modo de fazer isso.
    • By FabianoSouza
      Tenho a function A, que captura valores e os transfere para a function B (que é um AJAX).
       
      Preciso que a function B passe seu resultado para a function A. Creio que precise de um callback. Mas não estou sabendo com estruturar isso.
      Vejam como estão os códigos:
       
      FUNCTION A
      function upDateRating(e) { var $alvoClick = getTarget(e) , $ul = $alvoClick.parentNode , $idItem = $alvoClick.parentNode.parentNode.parentNode.parentNode.id , $valRating = $alvoClick.value var $array = [ { idItem:$idItem , favorito: 1 , rating: $valRating } ] upDateCard($array) }  
      FUNCTION B (AJAX)
      function upDateCard(e) { var $array = e , $dados = JSON.stringify($array); function ajax() { var $obj = createXMLHTTP(); $obj.open('post', 'minhaPagina', true); $obj.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); $obj.onreadystatechange=function(){ if ($obj.readyState == 4 && $obj.status == 200){ try { var $strResp = JSON.parse($obj.responseText); } catch(e) { alert('Erro. Dados em formato inválido.') return false; } return $strResp //PRECISO PASSAR ESSE VALOR DE VOLTA PARA A FUNCTION A } } $obj.send(encodeURI('str='+$dados)) } ajax() }  
       
    • By FilipeON
      Olá Sou iniciante em Javascript... Preciso de ajuda para a seguinte questão:
      Tenho duas FUNÇÕES e preciso executa-las de forma aleatória, já tentei de varias formas, mas sem sucesso, alguém pode me ajudar?
      Basicamente o que preciso é que toda vez que a pagina WEB for carregada uma das duas funções seja sorteada e executada.
       
      As funções são:
      function vt1(){fireEvent (document.getElementById('bt-1'), 'click');} function vt2(){fireEvent (document.getElementById('bt-2'), 'click');}
       
    • By Danilo - Jesus voltará!
      Olá, estou fazendo um cálculo de horas para cartão ponto em php e jquery... o cálculo do php já consegui um satisfatório. Preciso agora ao preencher os campos que são gerados dinamicamente de 1 a 31 que são os dias do mês, ao sair do campo Jornada (horas de trabalho), ele envie via ajax os valores preenchidos nesses 4 campos anteriores que são 4 inputs de tempo (time).
      Eu consegui recuperar individualmente, mas ele passa a chamada da função em todos, se dou um alert por exemplo ele percorre todos os campos dinâmicos para aí ir para o outro input, que no caso acontece a mesma coisa, segue o script que utilizei para pegar o valor do input individual, aí preciso que não percorra todos e pegue apenas o valor de cada um no onblur do campo jornada conforme está na figura e me retorne para os campos específicos com os dados que pegarei no php,. Espero ter sido claro, se alguém puder ajudar eu agradeço.
       
      $(document).ready(function() { $(":input").blur(function() { var id = $(this).attr('id'); var value = $(this).val(); alert(id + " " + " " + value); }); }); O que preciso está na figura abaixo:
       

       
      Aguardo, se alguém puder ajudar...agradeço
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.