Post com Bootstrap Modal e Ajax
Olá amigos!
Há mais ou menos uma semana estou com um problema que está me tirando boas noites de sono.
Estou utilizando bootstrap modal para renderizar uma PartialView de insercao/alteracao de dados. Quando renderizo a partial view pela primeira vez e faço o post das informações, os dados são inseridos normalmente e o modal é fechado. Quando chamo esse modal pela segunda vez, para realizar um novo cadastro, os dados são gravados no banco de forma duplicada. Se eu chamo o modal mais uma vez e faço um novo cadastro, os dados são salvos triplicados, e assim por diante.
Usando o debug do Chrome, não existe nenhuma mensagem de erro.
Alguem ai pode me ajudar, por favor, a resolver esse problema?
Desde já agradeço!
Há mais ou menos uma semana estou com um problema que está me tirando boas noites de sono.
Estou utilizando bootstrap modal para renderizar uma PartialView de insercao/alteracao de dados. Quando renderizo a partial view pela primeira vez e faço o post das informações, os dados são inseridos normalmente e o modal é fechado. Quando chamo esse modal pela segunda vez, para realizar um novo cadastro, os dados são gravados no banco de forma duplicada. Se eu chamo o modal mais uma vez e faço um novo cadastro, os dados são salvos triplicados, e assim por diante.
Usando o debug do Chrome, não existe nenhuma mensagem de erro.
Alguem ai pode me ajudar, por favor, a resolver esse problema?
Desde já agradeço!
Thomás Moreira
Curtidas 0
Respostas
Joel Rodrigues
09/01/2015
Olá, dê uma olhada nestes dois artigos que escrevi recentemente exatamente sobre isso. Talvez lhe ajude:
ASP.NET MVC e Bootstrap - Exibindo views modais
ASP.NET MVC e jQuery UI: Desenvolvendo um CRUD com janelas modais
O segundo está mais completo, a diferença é que usei o Dialog da jQuery UI, mas a lógica é a mesma.
ASP.NET MVC e Bootstrap - Exibindo views modais
ASP.NET MVC e jQuery UI: Desenvolvendo um CRUD com janelas modais
O segundo está mais completo, a diferença é que usei o Dialog da jQuery UI, mas a lógica é a mesma.
GOSTEI 0
Thomás Moreira
09/01/2015
Joel,
Obrigado pelas informações!
A principio funcionou. Utilizei seu exemplo com bootstrap.
Porem, eu preciso fazer algumas validações e tratamentos no retorno do metodo e, para isso, uso o Ajax através dos seguintes arquivos:
jquery.validate.unobtrusive.min.js
jquery.validate.min.js
jquery.unobtrusive-ajax.min.js
O fluxo é o seguinte: A partial view do modal, faz um post para o controller. No controller, eu faço o Insert e, tendo sucesso, eu retorno uma Url, via Json. Eu tenho um arquivo js externo que faz o tratamento dessa Url e direciona. As opçoes são as seguintes: O usuário pode Inserir, salvar e continuar no modal com a View preparada para uma nova inserção. O usuario pode inserir, salvar e manter a view com os dados que acabou de inserir, pronto para edição. E por ultimo, o usuário pode simplesmente inserir e automaticamente apos a inserção, fechar a janela e retornar para a View Index.
Antes de implementar o fluxo acima, tudo estava funcionando. Porem, quando precisei referenciar os arquivos js mencionados acima, na minha View Index para implmentar o fluxo normal, o problema voltou a acontecer.
Todos os arquivos js do Jquery, Bootstrap e etc estão no Layout.
Vc saberia uma forma para tratar essa situação?
Obrigado!
Obrigado pelas informações!
A principio funcionou. Utilizei seu exemplo com bootstrap.
Porem, eu preciso fazer algumas validações e tratamentos no retorno do metodo e, para isso, uso o Ajax através dos seguintes arquivos:
jquery.validate.unobtrusive.min.js
jquery.validate.min.js
jquery.unobtrusive-ajax.min.js
O fluxo é o seguinte: A partial view do modal, faz um post para o controller. No controller, eu faço o Insert e, tendo sucesso, eu retorno uma Url, via Json. Eu tenho um arquivo js externo que faz o tratamento dessa Url e direciona. As opçoes são as seguintes: O usuário pode Inserir, salvar e continuar no modal com a View preparada para uma nova inserção. O usuario pode inserir, salvar e manter a view com os dados que acabou de inserir, pronto para edição. E por ultimo, o usuário pode simplesmente inserir e automaticamente apos a inserção, fechar a janela e retornar para a View Index.
Antes de implementar o fluxo acima, tudo estava funcionando. Porem, quando precisei referenciar os arquivos js mencionados acima, na minha View Index para implmentar o fluxo normal, o problema voltou a acontecer.
Todos os arquivos js do Jquery, Bootstrap e etc estão no Layout.
Vc saberia uma forma para tratar essa situação?
Obrigado!
GOSTEI 0
Joel Rodrigues
09/01/2015
Olá, Thomás.
Em teoria a validação com jQuery Validate não deveria atrapalhar. Para implementar esse fluxo que você descreveu, você pode remover o botão submit do form que fica no modal e no lugar dele colocar um botão qualquer fora do form (no footer do modal). Neste botão, você submeteria os dados via Ajax, receberia o retorno e tomaria a decisão adequada (na função done() da chamada $.ajax, por exemplo), sem fechar o modal.
Não sei se entendi bem seu problema, mas para implementar o que você descreveu, eu procederia dessa forma.
Em teoria a validação com jQuery Validate não deveria atrapalhar. Para implementar esse fluxo que você descreveu, você pode remover o botão submit do form que fica no modal e no lugar dele colocar um botão qualquer fora do form (no footer do modal). Neste botão, você submeteria os dados via Ajax, receberia o retorno e tomaria a decisão adequada (na função done() da chamada $.ajax, por exemplo), sem fechar o modal.
Não sei se entendi bem seu problema, mas para implementar o que você descreveu, eu procederia dessa forma.
GOSTEI 0
Eder
09/01/2015
Boa noite Joel,
Estou enfrentando o mesmo problema, consegui resolver a questão do submit mas quando salvo a terceira vez ele envia os dados pelo ajax mas não dá retorno, a partir daí ele não executa mais.
Tem ideia como posso resolver?
Segue o código javascript:
Estou enfrentando o mesmo problema, consegui resolver a questão do submit mas quando salvo a terceira vez ele envia os dados pelo ajax mas não dá retorno, a partir daí ele não executa mais.
Tem ideia como posso resolver?
Segue o código javascript:
function verificaprecadastro(){
var frm = $('#pessoanova');
if ($("#jaexistecli").val() == 1) {
bootbox.alert("Atenção! Já existe uma pessoa cadastrada com esses Nome!");
$("#nomegp").addClass("has-error");
//$("#nome").focus()
return false;
}
if ($("#nome").val() < 1) {
bootbox.alert("Por favor, informe o nome do Cliente!");
$("#nome").focus()
return false;
}else{
$("#btnsalvar").attr('value', 'Aguarde...');
$("#btnsalvar").prop("disabled", true);
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
var dataOld = $("#clientes").select2('data');
dataOld.push({id: data, Nome: $("#nome").val()});
$("#clientes").select2("data", dataOld, true);
$('#precadastro').modal('hide');
frm.trigger("reset");
$("#btnsalvar").attr('value', 'Salvar');
$("#btnsalvar").prop("disabled", false);
}
});
}GOSTEI 0