10

Pessoal estou precisando montar um cadastro mestre-detalhe. Já pesquisei e vi alguns exemplos na internet, porém como eu faço para quando o mestre não estiver cadastrado, os detalhes forem armazenados de forma temporária para na gravação geral salvar o registro mestre e os registros detalhe.

Pensei em fazer em Session, mas acho que isto pode dar algum problema. Existe alguma solução para isto?

public class Cliente
{
    [Key]
    public int ClienteID { get; set; }
    public string Nome { get; set; }
    public virtual ICollection<Telefone> Telefones { get; set; }
}

public class Telefone
{
    [Key]
    public int TelefoneID { get; set; }                
    public string Telefone { get; set; }
    public virtual Cliente Cliente { get; set; }
}

A ideia é fazer algo parecido com a imagem abaixo, porém sem a necessidade de o Cliente cadastrado no banco de dados. Fazer tudo em só post.

A grande dúvida, é como eu posso "gravar" os dados do telefone e retornar para a tela essa informação sem fazer refresh...

inserir a descrição da imagem aqui

5
  • O que é um cadastro mestre-detalhe? Commented 10/03/2014 às 17:20
  • @TiagoCésarOliveira Acredito que deve ser alguma entidade do sistema dele, e detalhe provavelmente mais detalhes. De qualquer forma, não está claro. Essa pergunta deve ser reformulada.
    – Ricardo
    Commented 10/03/2014 às 17:26
  • Mestre-Detalhe, quer dizer um registro pai com vários filhos. Exemplo, Cliente (mestre) e Telefone (detalhe). Somente encontrei exemplos com o mestre salvo, não salvando tudo em um único post.
    – Tiedt Tech
    Commented 10/03/2014 às 17:29
  • @marlon.tiedt, pode ser mais claro em sua dúvida? Se puder isolá-la em código, tanto melhor. Commented 10/03/2014 às 17:30
  • Se você tem o modelo Cliente e o modelo Telefone, não vejo dificuldade em aplicar o modelo... Um simples <input type="hidden" /> com valor 0 se for um cliente novo ou o valor de ID do Cliente se for uma atualização resolveria seu problema. Commented 10/03/2014 às 17:31

3 Respostas 3

9

Já que é para salvar tudo de uma só vez, eu usaria uma abordagem client, sem postback até o momento em que tudo tiver de ser salvo.

Você poderia argumentar sobre a possível perda de dados em cadastros complexos, em que o usuário sem querer fecha o browser, mas usando os recursos do HTML 5 (se isso for uma opção) você pode salvar os dados em localstorage ou usando um DB client (websql) o que evita tal perda de dados.

Exemplo funcional:

Código da view:

@model MvcApplication2.Controllers.MasterDetailObj
<html>
<head>
    <title>Postar master/detail</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script type="text/javascript">
        $(function () {
            $("#add").on("click", function () {
                var tel = $("#numero").val();
                var ddd = $("#ddd").val();
                var idx = $("#telefones > tbody > tr").length;
                $("#telefones > tbody").append("<tr><td><input type='hidden' name='Telefones[" + idx + "].Numero' value='" + tel + "' />" + tel
                    + "</td><td><input type='hidden' name='Telefones[" + idx + "].Ddd' value='" + ddd + "' />" + ddd + "</td></tr>");
            });
        });
    </script>
</head>
<body>
    <h2>Postar master/detail</h2>

    <div>
        <div>
            <label for="numero">Número</label>
            <input type="text" id="numero" />
        </div>
        <div>
            <label for="ddd">DDD</label>
            <input type="text" id="ddd" />
        </div>
        <button id="add">Add</button>
    </div>

    @using (this.Html.BeginForm())
    {
        <div>
            @Html.LabelFor(x => x.Nome)
            @Html.TextBoxFor(x => x.Nome)
        </div>
        <table id="telefones">
            <thead>
                <tr>
                    <th>Número</th>
                    <th>Ddd</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>

        <button type="submit">submit</button>
    }
</body>
</html>

Código do controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult MultiDetailSubmit()
    {
        return this.View();
    }

    [HttpPost]
    public ActionResult MultiDetailSubmit(MasterDetailObj obj)
    {
        if (this.ModelState.IsValid)
        {
            // aqui estarão disponíveis todos os itens adicionados na lista de telefones no client

            return this.RedirectToAction("Index", "Home");
        }

        return this.View(obj);
    }

}

Models:

public class MasterDetailObj
{
    public string Nome { get; set; }
    public List<Telefone> Telefones { get; set; }
}

public class Telefone
{
    public string Numero { get; set; }
    public string Ddd { get; set; }
}
9
  • mas como eu iria guardar os itens dos telefones na View e depois recuperar no controller?
    – Tiedt Tech
    Commented 10/03/2014 às 17:52
  • No botão de Add você adiciona uma nova linha na tabela, e para cada campo a ser enviado para o servidor cria um <input type='hidden'> com o valor a ser enviado. Se você adicionar vários valores, com o mesmo atributo name poderá recebê-los no servidor na forma de array. Commented 10/03/2014 às 17:58
  • É mesmo, tinha esquecido isto. No meu caso o name seria "Telefones" estou certo? e se for um elemento complexo? Exemplo se tive-se DDD e Telefone como deveria proceder com o elemento input?
    – Tiedt Tech
    Commented 10/03/2014 às 18:03
  • Nesse caso pode receber um array de objetos complexos na action (e.g. class Telefone { public string Telefone {get;set;} public string DDD {get;set;} }), e na página renderizar os inputs com o name usando o padrão [0].Telefone, [0].DDD para o telefone-0, [1].Telefone e [1].DDD para o telefone-1, e assim por diante. Commented 10/03/2014 às 18:13
  • Você poderia passar um exemplo de como ficaria o a view e controller? Assim quem tiver a mesma dúvida que eu, já vai ver a resposta completa. Grato
    – Tiedt Tech
    Commented 10/03/2014 às 18:18
