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 mamotinho
      Olá, estou com problemas, minha data está atualizando porém eu clico em um produto ele exibe o tempo sem atualizar . quando eu mudo de produto ele mostra os dois valores exemplo
      Produto 1: tem duraçao de: 1 dia e 13:023 PM
      Produto 2: tem duraçao de: 0 dia e 23:023 PM

      Quando eu clico no produto 1 ele exibe normalmente, porém quando mudo para o produto 2 ele fica atualizando o valor do dia do produto 1 e do produto 2 sempre mudando.
      segue abaixo como está o codigo

      JavaSCRIPT
       
      function anooo(mes,dia,h,m){ var mess = mes; var dias = dia; var hss = h; var mss = m; // Set the date we're counting down to var countDownDate = new Date(""+mess+" "+dias+", 2020 "+hss+":"+mss+":00").getTime(); // Update the count down every 1 second var x = setInterval(function() { // Get today's date and time var now = new Date().getTime(); // Find the distance between now and the count down date var distance = countDownDate - now; // Time calculations for days, hours, minutes and seconds var dayss = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); document.getElementById("days").innerHTML = dayss; document.getElementById("hrs").innerHTML = hours; document.getElementById("minus").innerHTML = minutes; document.getElementById("secs").innerHTML = seconds; this.remove(countDownDate); // If the count down is over, write some text if (distance < 0) { clearInterval(x); } }, 1000); } AQUI É O CHAMADO:
       
      <? if($result->Discount>=1){ $Month = date('M', strtotime($result->DateDiscount)); $Days = date('d', strtotime($result->DateDiscount)); $Hours = date('H', strtotime($result->DateDiscount)); $Minutes = date('i', strtotime($result->DateDiscount)); echo "<script>anooo('".$Month."','".$Days."','".$Hours."','".$Minutes."')</script>"; //echo "<script>alert('".$Month."')</script>"; ?> <ul class="time_sell remain_time"> <li> <dl> <dt class="blind">남은시간</dt> <dd> <span class='n_date day' id='days'></span> <span class='date'>일</span> <span class='n_time hour' id='hrs'></span> <span class='n_time minute' id='minus'></span> <span class='n_time second' id='secs'></span> <div id="countdown"></div> </dd> </dl> </li> </ul> <? } ?> eu já tentei de tudo mais sempre que mudo de produto ele exibe a data dos produtos anteriores em loop. a cada atualização do setInterval
    • By WagnerFilho
      Olá,
      Eu escrevi um exemplo de trabalho de um problema real que estou tentando resolver
      Criei um objeto simulando o retorno json que recebo do banco de dados.
       
      Eu preciso:
      Listar contratos e lotes de contratos Ao entrar na função, marcar o último `lote` do `contrato` como selecionado no Dropdown List Ao entrar na função, exibir as faturas `lote` e `contrato` selecionado no elemento `ul-invoices` Carregar e exibir as respectivas `faturas` ao alterar o `lote`  
      Problemas:
      Não consigo listar as `faturas` do último `lote` do `contrato selecionado` ao carregar a função. Não consigo listar as `faturas` ao `alterar` o `lote` do `contrato`  
      Observação:
      Ao entrar na página, já tenho as informações do contrato selecionado; no caso do exemplo, deixei o contrato com o ID 1. No exemplo estou usando a classe `in-attendance` para definir o contrato selecionado Estou usando `Revealing Pattern` e quero manter este padrão  
      Tradução
      contracts = contratos batches = lotes invoices = faturas  
      Exemplo
      <html> <label id="contracts"></label> <ul id="ul-invoices"></ul> <pre></pre> <script> let lblContract = document.querySelector('#contracts'); let UlInvoices = document.querySelector('#ul-invoices'); let contractInAttendance = 1; const objectContract = { id: 1, nome: 'wagner', contracts: [{ id: 1, contract: '123456', batches: [ { id: 1, contract_id: 1, batch: '1', invoices: [ { value: 10, batch_id: 1, }] }, { id: 2, contract_id: 1, batch: '2', invoices: [{ value: 10, batch_id: 2, }] }] }, { id: 2, contract: '246789', batches: [ { id: 3, contract_id: 2, batch: '1', invoices: [ { value: 20, batch_id: 3, }] }] }] } const revelling = (function() { function privateInit() { const contracts = objectContract.contracts; let contractFilteredById = contracts.filter(contract => contract.id === contractInAttendance); for (const contract of contracts) { const selectedContract = contract.id === contractFilteredById[0].id ? 'in-attendance' : ''; let htmlForBatchsOptions = contract.batches.map(batch => `<option value=${batch.id}>${batch.batch}</option>`).join(''); lblContract.innerHTML += `<div class="contract-${selectedContract}" style="display: flex;"> <div id="contract-${contract.contract}" data-contract="${contract.id}" class="loren"> <span>${contract.contract}</span> </div> <div class="ipsulum" style="margin-left: 5px;"> <select class="sel-batch"> ${htmlForBatchsOptions} </select> </div> </div>`; const batchOption = lblContract.querySelector('select.sel-batch'); batchOption.addEventListener('change', getInvoices); //batchOption.value = 2; } } function getInvoices() { const batchValue = event.target.value console.log(batchValue); //console.log(this.value); } return { init: privateInit() } })(); revelling.init; </script> </html>  
    • By mamotinho
      Olá, gostaria de sabe como posso fazer uma contagem regressiva apartir de um registro em meu banco de dados eu tentei montar um código da seguinte forma:

       
      <? $DateGET = date('m/d/Y H:i A', strtotime($result->DateDiscount)); ?> <script> var valueDate = <?=$DateGET?>; var end = new Date(valueDate); var _second = 1000; var _minute = _second * 60; var _hour = _minute * 60; var _day = _hour * 24; var timer; function showRemaining() { var now = new Date(); var distance = end - now; if (distance < 0) { clearInterval(timer); document.getElementById("countdown").innerHTML = "EXPIRED!"; return; } var days = Math.floor(distance / _day); var hours = Math.floor((distance % _day) / _hour); var minutes = Math.floor((distance % _hour) / _minute); var seconds = Math.floor((distance % _minute) / _second); document.getElementById("countdown").innerHTML = "<span class='n_date day' id='days'>" + days + "</span><span class='date'>일</span>"; document.getElementById("countdown").innerHTML += "<span class='n_time hour' id='hrs'>" + hours + "</span>"; document.getElementById("countdown").innerHTML += "<span class='n_time minute' id='minus'>" + minutes + "</span>"; document.getElementById("countdown").innerHTML += "<span class='n_time second' id='secs'>" + seconds + "</span>"; } timer = setInterval(showRemaining, 1000); </script> Mais infelizmente não passou a data registrada no banco de dados, alguém teria ideia de como posso ta fazendo.
    • By everton_araujo
      Boa noite pessoal, tudo bem?
      Gostaria de saber como mudo a propriedade target="_blank"
       para target="_system" via javascript. Muito obrigado.
       
      <a href="https://bemdiario.com/wp-content/uploads/2020/06/água-da-rocha.pdf" target="_blank" rel="noopener noreferrer nofollow" download="" class="jsx-936791898 eape-item-linkWrapper"><div class="jsx-936791898 eape-item-link">Baixar PDF</div></a>
×

Important Information

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