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

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});
    }
}

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

<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>

Agora vamos crirar o formulário

<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>

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!

Leia mais

• CRUD usando ExtJs e ASP NET MVC 3
• Top 10 Posts de 2011
• Usando ExtJs GridPanel com ASP NET MVC 3
• Novidades do Visual Studio 11
• Componentes Telerik para ASP NET MVC
• ASP NET MVC 3 com Entity Framework Code First
• Formatar data na Ext.grid.GridPanel usando ASP NET MVC
• Usando WebImage com ASP NET MVC 3
• Usando WebMail com ASP NET MVC 3
• Usando WebGrid com ASP NET MVC 3