Validação ASP.NET MVC com Globalização

Olá a todos,

Utilizando o ASP.NET MVC temos várias tarefas primárias feitas “automaticamente” para nós, entre elas, a questão de validação de dados: campos obrigatórios, formatos de dados e etc.

Entretanto, podemos encontrar dificuldade em alguns pontos da validação. Enquanto no Brasil o formato para uma data é dia/mês/ano, nos EUA já temos o formato mês/dia/ano.

Nos números também temos diferenças. 100,25 é um número válido para nós Brasileiros, mas não na cultura americana.

Continuar lendo

JQuery Datatables e ASP.NET MVC – Duas abordagens

Olá a todos,

Após quase 2 anos desenvolvendo em PHP, retorno ao continente Microsoft, no país .NET, numa cidadezinha com o nome de ASP.NET, na rua C#.

De agora em diante, espero fazer publicações relacionadas a essa tecnologia. Não guardo rancor contra o PHP, o problema sou eu, não ele, me entende? Quero o melhor para o PHP, por isso preciso me afastar (papo aleatório para dar um FORA).

Pra começar a brincadeira, que falar sobre Datatables e ASP.NET MVC! Separei duas abordagens para vocês, ilustres visitantes.

Código fonte para acompanhar o artigo.

Continuar lendo

A Torre Negra: O Pistoleiro

pistoleiro

Recentemente, comprei a coleção completa da Torre Negra no Submarino e comecei minha viagem junto com Roland, o pistoleiro, em busca de nossa Torre Negra.

Apesar de minha capacidade limitada de interpretação de textos, foi uma leitura agradável, fluída, sem distrações e com vontade de ler mais e mais a cada parágrafo. Fiquei preso ao texto e quando parava de ler, ficava pensando “o que acontecerá com Roland mais a frente?”.

Em minha opinião, o livro equilibrou muito bem aventura, descrição de cenários, construção de personagens e seus relacionamentos. Ao final de “O Pistoleiro” ocorreu um fato que me deixou bem chateado com a história, mas isso é um fato pessoal, algo que com certeza vai incomodar quem está acostumado com finais felizes.

Todos os personagens apresentados na história são explorados, uns mais, outros menos, mas sempre com um início, meio e fim (não de forma linear, pois o livro vai e volta no tempo para contar alguns pedaços da história).

Recomendo a leitura! É uma escrita muito superior e complexa ao que eu estava acostumado, mas fica muito longe de ser chato.

Agora com licença, quero ler A Escolha dos Três.

JQuery UI – Dialog (bug ou feature?)

Fala galera da Dev,

Passei um apuro com o JQuery Dialog recentemente e resolvi compartilhar o problema (ou talvez feature mal documentada) com vocês.

Eu tinha um HTML da seguinte maneira (simplificado):

<html>
<body>
<form> <div id=’dialog’> … </div></form>
</body>
</html>

E precisava usar uma função de validação que checaria todos os inputs dentro da tag FORM. Com a minha marcação acima, tudo perfeito, certo? A div ESTÁ dentro do formulário, quando eu for validar, tudo que estiver na dialog também será validado, correto?

Errado.

Quando chamamos a dialog, o conteúdo é extraído do seu container original (no caso, do form).

Quer confirmar? Veja o seguinte:

<!doctype html>
<html lang="us">
<head>
	<meta charset="utf-8">
	<title>Testes</title>
	<link href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet">
	<script src="js/jquery-1.9.1.js"></script>
	<script src="js/jquery-ui-1.10.3.custom.js"></script>
	<script>

		var modal = null;

		$(function(){

			$("#btnModal").click(function(){

				modal = $("#modal").dialog({
					modal: true
				});

			});

		});

	</script>
	<style>
		body
		{
			font-family: sans-serif;
		}

		#container h2
		{
			color: #467;
			font-size: 55px;
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="modal">
			GIMME FIRE <br />
			GIMME THAT WHICH I <br />
			<h2>DESIRE</h2>
		</div>
	</div>

	<input type="button" id='btnModal' value='GIMME FUEL' />

</body>
</html>

Visualização:

a1Visualização com o Firebug:

a2

Até ai, tudo lindo. Contemplem como tudo fica após a invocação da dialog:

a3

Notaram que o html sumiu e foi para a dialog? Inclusive o “DESIRE” perdeu a formatação. Pois é… Não foi só isso que aconteceu nos bastidores:

a4

Nossa div foi movida para fora do “container”, causando a perda da formatação.

Soluções

  • Faça com que a div contenha tudo que você precisa
  • Chore no bugtracker do JQuery UI

No meu problema, a solução foi simples. Bastou colocar o form dentro da dialog, para que o formulário fosse transportado junto com a dialog no momento do chamado:

<html>
<body>
<div id=’dialog’><form>  … </form></div>
</body>
</html>

Não é bonito, mas resolve!

Dúvidas? Sugestões? Deixem nos comentários!

Javascript – Máscara para nono dígito de celular

Boa noite,

Recentemente enfrentei um problema interessante no trabalho. Foi necessário programar uma máscara com o nono dígito opcional para celulares de São Paulo que contivessem o dígito “9”.

Por exemplos, o campo deveria aceitar (e exibir com uma formatação agradável visualmente) os seguintes valores:

8391-7788

98391-7788

Foi necessário um pouco de javascript para atender a necessidade, deixo abaixo o código (usando JQuery e JQuery Masked Input) que usamos para resolver o problema:

		<script>

			//acrescenta à classe string um método necessário para facilitar
			String.prototype.splice = function( idx, rem, s ) {
				return (this.slice(0,idx) + s + this.slice(idx + Math.abs(rem)));
			};

			$(function(){

				//máscara inicial com o nono digito opcional
				$("#txtCel").mask('9999-9999?9');

				//ao sair do campo, vamos atualizar a máscara
				$("#txtCel").focusout(function(){

					//pegando apenas os digitos
					var cel = $("#txtCel").val().replace('-','').replace(/_/g,'');

					//se tiver 8 digitos
					if(cel.length == 8)
					{
						//vamos colocar o '-' no meio
						cel = cel.splice(4, 0, '-');
						//seta a máscara para aceitar o nono digito
						$("#txtCel").mask('9999-9999?9');
					}
					//caso contrário
					else if(cel.length == 9)
					{
						//deixamos 5 digitos na esquerda
						cel = cel.splice(5,0, '-');
						//seta a máscara para aceitar um digito a menos (caso tenha digitado errado)
						$("#txtCel").mask('99999-999?9');
					}

					//põem o valor no campo
					$(this).val(cel);

				});

			});
		</script>

Fecha a régua e passa a conta! (ou algo assim)