5

Esse código foi escrito na época que o Entity Framework estava na versão 5, então possivelmente a lógica de manipulação da coleção de telefones pode ter mudado. Por favor, me notifique por comentários se alguma condição de erro for encontrada para que eu corrija.

Utilize o pacote BeginCollectionItem, disponível no NuGet:

http://www.nuget.org/packages/BeginCollectionItem/

O tutorial a seguir documenta bem como implementar o mestre-detalhe:

http://www.joe-stevens.com/2011/07/24/asp-net-mvc-2-client-side-validation-for-dynamic-fields-added-with-ajax/

Ficaria assim:

_CreateOrEdit.cshtml (Cliente)

@model SeuProjeto.Models.Cliente

@* Demais campos do seu model *@

@if (Model != null && Model.Telefones != null)
{
    foreach (var telefone in Model.Telefones)
    {
        Html.RenderPartial("_TelefonesEditor", telefone);
    }
}

@* Botões de submit, fechamento de <fieldset>, etc. *@

_TelefonesEditor.cshtml

@model SeuProjeto.Models.Telefone

@using (Html.BeginCollectionItem("Telefones"))
{ 
    @Html.HiddenFor(model => model.TelefoneID)
    @Html.HiddenFor(model => model.ClienteID)
    @Html.EditorFor(model => model.Telefone)
}

ClientesController.cs

namespace SeuProjeto.Controllers
{
    public class ClientesController : Controller
    {
        [HttpPost]
        public ActionResult Create(Cliente cliente)
        {
            if (ModelState.IsValid)
            {
                if (shop.Telefones != null)
                {
                    foreach (var telefone in cliente.Telefones)
                    {
                        telefone.ClienteID = cliente.ClienteID;
                        context.Entry(telefone).State = System.Data.Entity.EntityState.Modified;
                        context.SaveChanges();
                    }
                }
            }

            // Lógica adicional, caso Model não seja válido
        }

        [HttpPost]
        public ActionResult Edit(Cliente cliente)
        {
            if (ModelState.IsValid)
            {
                // Telefones Originais
                List<Telefones> telefonesOriginais = context.Telefones.AsNoTracking().Where(t => t.ClienteID == cliente.ClienteID).ToList();

                if (cliente.Telefones != null)
                {
                    // Telefones Excluídos
                    foreach (var telefone in telefonesOriginais)
                    {
                        if (!cliente.Telefones.Where(t => t.TelefoneID == telefone.telefoneID).Any())
                        {
                            var telefoneExcluido = context.Telefones.Single(t => t.TelefoneID == telefone.TelefoneID);
                            context.Telefones.Remove(telefoneExcluido);
                            context.SaveChanges();
                        }
                    }

                    // Telefones Novos ou Editados
                    foreach (var telefone in cliente.Telefones)
                    {
                        if (telefone.ClienteID == 0)
                        {
                            telefone.ClienteID = cliente.ClienteID;
                            context.Telefones.Add(telefone);
                        }
                        else
                        {
                            context.Entry(telefone).State = System.Data.Entity.EntityState.Modified;
                        }

                        context.SaveChanges();
                    }
                }

                context.Entry(cliente).State = System.Data.Entity.EntityState.Modified;
                context.SaveChanges();
            }

            // Lógica adicional, caso Model não seja válido
        }
    }
}
10
  • era isto mesmo que estou procurando. Vou testar para ver se me atende. Você saberia me dizer qual o termo para pesquisar o tema em inglês. Vi que biblioteca que você passou faz um tempo que não tem atualização...Valeu pela dica...
    – Tiedt Tech
    Commented 10/03/2014 às 17:40
  • O termo que você pode usar para pesquisa é BeginCollectionItem tutorial. Este link que eu te passei é o mais completo como tutorial. Há também perguntas no Stack Overflow gringo que podem ajudar. Agora que tem um pouco de código, posso melhorar a resposta. Vou ver se faço isso logo. Commented 10/03/2014 às 17:56
  • @marlon.tiedt Veja se a lógica serve pra você agora. Commented 10/03/2014 às 19:32
  • @CiganoMorrisonMendez depois de muito tentar entender esse plugin kkk consegui kkkk, mas fiquei com uma dúvida na ali no método de Editar, onde tem um comentário "telefones excluidos" a condição telefone.Id == telefone.Id, é sempre verdadeira, e ele remove...Aí abaixo, a Condição ClienteId =0 é falsa, quando vai editar, da erro, pois acabou de excluir anteriormente
    – Rod
    Commented 23/01/2015 às 16:00
  • @Rod Verdade, estava com erro. Esse código eu fiz pra EF5. Possivelmente no EF6 não precise tantas verificações. É preciso testar e ir arrumando. Commented 23/01/2015 às 17:00
2

Recomendo você utilizar o padrão MVVM, em especial o KnockoutJS, ele é um ótimo pacote onde traz sua model para a view e com base nele você consegue ter essa implementação da lista. O mais legal de trabalhar com ele é que você pode optar por transacionar o objeto final ou parte dele.

Segue abaixo alguns links extremamente úteis para o conhecimento e ver a implementação do KnockoutJS com o MVC

MVC-4-Knockout-CRUD

Building with MVVM

KnockoutJS and bootstrap

Introduction to KnockoutJS

E claro como não podia faltar, o link do próprio KnockoutJS

KnockoutJS Official

(Disponível no Nugget tbm [Install-Package KnockoutJS])

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .