Formulário master detail com ASP NET MVC e JQuery

Criado por
Leandro Prado
em 23 de novembro de 2010Postado em: ASP NET MVC 2

Quando estamos criando um sistema, geralmente nos deparamos com alguma nescessidade de criar telas onde temos uma relação entre as entidades de um para muitos, pense em um cenário onde temos uma pessoa que possui muitos telefones, ou uma pessoa que possui vários documentos, e queremos salvar os registros em apenas uma tela.

Quando estamos trabalhando com WebForms esse cenário é bem simples de implementar, basta usar os componentes do ASP .NET com uma GridView, agora quando estamos trabalhando com ASP NET MVC que não temos componentes prontos, temos que trabalhar somente com HTML e JavaScript, como podemos fazer?

Um dos problemas que encontramos foi como enviar esses dados do formulário para o controller? Depois de algumas discusões via “MSN”, a solução que encontramos foi enviar os dados via JSON, e esse post tem esse objetivo criar um formulário simples para exemplificar essa solução.

1) Criando os Models

Primeiro de tudo vamos criar os Models Pessoa e Telefone, veja abaixo:

PessoaModel.cs

Veja que criamos uma lista de Telefones

[sourcecode language=”csharp”]
public class PessoaModel
{
public int Id { get; set; }
public string Nome { get; set; }
public List<TelefoneModel> Telefones { get; set; }
}
[/sourcecode]

TelefoneModel.cs

[sourcecode language=”csharp”]
public class TelefoneModel
{
public int Id { get; set; }
public string Telefone { get; set; }
}
[/sourcecode]

2) Criando o Controller

Agora vamos criar um novo controller chamado PessoaController e adicionar uma action Index que vai retornar uma View e outra  Save que será responsável por receber o JSON e mandar persistir no BD.

PessoaController.cs

[sourcecode language=”csharp”]
public class PessoaController : Controller
{
public ActionResult Index()
{
return View();
}

public ActionResult Save(string Items)
{
PessoaModel model = JsonConvert.DeserializeObject<PessoaModel>(Items);

if (model != null)
return Json(true);
else
return Json(false);
}
}
[/sourcecode]

Linha 10: Estamos usando um biblioteca Json.NET para serve para serealizar e desearializar objetos JSON, nesse caso nosso método Save recebe uma string que contém nosso objeto no formato JSON e deserealiza convertendo em uma list.

3) Criando a View

Primeiro de tudo vamos criar um função em javascript para adicionar os telefones em uma pequeno array.

[sourcecode language=”js”]
var Items = new Object();
Items.Telefones = new Array();

function adicionar() {
var var_id = $("#TelefoneId").val();
var var_telefone = $("#TelefoneNumero").val();

Items.Telefones.push(new Object({ Id: var_id, Telefone: var_telefone }));

$("#resultado").empty();
$(Items.Telefones).each(function () {
$("#resultado").append(this.Id + " -" + this.Telefone + "<br>");
});
}
[/sourcecode]

Linha 8: Veja que os nomes dos campos deve ser exatamente igual ao nosso Model (PessoaModel e TelefoneModel)

Vamos criar outra função para salvar nossos dados, tanto da pessoa quanto os telefones.

[sourcecode language=”js”]
function salvar() {

var var_id = $("#Id").val();
var var_nome = $("#Nome").val();

Items.Id = var_id;
Items.Nome = var_nome;

var dados = $.toJSON(Items);

alert(dados);

//Posting them to server with ajax
$.ajax({
url: ‘<%=Url.Content("~/Pessoa/Save") %>’,
data: { Items: dados },
dataType: ‘json’,
type: ‘POST’,
success: function (result) {
if (result) {
alert(‘success’);
}
else {
alert(‘Failure’);
}
}
});
}
[/sourcecode]

Linha 9: Aqui estamos usando outra biblioteca JSON.js que converte nosso array em JSON, para mais detalhes acesse essa página JSON in JavaScript.

4) Testes

Agora vamos executar nosso projeto e ver se nossos dados está chegando ao nosso controller.

Conteúdo do Json enviado para o controller

Veja nosso objeto Pessoa preenchido

Download do projeto

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

Um Abraço!

ATUALIZAÇÃO – 14/Outubro/2011

Pessoal,

Como vocês podem ver nos comentários abaixo, o Belintani desenvolveu alguns exemplos de como implementar o master details de forma diferente, que podem ser baixados nos links abaixo:

Exemplo1 – MVC + ASPX
Exemplo2 – MVC + Razor
Exemplo3 – JavascriptSolution
Exemplo4 – ModalSolution

Tags: , , ,

Sobre Leandro Prado

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