ASP NET MVC + NHibernate + ExtJs – Parte 7

Criado por
Leandro Prado
em 27 de setembro de 2010Postado em: ASP NET MVC 2, EXTJS, NHibernate

Vamos continuar a criar a nossa tela de cadastro para  a entidade Tipo Telefone, no post anterior criamos uma Grid para mostrar os dados, hoje vamos estar terminando a tela para Editar e Criar um novo registro.

Cadastrar

Abra o arquivo Create.ascx e vamos criar o formulário, veja abaixo o código:

Ext.onReady(function() {

    var painel = new Ext.form.FormPanel({
        id: 'painel',
        name: 'painel',
        renderTo: 'create',
        items: [{
            xtype: 'textfield',
            allowBlank: false,
            name: 'txtDescricao',
            id: 'txtDescricao',
            fieldLabel: 'Descrição'
        }],
        buttonAlign: 'center',
        buttons: [{
            //btnSalvar
            name: 'btnSalvar',
            id: 'btnSalvar',
            text: 'Salvar',
            iconCls: 'icon-save'
        }, {
            //btnFechar
            name: 'btnFechar',
            id: 'btnFechar',
            text: 'Fechar',
            iconCls: 'icon-cancel'
        }]
    });

});

Veja o resultado da nossa tela:

Agora vamos adicionar os eventos para os boões Salvar e Fechar, em cada botão temos um evento chamado Handler que é executado quando o usuário clica no botão, veja o código abaixo:

Ext.onReady(function() {

    var painel = new Ext.form.FormPanel({
        id: 'painel',
        name: 'painel',
        renderTo: 'create',
        items: [{
            xtype: 'textfield',
            allowBlank: false,
            name: 'txtDescricao',
            id: 'txtDescricao',
            fieldLabel: 'Descrição'
        }],
        buttonAlign: 'center',
        buttons: [{
            //btnSalvar
            name: 'btnSalvar',
            id: 'btnSalvar',
            text: 'Salvar',
            iconCls: 'icon-save',
            handler: function() {
                // recuperamos o que o usuário digitou
                var desc = Ext.getCmp('txtDescricao').getValue();

                // verificamos se a variavel global _cod
                // se for igual a null é um novo registro
                // senao é um registro para alterar
                if (_cod == null || _cod == undefined) {
                    // chamamos a funcao para cadastrar
                    CadastrarRegistro(desc);
                } else {
                    // chamamos a funcao para alterar
                    AlterarRegistro(_cod, desc);
                }
            }
        }, {
            //btnFechar
            name: 'btnFechar',
            id: 'btnFechar',
            text: 'Fechar',
            iconCls: 'icon-cancel',
            handler: function() {
                // fechamos o formulario
                Ext.getCmp('formNovoRegistro').close();
            }
        }]
    });
});

Agora vamos criar a função CadastrarRegistro, veja abaixo:

function CadastrarRegistro(paramDesc)
{
    Ext.Ajax.request(
	{
	    url: '/TipoTelefone/Cadastrar',
	    params:
			{
			    descricao: paramDesc
			},
		success: function() {
	        // atualizamos nosso store
	        Ext.getCmp('gridTipoTelefone').getStore().load();

	        //exibir uma mensagem para o usuario
	        Ext.Msg.show({
	            title: 'Sucesso',
	            msg: 'Dados cadastrados com sucesso',
	            buttons: Ext.Msg.OK,
	            icon: 'msg-success'
	        });

	        // fechamos o formulario
	        Ext.getCmp('formNovoRegistro').close();
	    }
	});
}

Nessa função vai ser responsável por cadastrar os novos registros, vamos chamar uma action do nosso controller chamado Cadastrar que vai chamar nosso repositório para persistir os dados no banco, abra o arquivo TipoTelefoneController.cs e adicione mais uma action chamada Cadastrar, veja abaixo:


