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 turfeaugusto2
      ola sou novo no forum.
      e novo em programaçao
      gostaria da ajuda pra saber como trocar imagens de divs diferentes,pois uma estra trocando a imagem da outra
      e ja´tentei de tudo pra consertar..agradeço muito pela ajuda
       
       
      <!DOCTYPE html>
      <html lang="en" dir="ltr">
        <head>
        <style>
        
        *{margin:0;padding:0;}

      .container{display:flex;justify-content:space-evenly;flex-wrap:wrap;background:#6ab04c;}
      .card img{width:100%}
      .price {position:absolute;margin:10px 220px;color: #6ab04c;font-size: 20px;}
      .card{width:260px;height:350px;justify-content:center;background:#fff;margin:5px}
      .nav{display:flex;align-items:center;justify-content:center}
      .nav img{display:flex-row;width:80px;height:52px;margin:2px;border: 1px solid #ddd;}
        .name{
        text-transform: uppercase;
        font-size: 20px;
        color: #333;
      }
      .btn{
       display:flex;justify-content:center;padding:5px;
        background: #6ab04c;
        text-align: center;
        color: #fff;
        
      transition: 0.3s;}
      .dis{
          margin:0 0 10px;
        font-size: 16px;
      opacity: 0.7;}
      .product-info{
        padding: 20px;background:silver;
      }
      .btn:hover{
        background: #333;
      }
      </style>
          <meta charset="utf-8">
          <title></title>
          <link rel="stylesheet" href="style.css">
        </head>
        <body>
        <div class="container">
      <div class="card">
        <div class="top-section">
          <div class="price">$80</div><img id="image-container" src="1.png" alt="">
          <div class="nav">
            <img onclick="change_img(this)" src="1.png" alt="">
            <img onclick="change_img(this)" src="2.png" alt="">
            <img onclick="change_img(this)" src="3.png" alt="">
          </div>
          
        </div>
        <div class="product-info">
          <div class="name">Sanglasses</div>
          <div class="dis">Awesome Men Sanglasses</div>
          <a class="btn" href="#">Add to Cart</a>
        </div>
      </div>
      <div class="card">
        <div class="top-section">
          <div class="price">$80</div><img id="image-container" src="1.png" alt="">
          <div class="nav">
            <img onclick="change_img(this)" src="1.png" alt="">
            <img onclick="change_img(this)" src="2.png" alt="">
            <img onclick="change_img(this)" src="3.png" alt="">
          </div>
          
        </div>
        <div class="product-info">
          <div class="name">Sanglasses</div>
          <div class="dis">Awesome Men Sanglasses</div>
          <a class="btn" href="#">Add to Cart</a>
        </div>
      </div>
      <div class="card">
        <div class="top-section">
          <div class="price">$80</div><img id="image-container" src="1.png" alt="">
          <div class="nav">
            <img onclick="change_img(this)" src="1.png" alt="">
            <img onclick="change_img(this)" src="2.png" alt="">
            <img onclick="change_img(this)" src="3.png" alt="">
          </div>
          
        </div>
        <div class="product-info">
          <div class="name">Sanglasses</div>
          <div class="dis">Awesome Men Sanglasses</div>
          <a class="btn" href="#">Add to Cart</a>
        </div>
      </div>
      </div>
        <script type="text/javascript">
          var container = document.getElementById("image-container");
          function change_img(image) {
            container.src = image.src;
          }
        </script>
        </body>
      </html>
    • By dimoreira
      Boa noite programadores, estou a procura de um profissional que desenvolva um site simples, que tem apenas que me mostrar os resultados em tempo real da pagina de resultados da bet 365. Mas especificamente do futebol virtual. Vou mandar em anexo uma foto pra ter como base.   O modelo mais simples possivel é somente para acompanhar os resultados em tempo real sem ter q esta acessando o site da bet.


    • By violin101
      Caros amigos, saudações...
       
      Gostaria de tirar uma dúvida com os amigos, referente JAVASCRIPT.
       
      Estou escrevendo uma rotina, onde o USUÁRIO selecione o Produto e informe o valor de Desconto que deseja informar para o produto. <<=== ATÉ AQUI TUDO BEM.
       
      Minha dúvida:
      tem como pelo o JAVASCRIPT no ato da seleção do PRODUTO o sistema informar se este Produto já foi cadastrado no MYSQL ?
       
      Abaixo posto o código que estou usando para selecionar o Produto.
      MODAL
      <!-- Modal eu utilizo para Selecionar o Produto --> <div class="modal fade" id="modal_prod"> <div class="modal-dialog" style="width:80%;"> <div class="modal-content"> <div class="modal-header" style="font-size:18px; color:#ffffff; background:#307192;"> <h4 class="modal-title"><strong>Lista de Produtos</strong></h4> </div> <div class="modal-body"> <table id="tab_prod" class="table table-bordered table-hover"> <thead> <tr> <th style="text-align:center;">Cód. Interno</th> <th style="text-align:center;">Descrição do Produto</th> <th style="text-align:center;">Valor Venda</th> <th style="text-align:center;">Categoria</th> <th style="text-align:center;">Ação</th> </tr> </thead> <tbody> <?php if(!empty($prods)){ foreach ($prods as $prd) { //Variável criada para carregar informção dos Dados para o Botão $dataprd = $prd->idProdutos."*".$prd->cod_interno."*".$prd->descricao."*".$prd->valor_venda."*".$prd->categoria; echo '<tr>'; echo '<td width="20" height="10" style="text-align:center;">'.$prd->cod_interno.'</td>'; echo '<td width="250" height="10" style="text-align:left;">'.$prd->descricao.'</td>'; echo '<td width="20" height="10" style="text-align:right;">'.$prd->valor_venda.'</td>'; echo '<td width="20" height="10" style="text-align:center;">'.$prd->categoria.'</td>'; echo '<td width="20" style="text-align:center;"> <button type="button" class="btn btn-success btn-prod" style="margin-right: 2%; padding: 5px 7px;" title="Selecionar Fornecedor" value="'. $dataprd.'" > <span class="fa fa-check"></span> </button></td>'; echo '</tr>'; }//Fim do Foreach }//Fim do IF ?> </tbody> </table> </div> <div class="modal-footer" style="text-align:center; background:#BBAAAA;"> <button type="button" class="btn btn-danger pull-center" data-dismiss="modal">Voltar</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div>  
      Código em JAVASCRIPT que uso para AGREGAR o Produto na Tabela
      /*---Função para Capturar o Produto selecionado na Modal---*/ $(document).on("click",".btn-prod",function(){ prd = $(this).val(); infoprd = prd.split("*"); $("#idProdutos").val(infoprd[0]); $("#cod_interno").val(infoprd[1]); $("#descricao").val(infoprd[2]); $("#valor_venda").val(infoprd[3]); $("#categoria").val(infoprd[4]); $("#modal_prod").modal("hide"); //Função para Atualizar o Status do Botão statusLimparAgregar() }); //Função para AGREGAR o Item selecionado na Tabela $("#btn-agregar").on("click",function(){ var dsct = document.getElementById("dsct").value; var vlrtotal = document.getElementById("vlrtotal").value; if(dsct == "" || vlrtotal == ""){ alert("Atenção! Nenhuma QUANTIDADE ou VALOR foi informado."); } else { html = "<tr>"; html += "<td width='10%' height='10'><input type='hidden' name='id_prds[]' value='"+infoprd[0]+"'>"+infoprd[1]+"</td>"; html += "<td width='42%' height='10'><input type='hidden' name='descricao[]' value='"+infoprd[2]+"'>"+infoprd[2]+" - <strong style='font-size:12px;'>CATEGORIA: </strong> "+infoprd[4]+"</td>"; html += "<td width='10%' height='10' style='text-align:center;'><input type='hidden' name='vda[]' value='"+infoprd[3]+"'>"+infoprd[3]+"</td>"; html += "<td width='12%' height='10' style='text-align:center;'><input type='hidden' name='desc[]' value='"+dsct+"'>"+dsct+"</td>"; html += "<td width='14%' height='10' style='text-align:right;'><input type='hidden' name='vlrtotal[]' value='"+vlrtotal+"'>"+vlrtotal+"</td>"; html += "<td width='10%' height='10' style='text-align:center;'>"+ "<button type='button' class='btn btn-danger btn-remove-produto' style='padding: 2px 5px;' title='Remover Item da Lista'>"+ "<span class='fa fa-remove'></span></button></td>"; html += "</tr>"; $("#tbventas tbody").append(html); //Função para Somar os Itens do Lançamento somar(); itens(); $("#btn-agregar").val(null); $("#descricao").val(null); $("#cod_interno").val(null); $("#valor_venda").val(null); $("#categoria").val(null); $("#dsct").val(null); $("#vlrtotal").val(null); //Desabilita Buttons document.getElementById("btn-limp").disabled = true; document.getElementById("btn-agregar").disabled = true; } });  
      Grato,
       
      Cesar
    • By Sapinn
      Iai galera blz? Tô com uma duvida aqui. Eu tenho um menu Vertical Tabs que basicamente me ajuda a navegar em uma pagina sem precisar criar varias rotas para outras paginas. Segue o codigo:
      <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {box-sizing: border-box} body {font-family: "Lato", sans-serif;} /* Style the tab */ .tab { float: left; border: 1px solid #ccc; background-color: #f1f1f1; width: 30%; height: 300px; } /* Style the buttons inside the tab */ .tab button { display: block; background-color: inherit; color: black; padding: 22px 16px; width: 100%; border: none; outline: none; text-align: left; cursor: pointer; transition: 0.3s; font-size: 17px; } /* Change background color of buttons on hover */ .tab button:hover { background-color: #ddd; } /* Create an active/current "tab button" class */ .tab button.active { background-color: #ccc; } /* Style the tab content */ .tabcontent { float: left; padding: 0px 12px; border: 1px solid #ccc; width: 70%; border-left: none; height: 300px; } </style> </head> <body> <h2>Vertical Tabs</h2> <p>Click on the buttons inside the tabbed menu:</p> <div class="tab"> <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button> <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button> <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button> </div> <div id="London" class="tabcontent"> <h3>London</h3> <p>London is the capital city of England.</p> </div> <div id="Paris" class="tabcontent"> <h3>Paris</h3> <p>Paris is the capital of France.</p> </div> <div id="Tokyo" class="tabcontent"> <h3>Tokyo</h3> <p>Tokyo is the capital of Japan.</p> </div> <script> function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } // Get the element with id="defaultOpen" and click on it document.getElementById("defaultOpen").click(); </script> </body> </html> Fonte: https://www.w3schools.com/howto/howto_js_vertical_tabs.asp
      Blz, agora digamos que eu tenha saído da pagina onde tem esse Vertical tab e quando retornar eu gostaria de voltar justamente do lugar de onde eu sai.
      Por exemplo, digamos que eu tenha saído do menu na parti Paris para uma pagina onde tem tudo de Paris quando eu apertar no botão voltar eu quero retornar a pagina onde tem o menu e quero que ele fique na opção Paris inclusive marcado. Quando ele volta ele só vai para a primeira opção.
      Tem algum jeito de fazer isso?
×

Important Information

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