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

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)

Twitter Bootstrap e Jquery UI (rapidinha I)

Fala Galera!

Uma dica rapidinha sobre JQuery UI em conjunto com Twitter Bootstrap:

A inclusão dos JS’s devem ser feitos nessa ordem:

<script type=”text/javascript” src=”Scripts/bootstrap.js”></script>
<script type=”text/javascript” src=”Scripts/jquery-ui-1.10.3.custom.js”></script>

Caso contrário, algumas widgets do JQuery UI podem ter o funcionamento comprometido (como o DIALOG).

Valeu!

Vantagens com HTML5 – Custom Data Attributes

HTML5_Logo_256

Ainda não são todos os browsers que interpretam corretamente todas as especificações do HTML5, mas podemos usar algumas idéias em nossos códigos e designs atuais para facilitar nossas vidas.

Por exemplo, o uso de Custom Data Attributes (Atributos de dados customizados, em tradução livre) pode auxiliar a guardar dados em elementos DOM. Este será o foco do artigo.

Continuar lendo

Comunicação e interação entre janelas com Javascript

Fala galera!

Sumi por uns tempos devido a provas na faculdade e um super projeto que demos o sangue pra terminar no prazo.

Some isso a mais algumas aulinhas de CFC (9, cada uma de 5 horas) e desconte o que sobrar do meu banco de horas como blogueiro. =D

Na execução do projeto, precisávamos fazer com que duas janelas de HTML comunicassem uma com a outra. Depois de pensar um pouco, arranjei uma solução.

É só fazer uma janela acessar a outra! Veja como fiz.