public JsonResult Cadastrar(string descricao)
{
        try
        {
            TipoTelefone tipoTelefone = new TipoTelefone();
            tipoTelefone.Descricao = descricao;
            _tipoTelefoneRepository.Salvar(tipoTelefone);
            return Json(new { success = true });
        }
        catch (Exception e)
        {
            return Json(new { success = false, e.Message, e.StackTrace });
        }
}

Veja o resultado:

Veja que quando você cadastra um registro, automaticamente a grid ja é atualizada

Alterar

Para fazer a ação de alterar vamos adicionar um botão para cada registro na Grid, vamos estar usando um plugin chamado RowActions.js que pode ser baixado aqui, veja abaixo como criar esse botão.

var botaoGridEditar = new Ext.ux.grid.RowActions({
    dataIndex: '',
    header: '',
    align: 'center',
    actions: [{
        iconCls: 'icon-edit',
        tooltip: 'Editar Registro'
    }]
});

var botaoGridExcluir = new Ext.ux.grid.RowActions({
    dataIndex: '',
    header: '',
    align: 'center',
    actions: [{
        iconCls: 'icon-del',
        tooltip: 'Excluir Registro'
    }]
});

Depois de criado os botões, temos que adiciona-los na Grid, no componente GridPanel temos uma propriedade chamada plugins aonde devemos adicionar nossos botões criados, após temos que adicionar como colunas, veja o código da Grid abaixo:

var gridTipoTelefone = new Ext.grid.GridPanel({
        id: 'gridTipoTelefone',
        name:'gridTipoTelefone',
        store: tipoTelefoneStore,
        title: 'Tipo Telefone',
        width: 500,
        height: 300,
        renderTo: 'div_grid',
        loadMask: true,
        border: true,
        stripeRows: true,
        plugins: [botaoGridEditar, botaoGridExcluir],
        columns: [
            botaoGridEditar,
            botaoGridExcluir,
            {
                dataIndex: 'Codigo',
                header: 'Código',
                width: 60
            }, {
                dataIndex: 'Descricao',
                header: 'Descrição',
                width: 380
            }],
        tbar: [{
                text: 'Novo',
                iconCls: 'icon-new',
                handler: novoRegistro /* aqui adicionamos o envento ao botão*/
            }, '-']
    });

Execute o projeto e veja o resultado:

Depois de criado os botões temos que adicionar os eventos para cada um deles, vamos adicionar uma propriedade Callback que será executado quando o cliente clicar no botão, veja abaixo como vai ficar cada botão.

var botaoGridEditar = new Ext.ux.grid.RowActions({
        dataIndex: '',
        header: '',
        align: 'center',
        actions: [{
            iconCls: 'icon-edit',
            tooltip: 'Editar Registro'
        }],
        callbacks: {
                'icon-edit': function(grid, record, action, row, col) {

                    // recuperamos os dados da linha selecionada
                    _cod = gridTipoTelefone.getStore().getAt(row).get('Codigo');
                    _desc = gridTipoTelefone.getStore().getAt(row).get('Descricao');

                    // mostramos o formulário
                    MostrarFormulario();
                }
        }
 });

var botaoGridExcluir = new Ext.ux.grid.RowActions({
        dataIndex: '',
        header: '',
        align: 'center',
        actions: [{
             iconCls: 'icon-del',
             tooltip: 'Excluir Registro'
        }],
        callbacks: {
                'icon-del': function(grid, record, action, row, col) {
                        _cod = gridTipoTelefone.getStore().getAt(row).get('Codigo');

                        Ext.MessageBox.show({
                            title: 'Mensagem',
                            msg: 'Tem certeza que deseja deletar esse registro?',
                            buttons: Ext.MessageBox.OKCANCEL,
                            icon: Ext.MessageBox.QUESTION,
                            fn: function(btn) {
                                if (btn == 'ok')
                                    DeletarRegistro(_cod);
                            }
                        });
                }
        }
});

Veja que no callback do botão editar estamos chamando a função MostrarFormulario que vai abrir a popup com os dados preenchidos. Vamos abrir o arquivo Create.ascx e alterar para mostar os dados para editar.

Ext.getCmp('txtDescricao').setValue(_desc);

Agora vamos criar a função AlterarRegistro, veja abaixo o código:

