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
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
Ótimo artigo, Leandro.
Bom dia Leandro.
Como eu faria este exemplo persistindo no banco?
o que teria que mudar neste exemplo?
PS. Sou iniciante .
Mariel,
Você terá que implementar uma camada para acessar sua base de dados, você poderá usar o Entity Framework veja nesse artigo CRUD com Entity Framework
att,
Leandro Prado
Boa Noite Lenadro,
Eu fiz este exemplo que voce postou mais não entendi como fazer com o outro exemplo do crud.
Mariel,
O que vc tem de dúvida? Qual erro esta dando?
Seguindo o tutorial que passei, vc consegue criar um contexto com o EntityFramework e persistir seus dados no BD
att,
Leandro Prado
Desculpe Leandro, me expressei mal.
Seguinte, eu fiz o tutorial do CRUD blzinha, eu queria entende de como aplicar este de master-detalhe nesta estrutura do CRUD.
Leandro, não teria como fazer este exemplo de master-detalhe com “asp net mvc e EF4”?
Mariel,
No momento estou sem tempo de fazer um novo exemplo…
Qual erro esta ocorrendo? Post seu código que eu vou ajudando..
att,
Leandro Prado
Boa Tarde Leandro.
Eu peguei este exemplo de master-detalhe, apaguei os Models, “PessoaModel” e “TelefoneModel”, e creiei na minha pasta Model um edmx com duas tabelas pessoa e telefone, so que dai não consigo dar continuidade o que eu deveria alterar na minha classe controller e na minha view?
Att,
Mariel
Bom dia.
Encontrei esta solução para o mestre detalhe, mas me pergunto como fazer para utilizar os detalhes dentro de uma tabela (grid), usando apenas controles do Razor.
Grato
Anderson
Anderson
O que dá para fazer é criar um Helper que vai ser o seu detalhe (grid) e acessar essas informações via JQuery
Somente com Razor, vai ser dificil,, tem que usar JQuery!
att,
Leandro Prado
Olá Leandro,
Encontrei seu blog por acaso, e claro, sei que o post é bem antigo. Porém acho que entendi o que o Anderson procurava, algo que ele pudesse adicionar itens na lista, sem ficar preso à manipulação de seu dados por javascript. Pois ficar dando .append(“…etc”) é chato mesmo, e bastante vulnerável a erros.
Tomei a liberdade de baixar seu projeto e modifica-lo um pouco, adicionei uma lista de endereços, que é carregada por um ViewUserControl.
Inclusive, deleguei a responsabilidade de adicionar o novo item na Controller, para poder gerar suas próprias validações (como no exemplo que fiz, ele não aceita 2 endereços idênticos)
Disponibilizei o projeto no link abaixo:
http://www.megaupload.com/?d=YLT8E7XQ
Ficarei feliz se ler este comentário, olhar o projeto e me der um feedback, certamente você tem conhecimento/experiência de sobra pra ajudar a tornar meu trabalho cada dia melhor.
Abraço,
Belintani
Belintani,
Muito bom !!!! Parabéns pela iniciativa…
Esse é o proposito do blog, fazer com que a comunidade ajude a fazer a melhor solução!!!
Parabéns novamente!!
att,
Leandro Prado
Bom dia.
Interessante a implementação, porém o projeto esta usando AspNet para montar as paginas e meu questionamento é para o Razor.
vou tentar usar a abordagem do asp. Se tiver resultado retorno aqui.
Grato
Anderson
Anderson,
Essa abordagem da certo com o Razor, é somente tem que mudar a forma que a pagina é criada..
att,
Leandro Prado
Anderson,
Modifiquei o projeto, criando-o em asp mvc 3 utilizando Razor.
Como o Leandro Prado comentou, a abordagem é exatamente a mesma, tanto que só mudei as Views.
Segue abaixo link para o projeto. (Sei que parece besteira ficar passando o projeto, mas acho interessante exemplificar para quem está começando, e passar aqui a partir de uma busca do Sr. Google.)
http://www.megaupload.com/?d=4DN27QOQ
Cordial abraço,
Belintani
Belintani,
Que maravilha hem!!!! agora eu botei fé!! ehhehehe!!
Mais uma vez parabéns pela iniciativa!!!
Att,
Leandro Prado
Opa. Não Acho besteira passar o projeto, acredito que seja maté de muito bom tom. Estou analisando a solução pra ver como implementar. O problema é que o cliente as veses insiste em ter na web uma abordagem que seria mais voltada para desktop. Como o mestre detalhe onde se clica no detalhe para editar e coisa do genero… é dinamico mas não muito pratico em web 🙂 Valew pela força.
Salve Anderson,
Vou escrever bastante agora, mas te garanto, vale apena ler até o fim e baixar os projetos.
Quero ver você atingir seus objetivos, e para tal, elaborei pra ti duas soluções.
A primeira solução eu utilizei javascript puro, até que ficou legal, da pra simular a tal “interface” desktop que teu cliente deseja (claro, não tive muito tempo, então provavelmente à falhas a serem corrigidas, ideias a serem aprimoradas). Problema, perdeu todo o sentido daquilo que insisti na minhas primeiras respostas. Mesmo assim, o projeto pode ser encontrado no link abaixo:
http://www.megaupload.com/?d=KXKPB035
Agora, se você quer uma solução legal, eu particularmente costumo utiliza-la (claro, reforçando, pela falta de tempo, os exemplos estão bem simples, é apenas para você ter uma base), esta solução se resume em utilizar modais para inserir tais registros. Nesse cenário, podemos continuar utilizando as validações na controller, e muito menos código javascript é escrito. Não tenho nenhum preconceito com Javascript, pelo contrário, acho ele extremamente importante, a questão é que em projetos, javascript nas mãos erradas, é uma fábrica de não conformidades no produto, além da sua complexidade para manutenção.
segue abaixo o link para o segundo projeto (eu recomendo esse, com certeza, mas veja o outro, pelo menos para fim de conhecimento):
http://www.megaupload.com/?d=UWR2V1LP
E ai claro, se seu cliente é daqueles cheios de paradigmas, e ele insistir que tem que usar esse tipo de interface, acho besteira migrar para o ASP MVC, é preferível trabalhar com o webforms. (eu recomendaria o extjs, tem boas interfaces, mas ainda acho ele muito chato de trabalhar, mais que o webforms… rsrsrs)
Leandro Prado,
Desculpe o “spam de comentários” no seu blog…
Abraço pessoal,
Belintani
Belinati,
Fique traquilo pelo “span” sempre é bom trocar idéias com outros devs..
Já adicionei seus exemplos no post..
até ++
Leandro Prado
Bom dia não estou conseguindo acessar seu link
Mas baH!
Isto motiva o cara com certeza. 🙂 Estou consumindo os exemplos hehe.
Olá, estou montando um projeto em asp.net mvc com topo e item e estou muito interessado nos exemplos citados, mas como todos foram postados no megaupload, não tem como acessar, estou interessado no exemplo do projeto com as validações do controle que Belintani postou… desde já Obrigado.
Desculpe, o exemplo esta no topo do post, obrigado pessoal..
levou sorte hem….rsrsrsr
Ainda bem que eu postei direto aqui no Blog, senão tinha perdido os arquivos no MegaUpload
Estou com o seguinte erro: O objeto não oferece suporte à propriedade ou método ‘toJSON’
Gustavo,
Você precisa referenciar o json.js.
Em um projeto MVC 4 (ultima versão até agora) já vem com esse javascript. Se não me engano, os exemplos do Leandro Prado também possuem essa biblioteca.
PS: Este post é meio antigo, os conceitos e tendências de desenvolvimento web mudaram um pouco, se quiser explicar um pouco sobre seu projeto e qual a ideia, talvez eu possa lhe orientar.
Boa sorte,
Belintani
Teria um exemplo completo mvc com razor Master detials.
não tenho, mas seguindo esse post vc conseguira fazer
att,
Leandro Prado