Criando um formulário com ExtJs e ASP NET MVC 3

Quando foi lançado o ASP NET MVC 3, também foi lançado uma view engine chamado Razor, mas para aqueles que querem usar outra forma de criar as views lhe apresento o ExtJs. EXT JS é um framework escrito em JavaScript que tem a finalidade de auxiliar na criação de interfaces mais amigáveis para os usuários.

Hoje vamos ver como criar um formulário usando o EXT JS e integrar com o ASP NET MVC 3,  ou seja, quando o cliente clicar no botão Salvar no EXT vamos submeter os dados para um controller do ASP NET MVC, mãos a obra!

1 – Download do EXT JS

Primeiro de tudo temos que baixar o EXT JS, depois descompactar o arquivo em um local de sua preferência. Aproveite para ver seus exemplos e estrutura de pastas.

2 – Criando o projeto

Abra o Visual Studio 2010 e crie um novo projeto do tipo ASP NET MVC 3

Selecione Internet Application e a view engine Razor, em nosso caso isso não fará diferença já que vamos usar EXT JS

Depois devemos incluir nesse projeto as referências para o EXT, conforme a figura abaixo

Agora vamos criar um novo controller

Coloque o nome de PessoaController

Adicione uma view para a action Index, clique com o botão direito sobre a action Index e selecione Add View

Agora vamos criar uma nova action chamado SalvarDados que vai receber os dados que viram do nosso formulário Ext

[sourcecode language=”csharp”]
public JsonResult SalvarDados(string first, string last, string company, string email)
{
try
{
// implementar o save com Entity Framework / NHibernate
return Json(new { success = true });
}
catch(Exception ex)
{
return Json(new { success = false, message = ex.Message});
}
}
[/sourcecode]

Veja que esse artigo não estamos abordando a forma de gravar essas informações no banco

Agora vamos para a part do ExtJs, em nossa página Pessoa->Index.cshtml temos que adicionar as referências para as bibliotecas JS e CSS do Ext

[sourcecode language=”html”]
<link rel="stylesheet" type="text/css" href="../../ext-3.2.1/resources/css/ext-all.css"/>
<script type="text/javascript" src="../../ext-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-3.2.1/ext-all.js"></script>
[/sourcecode]

Agora vamos crirar o formulário

[sourcecode language=”js”]
<script type="text/javascript">

Ext.onReady(function () {

Ext.QuickTips.init();

// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = ‘side’;

var simpleForm = new Ext.FormPanel({
collapsible: true,
frame: true,
title: ‘Add People’,
bodyStyle: ‘padding:5px 5px 0’,
width: 350,
renderTo: ‘form’,
defaultType: ‘textfield’,

items: [{
fieldLabel: ‘First Name’,
name: ‘first’,
id: ‘first’,
allowBlank: false,
blankText: "field first name is required"
}, {
fieldLabel: ‘Last Name’,
name: ‘last’,
id: ‘last’,
allowBlank: false,
blankText: "field last name is required"
}, {
fieldLabel: ‘Company’,
name: ‘company’,
id: ‘company’,
allowBlank: false,
blankText: "field company is required"
}, {
fieldLabel: ‘Email’,
name: ‘email’,
id: ‘email’,
vtype: ‘email’,
vtypeText: "field email is invalid",
allowBlank: false,
blankText: "field email is required"
}
],
buttons: [{
text: ‘Save’,
handler: function () {
if (simpleForm.getForm().isValid()) {

simpleForm.getForm().submit({
url: ‘@Url.Content("~/Pessoa/SalvarDados")’,
method: ‘POST’,
waitMsg: ‘Por favor, aguarde…’,
success: function (form, action) {
if (action.result.success) {
Ext.Msg.show({
title: ‘Sucesso’,
msg: ‘Dados cadastrados com sucesso’,
buttons: Ext.Msg.OK
});
Ext.get("first").focus();
}
},
failure: function (form, action) {
switch (action.failureType) {
case Ext.form.Action.CLIENT_INVALID:
Ext.Msg.alert(‘Failure’, ‘Form fields may not be submitted with invalid values’);
break;
case Ext.form.Action.CONNECT_FAILURE:
Ext.Msg.alert(‘Failure’, ‘Ajax communication failed’);
break;
case Ext.form.Action.SERVER_INVALID:
Ext.Msg.alert(‘Failure’, action.result.message);
}
}
});
}
}
}, {
text: ‘Clear’,
handler: function () {
simpleForm.getForm().reset();
Ext.get("first").focus();
}
}]
});
});
</script>
[/sourcecode]

Explicando o código

Linha 3: Todo código do Ext tem que ficar dentro da função onReady

Linha 5: Inicializar os tools tips, mensagens de ajuda quando passa o mouse, usado na validação dos campos

Linha 8: Local onde será renderizado as mensagens de erro na validação do formulário, faça um teste alterando para “under”

Linha 10: Criamos um objeto do tipo FormPanel

Linha 11: Define que o panel poderá ser minimizado

Linha 12: O comportalmento do form será como um frame

Linha 13: Título do formulário

Linha 14: Estilo da borda

Linha 15: Tamanho do formulário

Linha 16: Local onde o formulário será renderizado, nesse caso é uma div chamada form

Linha 17: Tipo dos campos como default, nesse caso será text box

Linha 19: Adicionar os items do formulário

Linha 20: Label do campo

Linha 21: Nome do campo

Linha 22: Id do campo

Linha 23: Define se o campo pode ficar em branco, ou seja, se o campo é obrigatório

Linha 24: Mensagem de erro para a validação da linha 23

Linha 47: Temos os botões do formulário

Linha 48: Texto do botão

Linha 49: Definimos um handler para o botão, esse evento ocorre quando clicamos no botão

Linha 50: Verificamos se o formulário é válido

Linha 52: Evento submit do formulário

Linha 53: Vamos chamar nosso método SalvarDados que está no controller

Linha 54: Method que será usado para enviar os dados

Linha 55: Mensagem que aparecerá para o usuário enquanto salva os dados no banco

Linha 56: Se o retorno do controller for com sucesso  (true)

Linha 57: Verificamos a variável sucess que criamos no controller é true

Linha 58: Exibimos uma mensagem

Linha 63: Direcionamos o focus para o primeiro campo do formulário

Linha 66: Se o retorno do controller for com erros (false, exception)

Linha 67: Verificamos o tipo do erro e exibimos uma mensagem com erro

Linha 82: Temos outro botão com o texto Clear

Linha 83: Evento de clique do botão

Execute o projeto e veja o resultado abaixo:

Conclusão

Como já comentei em outros posts sobre ExtJs, no começo a sintax é bem chata e um pouco difícil de entender, mas depois de algumas telas feitas já é possível ter um produtividade muito boa

O que me impressiona com o Ext, é ter a opção de criar uma interface mais limpa, fácil entendimento e bonita para o usuário.

Download do projeto

Qualquer dúvida, opinião, reclamação mande seu comentário!

Aquele Abraço!

Sobre Leandro Prado

Leandro Silveira Prado é Premier Field Engineer na Microsoft especializado em Application Lifecycle Management.