function AlterarRegistro(paramId,paramDesc)
{
    Ext.Ajax.request(
	{
	    url: '/TipoTelefone/Alterar',
	    params:
			{
			    id: paramId,
			    descricao: paramDesc
			},
	    success: function() {
	        Ext.getCmp('gridTipoTelefone').getStore().load();

	        Ext.Msg.show({
	            title: 'Sucesso',
	            msg: 'Dados alterados com sucesso',
	            buttons: Ext.Msg.OK,
	            icon: 'msg-success'
	        });

	        Ext.getCmp('formNovoRegistro').close();
	    }
	});
}

Veja que estamos chamando uma action Alterar, abra o controller TipoTelefoneController e adicione uma nova action chamada Alterar, veja abaixo.

public JsonResult Alterar(string id, string descricao)
{
        try
        {
            TipoTelefone tipoTelefone = _tipoTelefoneRepository.ObterPorId(Convert.ToInt32(id));
            tipoTelefone.Descricao = descricao;
            _tipoTelefoneRepository.Alterar(tipoTelefone);
            return Json(new { success = true });
        }
        catch (Exception e)
        {
           return Json(new { success = false, e.Message, e.StackTrace });
        }
}

Execute o projeto e veja o resultado.

Veja que a grid se atualizou automaticamente.

Excluir

Veja que no callback do botão excluir chamamos outra função para deletar o registro, veja abaixo:

function DeletarRegistro(id) {
    Ext.Ajax.request(
    {
        url: '/TipoTelefone/Deletar',
        params:
        {
            id: id
        },
        success: function(result) {
            //recupera o result
            jsonData = Ext.util.JSON.decode(result.responseText);
            if (jsonData.success) {
                Ext.getCmp('gridTipoTelefone').getStore().load();
                Ext.Msg.show({
                    title: 'Sucesso',
                    msg: 'Dados excluídos com sucesso',
                    buttons: Ext.Msg.OK,
                    icon: 'msg-success'
                });
            }
            else {
                Ext.Msg.show({
                    title: 'Erro',
                    msg: jsonData.message,
                    buttons: Ext.Msg.OK,
                    icon: 'msg-error'
                });
            }
        },
        failure: function() {
            Ext.Msg.alert('Falha na conexão', 'Houve uma falha ao conectar com o servidor');
        }
    });
}

Agora vamo criar a action no nosso controller TipoTelefoneController, veja abaixo:

public JsonResult Deletar(string id)
{
       try
       {
            TipoTelefone tipoTelefone = _tipoTelefoneRepository.ObterPorId(Convert.ToInt32(id));
            _tipoTelefoneRepository.Excluir(tipoTelefone);
            return Json(new { success = true });
        }
       catch (Exception e)
       {
           return Json(new { success = false, message = e.Message, stack = e.StackTrace });
       }
}

Vamos executar nosso projeto e ver o resultado:

Se o cliente confirmar a exclusão, chamamos nossa action para deletar, veja que quando deletamos o registro já atualizamos a grid.

Chegamos ao final da série de posts para estar criando uma arquitetura usando EXT JS com ASP NET MVC e persistindo os objetos com NHibernate.

Se você quiser proseguir com o exemplo criando as outras telas, poderá seguir esse exemplo que não terá maiores problemas.

Qualquer dúvida deixe seu comentário abaixo!

Espero que esse pequeno tutorial divido em 7 partes tenha ajudado a entender como trabalhar com esses frameworks integrado como .NET

Download Parte 7 – Final

Até a próxima!

Leia mais

Tags: , ,

Sobre Leandro Prado

Leandro Silveira Prado é graduado em Sistemas de Informação pela PUC-PR, trabalho com desenvolvimento WEB desde 2003. Possui uma vasta experiência em integração de sistemas ja prestou serviços a grandes empresas como FBits Fábrica de Software, Instituto Curitiba de Informática, América Latina Logística e atualmente trabalha como Consultor ALM na especificações.com. Fanático por futebol e torcedor do melhor time do paraná - COXA