ASP NET MVC + NHibernate + ExtJs – Parte 7

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:

[sourcecode language=”js”]
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’
}]
});

});
[/sourcecode]

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:

[sourcecode language=”js”]
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();
}
}]
});
});
[/sourcecode]

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

[sourcecode language=”js”]
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();
}
});
}
[/sourcecode]

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:

[sourcecode language=”csharp”]

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 });
}
}
[/sourcecode]

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.

[sourcecode language=”js”]
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’
}]
});
[/sourcecode]

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:

[sourcecode language=”js”]
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*/
}, ‘-‘]
});
[/sourcecode]

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.

[sourcecode language=”js”]
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);
}
});
}
}
});
[/sourcecode]

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.

[sourcecode language=”js”]
Ext.getCmp(‘txtDescricao’).setValue(_desc);
[/sourcecode]

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

[sourcecode language=”js”]
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();
}
});
}
[/sourcecode]

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

[sourcecode language=”csharp”]
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 });
}
}
[/sourcecode]

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:

[sourcecode language=”js”]
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’);
}
});
}
[/sourcecode]

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

[sourcecode language=”csharp”]
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 });
}
}
[/sourcecode]

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!

Sobre Leandro Prado

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