DÊVIDAS EM ASP.NET MVC
Bom dia, pessoal!
Antes de mais nada queria pedir desculpas pelo tÃtulo do tópico, meio genérico, mas é que eu não consegui pensar em outro tÃtulo para essa minha dúvida.
Não sei se vou conseguir explicar essa minha dúvida, mas tentarei ser o mais claro possÃvel.
Meu projeto em ASP.NET MVC, ele inicia com um menu principal (página 1). Clico em um botão que me leva ao cadastro de clientes por exemplo (página 2).
Neste cadastro, eu clico em um botão e vou para cadastrar um cliente novo (página 3). Após inserir o cliente novo, retorno ao menu principal (página 1).
Se nesse momento, no navegador, eu clicar no botão Voltar, ele vai me levar à página para cadastrar um novo cliente (página 3) que foi a última que foi aberta, correto?
Pois bem, nessa página estará aparecendo os dados do cliente que eu acabei de cadastrar.
AÃ, fico pensando, sabendo como usuário é, se ele clicar no botão para confirmar, vai cadastrar o mesmo cliente novamente.
Como poderia fazer para [Ô]proibir[Ô] que isso acontecesse? O ideal seria uma maneira de fazer com que o botão Voltar do navegador não funcionasse (se é que existe uma maneira de se fazer isso)? Ou seria o ideal, mesmo que voltasse na página de cadastro, voltar com os campos devidamente [Ô]limpos[Ô] (se for essa a resposta, como deveria proceder?)? Gostaria de opiniões de vocês que estão a mais tempo programando para Web, pois eu ainda estou só começando e apanhando muito.
Obrigado desde já.
Antes de mais nada queria pedir desculpas pelo tÃtulo do tópico, meio genérico, mas é que eu não consegui pensar em outro tÃtulo para essa minha dúvida.
Não sei se vou conseguir explicar essa minha dúvida, mas tentarei ser o mais claro possÃvel.
Meu projeto em ASP.NET MVC, ele inicia com um menu principal (página 1). Clico em um botão que me leva ao cadastro de clientes por exemplo (página 2).
Neste cadastro, eu clico em um botão e vou para cadastrar um cliente novo (página 3). Após inserir o cliente novo, retorno ao menu principal (página 1).
Se nesse momento, no navegador, eu clicar no botão Voltar, ele vai me levar à página para cadastrar um novo cliente (página 3) que foi a última que foi aberta, correto?
Pois bem, nessa página estará aparecendo os dados do cliente que eu acabei de cadastrar.
AÃ, fico pensando, sabendo como usuário é, se ele clicar no botão para confirmar, vai cadastrar o mesmo cliente novamente.
Como poderia fazer para [Ô]proibir[Ô] que isso acontecesse? O ideal seria uma maneira de fazer com que o botão Voltar do navegador não funcionasse (se é que existe uma maneira de se fazer isso)? Ou seria o ideal, mesmo que voltasse na página de cadastro, voltar com os campos devidamente [Ô]limpos[Ô] (se for essa a resposta, como deveria proceder?)? Gostaria de opiniões de vocês que estão a mais tempo programando para Web, pois eu ainda estou só começando e apanhando muito.
Obrigado desde já.
Você tem que tratar isso na sua camada de dados. Se por ventura o cliente vier a cadastrar os mesmos dados em outro dado momento, você vai ter que verificar no banco se esse cadastro já foi realizado, não é algo apenas de ficar na memória do navegador. Faça de um jeito que sirva para todos os casos.
Beleza, Jaba, obrigado mais uma vez.
Eu sugiro uma rotina simples de [Ô]limpeza[Ô] de tela ao entrar nela. Use os eventos load() e ready(), disponÃveis como extensões do JQuery.
Pois é Kerplunk, tentei fazer isso mas ainda não consegui.
Encontrei alguns exemplos de como limpar os campos da tela, porém não consegui fazer funcionar. Esse por exemplo:
Notei que nos exemplos, eles usam a tag <form> e eu não estou usando. Será que pode ser por isso, ou não tem nada a ver?
Talvez eu esteja fazendo da maneira errada. A minha View Create para cadastrar um novo Motorista, por exemplo está assim:
Dessa forma, quando clicar no submit Salvar, salva o registro na tabela de dados e vai para a tela de listagem dos motoristas cadastrados.
AÃ se for clicado no Voltar do Chrome, vai voltar para essa tela com o EditFor preenchido. E eu gostaria que ficasse vazio. é isso que eu não estou sabendo fazer.
Não sei se estou fazendo da maneira certa.
Encontrei alguns exemplos de como limpar os campos da tela, porém não consegui fazer funcionar. Esse por exemplo:
$(document).ready(function() {
$([Ô]#form[Ô])[0].reset();Notei que nos exemplos, eles usam a tag <form> e eu não estou usando. Será que pode ser por isso, ou não tem nada a ver?
Talvez eu esteja fazendo da maneira errada. A minha View Create para cadastrar um novo Motorista, por exemplo está assim:
@model Aplicativo.Models.Motorista
@{ ViewBag.Title = [Ô]Create[Ô]; }
<!DOCTYPE html>
<html>
<head>
<title>Aplicativo</title>
<meta charset=[Ô]utf-8[Ô] />
<link type=[Ô]text/css[Ô] rel=[Ô]stylesheet[Ô] href=[Ô]~/Content/bootstrap.css[Ô] />
</head>
<body>
<div style=[Ô]background-color:lightsteelblue; color:black; text-align:center; padding-top:12px; height:60px;
font-family:Tahoma; font-size:22px; font-weight:bold;[Ô]>
Controle de Despesas Comerciais
</div>
<br />
<div style=[Ô]background-color:lightsteelblue; color:black; text-align:center; padding-top:3px; height:30px;
font-family:Tahoma; font-size:18px; font-weight:bold;[Ô]>
Cadastro de Motoristas ==> Inclusão
</div>
<br />
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<table align=[Ô]center[Ô]>
<tr>
<td style=[Ô]font-family:Tahoma; font-size:14px;[Ô]>
Nome
</td>
</tr>
<tr>
<td>
@Html.EditorFor(model => model.Nome, new { htmlAttributes = new { @class = [Ô]form-control[Ô], @style = [Ô]padding-left:5px; font-family:Tahoma; font-size:14px;[Ô], autofocus = [Ô]autofocus[Ô] } })
</td>
</tr>
</table>
<br />
<table align=[Ô]center[Ô]>
<tr>
<td>
<div style=[Ô]text-align:center; vertical-align:central[Ô]>
<input type=[Ô]submit[Ô] value=[Ô]Salvar[Ô] class=[Ô]btn btn-success[Ô] style=[Ô]width:85px; text-align:center;[Ô] />
@Html.ActionLink([Ô]Cancelar[Ô], [Ô]Index[Ô], null, new { @class = [Ô]btn btn-danger[Ô], @style=[Ô]width:85px; text-align:center;[Ô] })
</div>
</td>
</tr>
</table>
}
</body>
</html>Dessa forma, quando clicar no submit Salvar, salva o registro na tabela de dados e vai para a tela de listagem dos motoristas cadastrados.
AÃ se for clicado no Voltar do Chrome, vai voltar para essa tela com o EditFor preenchido. E eu gostaria que ficasse vazio. é isso que eu não estou sabendo fazer.
Não sei se estou fazendo da maneira certa.
O que faz esse pedaço de código:
Ele diz:
Quando o documento estiver pronto(renderizado), faça o seguinte:
O form identificado pelo id [Ô]form[Ô], o seu primeiro Ãtem deve ser resetado
Mesmo se ao renderizar todo o HTML, o form estiver com o ID [Ô]#form[Ô] isso não vai funcionar pois se refere à um Ãtem de form e não ao form completo. O que você precisa fazer é disparar o evento [Ô]reset[Ô] do form, que deve estar identificado com um ID, caso não esteja, use seletor do componente form, geralmente só existe um por página, mais ou menos assim:
Lembrando, o form deve ter o id [Ô]form[Ô], portanto o HTML renderizado deve estar mais ou menos assim:
Caso o id não esteja presente, use o seletor por componente:
A sintaxe do JQuery, é baseada em [Ô]seletores[Ô], que é algo meio complicado no começo, mas não é nenhum bicho de sete cabeças. Exemplos:
Esse é o uso mais básico dos seletores do JQuery, eles podem ficar bem complexos pois podem ser aninhados e ainda podem ser usados com o método [Ô]children[Ô], que vai selecionar os componentes filhos do(s) componente(s) afetados pelo seletor. Exemplo:
O domÃnio dos seletores do JQuery é fundamental para o domÃnio do JQuery em si, pois são eles quem [Ô]marcam[Ô] o que será feito. Imagine os seletores como um comando SELECT de um banco de dados, onde você pode colocar uma cláusula WHERE, especificando quais registros quer buscar, a idéia é a mesma, o que muda é que o JQuery se refere à componentes do HTML ao invés de registros do banco de dados.
$(document).ready(function() {
$([Ô]#form[Ô])[0].reset();
Ele diz:
Quando o documento estiver pronto(renderizado), faça o seguinte:
O form identificado pelo id [Ô]form[Ô], o seu primeiro Ãtem deve ser resetado
Mesmo se ao renderizar todo o HTML, o form estiver com o ID [Ô]#form[Ô] isso não vai funcionar pois se refere à um Ãtem de form e não ao form completo. O que você precisa fazer é disparar o evento [Ô]reset[Ô] do form, que deve estar identificado com um ID, caso não esteja, use seletor do componente form, geralmente só existe um por página, mais ou menos assim:
$([Ô]#form[Ô]).trigger([Ô]reset[Ô]);
Lembrando, o form deve ter o id [Ô]form[Ô], portanto o HTML renderizado deve estar mais ou menos assim:
<form id=[Ô]form[Ô]>
///coisas dentro do form
</form>
Caso o id não esteja presente, use o seletor por componente:
$([Ô]form[Ô]).trigger([Ô]reset[Ô]);
A sintaxe do JQuery, é baseada em [Ô]seletores[Ô], que é algo meio complicado no começo, mas não é nenhum bicho de sete cabeças. Exemplos:
$([Ô]#algo[Ô]).<ação> //se refere à componente que possua um id [Ô]algo[Ô], exemplo <div id=[Ô]algo[Ô]>, então qualquer coisa que se execute em <ação> se refere à aquele componente. Como é sintaticamente ilegal ter dois componentes HTML como o mesmo ID, esse seletor é sempre se referindo à um único componente
$([Ô]algo[Ô]).<ação> //se refere à componente do tipo [Ô]algo[Ô], aqui, geralmente são tags HTML mesmo, como div, input, label ou qualquer outra. Nesse caso o que for feito em <ação> será aplicado à todos os componentes desse tipo. Exemplo $([Ô]div[Ô]).css([Ô]background[Ô],[Ô]#8ec252[Ô]). Aqui, todas os elementos [Ô]div[Ô] da página serão aplicados na sua propriedade de CSS [Ô]background[Ô] a cor [Ô]#8ec252[Ô]. é muito comum em scripts personalizados de validação de dados.
$([Ô].algo[Ô]).<ação> //se refere à todos os componentes que estejam contidos na classe [Ô]algo[Ô]. Exemplo: $([Ô].texto[Ô]).css([Ô]color[Ô], [Ô]red[Ô]). Aqui, todos os elementos que estejam contemplados na classe [Ô]texto[Ô], terão sua cor mudada para vermelho, portanto:
<input class=[Ô]algo[Ô]> //será modificado
<input class=[Ô]outra[Ô]> //não será modfiicado
<div class=[Ô]algo outra[Ô]> //será modificado
<div class=[Ô]outra qualquer[Ô]> //não será modificado
Esse é o uso mais básico dos seletores do JQuery, eles podem ficar bem complexos pois podem ser aninhados e ainda podem ser usados com o método [Ô]children[Ô], que vai selecionar os componentes filhos do(s) componente(s) afetados pelo seletor. Exemplo:
$([Ô].algo[Ô]).children([Ô]div[Ô]).css([Ô]background[Ô], [Ô]red[Ô]);
//esse comando vai pintar de vermelho todos os elementos div que estiverem dentro do elemento que tenha a classe [Ô]algo[Ô], exemplo:
<div class=[Ô]algo[Ô]>
<div>qualquer coisa</div>//será pintado de vermelho
<input type=[Ô]text[Ô] /> //não será pintado, pois não é um elemento do tipo [Ô]div[Ô]
<div>outra coisa</div>//será pintado de vermelho
</div>
<div class=[Ô]outra[Ô]>
<div>qualquer coisa</div>//não será afetado, pois é contido por uma div que não é da classe [Ô]algo[Ô]
<input type=[Ô]text[Ô] /> //não será pintado, pois não é um elemento do tipo [Ô]div[Ô] e não é da classe [Ô]algo[Ô]
<div>outra coisa</div>//não será afetado, pois é contido por uma div que não é da classe [Ô]algo[Ô]
<div class=[Ô]algo[Ô]>
<div>qualquer coisa aqui</div>//será afetado pois está dentro de um elemento que pertence à classe [Ô]algo[Ô] e é um elemento div
<input type=[Ô]text[Ô] /> //não será afetado pois mesmo sendo [Ô]filho[Ô] de um elemento que pertence à classe [Ô]algo[Ô], não é um elemento do tipo div
</div>
</div>
O domÃnio dos seletores do JQuery é fundamental para o domÃnio do JQuery em si, pois são eles quem [Ô]marcam[Ô] o que será feito. Imagine os seletores como um comando SELECT de um banco de dados, onde você pode colocar uma cláusula WHERE, especificando quais registros quer buscar, a idéia é a mesma, o que muda é que o JQuery se refere à componentes do HTML ao invés de registros do banco de dados.
Citação::
O que faz esse pedaço de código:
$(document).ready(function() {
$([Ô]#form[Ô])[0].reset();
Ele diz:
Quando o documento estiver pronto(renderizado), faça o seguinte:
O form identificado pelo id [Ô]form[Ô], o seu primeiro Ãtem deve ser resetado
Não é bem assim, tanto esse quanto o que você postou em seguida devem funcionar.
Sua explicação neste caso está errada, ele não vai pegar o primeiro item dentro do form e sim o primeiro elemento encontrado pelo jQuery, como neste caso a busca foi feita pelo ID deve existir apenas um elemento que é o próprio form, se não fosse assim ele não resetaria nada, nem o primeiro item, pois mesmo que o primeiro elemento dentro do form fosse um input eles não possuem um método reset()
A vantagem da forma que você postou é que seria possÃvel resetar mais de um form ao mesmo tempo, porém teria que usar outro tipo de seletor que não seja o ID para isso.
O seletor por ID, pela lógica, deve retornar apenas um elemento, visto que é sintaticamente ilegal ter dois componentes com o mesmo ID, logo a referência de elemento [0] não faz sentido. Acho que devo ter me explicado mal, mas é isso que quis dizer. Outros seletores podem sim retornar mais de um elemento(um array de elementos) e então faria sentido o indexador [0].
Kerplunk, valeu pela explicação.
Mas eu encontrei um código no Stack Overflow que faz exatamente isso que eu queria. Ele faz com que ao clicar no botão Voltar do navegador, não acontece nada, ou seja, o usuário só irá sair da página atual se clicar em um botão especÃfico da página.
A solução está aqui!
Como desabilitar a função do botão [ô]voltar[ô] do navegador?
Mas eu encontrei um código no Stack Overflow que faz exatamente isso que eu queria. Ele faz com que ao clicar no botão Voltar do navegador, não acontece nada, ou seja, o usuário só irá sair da página atual se clicar em um botão especÃfico da página.
A solução está aqui!
Como desabilitar a função do botão [ô]voltar[ô] do navegador?
Ok, pode ter funcionado e pode funcionar até mesmo para sempre. Mas você não pode desenvolver seus programas baseados em browser e suas mazelas. E se algum browser ou update dele colocar o hash no endereço tenha o mesmo efeito de não colocar? Certo, isso não é uma feature de browser, mas não é esse o caminho que se deve seguir. Sua aplicação deve ser totalmente independente desse tipo de coisa. Além disso, essa navegação deve ser livre. Veja o caso de um dia você direcionar à uma tela sua, vinda de uma outra página, como o VBMania por exemplo. O usuário não pode ficar [Ô]amarrado[Ô] à isso. Se ele quiser voltar, então deixe que volte.
Mas se você está contente com o resultado, beleza. Só tente no futuro desenvolver de forma que esse tipo de coisa não ocorra.
Tópico encerrado , respostas não são mais permitidas