1

Olá. Estou realizando um projeto de um reprodutor de música. No cadastro de PlayList, gostaria que as músicas aparecessem em checkbox para poder marcar as desejadas e salvar no banco de dados.

Esse é o meu controller:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using XMusic.MVC.Models;
using XMusic.MVC.Persistencia;

namespace XMusic.MVC.Controllers
{
    public class PlayListController : Controller
    {

        private PersistenciaPlayList persistenciaPlayList;
        private ContextoEF contextoEF;

        private PersistenciaUsuario persistenciaUsuario;
        private PersistenciaMusica persistenciaMusica;

        public PlayListController()
        {
            persistenciaPlayList = new PersistenciaPlayList();
            persistenciaMusica = new PersistenciaMusica();
            contextoEF = new ContextoEF();

            persistenciaUsuario = new Persistencia.PersistenciaUsuario();

            ViewData["usuarios"] = persistenciaUsuario.ObterTodos();
            ViewData["musicas"] = persistenciaMusica.ObterTodas();
        }

        public ActionResult Index()
        {
            var playlists = persistenciaPlayList.ObterTodos();
            return View(playlists);
        }

        [HttpGet]
        public ActionResult Adicionar()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Adicionar(PlayList playlist)
        {


            var msgAlerta = string.Empty;
            var tipoAlerta = string.Empty;

            try
            {
                if (!ModelState.IsValid)
                    throw new Exception();

                persistenciaPlayList.Adicionar(playlist);

                ModelState.Clear();

                msgAlerta = "PlayList cadastrada com sucesso";
                tipoAlerta = "alert-success";

            }
            catch (Exception e)
            {
                msgAlerta = "Ocorreu um erro ao cadastrar a PlayList" + e;
                tipoAlerta = "alert-danger";
            }

            TempData.Add("MsgAlerta", msgAlerta);
            TempData.Add("TipoAlerta", tipoAlerta);

            return View();
        }


        [HttpGet]
        public ViewResult Alterar(int playlistId)
        {
            var playlist = persistenciaPlayList.Obter(playlistId);
            return View(playlist);
        }

        [HttpPost]
        public ActionResult Alterar(PlayList playlist)
        {
            var msgAlerta = string.Empty;
            var tipoAlerta = string.Empty;

            var alterado = false;

            try
            {
                if (!ModelState.IsValid)
                    throw new Exception();

                alterado = persistenciaPlayList.Alterar(playlist);

                if (alterado)
                {
                    msgAlerta = "PlayList alterada com sucesso";
                    tipoAlerta = "alert-success";
                }
                else
                {
                    msgAlerta = "Ocorreu um erro ao alterar a PlayList";
                    tipoAlerta = "alert-danger";
                }

            }
            catch (Exception e)
            {
                alterado = false;
                msgAlerta = "Ocorreu um erro ao alterar a PlayList: " + e;
                tipoAlerta = "alert-danger";

            }


            TempData.Add("MsgAlerta", msgAlerta);
            TempData.Add("TipoAlerta", tipoAlerta);

            if (alterado)
                return RedirectToAction("Index");
            else
                return View();
        }


        [HttpGet]
        public JsonResult ObterUsuarios()
        {
            var msg = string.Empty;

            var listaUsuarios = persistenciaUsuario.ObterTodos();


            if (!listaUsuarios.Any())
            {
                msg = "Nenhum usuário encontrado";
            }

            var usuarios = from u in listaUsuarios
                           select new { UsuarioId = u.UsuarioId, Nome = u.Nome };

            return Json(new { ret = usuarios, mensagem = msg },
                JsonRequestBehavior.AllowGet);
        }


        [HttpGet]
        public JsonResult ObterMusicas()
        {
            var msg = string.Empty;

            var listaMusicas = persistenciaMusica.ObterTodas();


            if (!listaMusicas.Any())
            {
                msg = "Nenhum música encontrada";
            }

            var musicas = from m in listaMusicas
                           select new { MusicaId = m.MusicaId, Titulo = m.Titulo };

            return Json(new { ret = musicas, mensagem = msg },
                JsonRequestBehavior.AllowGet);
        }



        [HttpGet]
        public JsonResult ObterTodos()
        {
            var msg = string.Empty;

            var listaPlayList = persistenciaPlayList.ObterTodos().ToList();



            if (!listaPlayList.Any())
            {
                msg = "Nenhuma PlayList encontrada";
            }


            var playlist = from p in listaPlayList
                           select new { PlayListId = p.PlayListId, Titulo = p.Titulo };



            return Json(new { ret = playlist, mensagem = msg },
                JsonRequestBehavior.AllowGet);
        }
    }


}

Esse aqui é a persistencia PlayList:

using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;
using XMusic.MVC.Models;

namespace XMusic.MVC.Persistencia
{
    public class PersistenciaPlayList
    {
        private ContextoEF _contexto = new ContextoEF();


        public PlayList Adicionar(PlayList playlist)
        {
            _contexto.Playlists.Add(playlist);
            _contexto.SaveChanges();

            return playlist;
        }


        public IEnumerable<PlayList> ObterTodos()
        {
            return _contexto.Playlists.ToList();
        }

        public PlayList Obter(int id)
        {
            try
            {
                return _contexto.Playlists.FirstOrDefault(p => p.PlayListId == id);
            }
            catch
            {
                throw;
            }

        }


        public bool Alterar(PlayList playlist)
        {
            try
            {
                var p = _contexto.Playlists.Find(playlist.PlayListId);

                if (p != null)
                {

                    p.Titulo = playlist.Titulo;
                    p.UsuarioId = playlist.UsuarioId;
                    p.Musicas = playlist.Musicas;

                    _contexto.Entry(p).State = EntityState.Modified;
                    _contexto.SaveChanges();

                    return true;
                }
                else
                    return false;
            }
            catch
            {
                throw;
            }
        }




        public PlayList Remover(int id)
        {
            try
            {
                var p = _contexto.Playlists.Find(id);

                _contexto.Playlists.Remove(p);
                _contexto.SaveChanges();

                return p;
            }
            catch
            {
                return null;
            }
        }

    }
}

E aqui onde estou mostrando os dados. Gostaria dos dados de música, fossem mostrados em checkbox:

@model XMusic.MVC.Models.PlayList

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Titulo, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Titulo, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Titulo, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.UsuarioId, "Usuário", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">

                @Html.DropDownList(
               "UsuarioId",
               new SelectList(
                   (IEnumerable<XMusic.MVC.Models.Usuario>)ViewData["usuarios"],
                   "UsuarioId",
                   "Nome"),

               htmlAttributes: new { @class = "form-control" })


                @Html.ValidationMessageFor(model => model.UsuarioId, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Musicas, "Músicas", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">


                @Html.DropDownList(
               "MusicaId",
               new SelectList(
                   (IEnumerable<XMusic.MVC.Models.Musica>)ViewData["musicas"],
                   "MusicaId",
                   "Titulo"),

               htmlAttributes: new { @class = "form-control" })


                @Html.ValidationMessageFor(model => model.Musicas, "", new { @class = "text-danger" })
            </div>
        </div>


        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Salvar" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Lista de PlayLists", "Index")
</div>

2 Respostas 2

1

A melhor forma é definido ViewModels:

public class PlaylistViewModel
{
    public Playlist Playlist { get; set; }
    public ICollection<UsuarioViewModel> Usuarios { get; set; }
}

public class MusicaViewModel
{
    public bool Selecionado { get; set; }
    public Musica Musica { get; set; }
}

Isto é péssimo de fazer. É bom remover.

    public PlayListController()
    {
        persistenciaPlayList = new PersistenciaPlayList();
        persistenciaMusica = new PersistenciaMusica();
        contextoEF = new ContextoEF();

        persistenciaUsuario = new Persistencia.PersistenciaUsuario();

        ViewData["usuarios"] = persistenciaUsuario.ObterTodos();
        ViewData["musicas"] = persistenciaMusica.ObterTodas();
    }

Mesma coisa para a sua camada de persistência. Aqui estão os motivos

Controller

A Index fica assim:

    public ActionResult Alterar(int playlistId)
    {
        var playlist = contexto.Playlists
                                .Include(p => p.Musicas)
                                .Include(p => p.Usuarios)
                                .FirstOrDefault(p => p.PlaylistId == playlistId);

        var viewModel = new PlaylistViewModel
        {
            Playlist = playlist, 
            Musicas = playlist.Musicas.Select(m => new MusicaViewModel
            {
                Selecionado = false,
                Musica = m
            })
        };

        ViewModel.Usuarios = contexto.Usuarios.ToList();
        return View(playlist);
    }

View

@model XMusic.MVC.ViewModels.PlayListViewModel

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Playlist.Titulo, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Playlist.Titulo, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Playlist.Titulo, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.UsuarioId, "Usuário", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">

                @Html.DropDownListFor(model => model.Playlist.UsuarioId,
                    ((IEnumerable<XMusic.MVC.Models.Usuario>)ViewBag.Usuarios).Select(u => new SelectListItem {
                        Text = u.Nome,
                        Value = u.UsuarioId.ToString(),
                        Selected = (Model != null) && (Model.Playlist != null) && (Model.Playlist.UsuarioId == u.UsuarioId)
                    }), "Selecione...", new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.Playlist.UsuarioId, "", new { @class = "text-danger" })
            </div>
        </div>

        @foreach (var musica in Model.Musicas)
        {
            <div>
                @Html.Partial("_Musicas", musica)
            </div>
        }

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Salvar" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Lista de PlayLists", "Index")
</div>

Partial _LinhaMusica.cshtml

Para isso funcionar bem, você vai precisar usar o pacote BeginCollectionItem:

@model XMusic.MVC.ViewModels.MusicaViewModel

@using (Html.BeginCollectionItem("Musicas"))
{
    @Html.HiddenFor(model => model.Musica.MusicaId)
    @Html.CheckBoxFor(model => model.Selecionado) @Model.Musica.Nome
}

Controller (POST)

    [HttpPost]
    public ActionResult Alterar(PlayListViewModel playlist)
    {
        var msgAlerta = string.Empty;
        var tipoAlerta = string.Empty;

        var alterado = false;

        // Não use try ... catch dentro de Actions.
        // Use o método OnException do Controller ancestral para tratar exceções.
        // try
        // {
            if (ModelState.IsValid)
            {
                // Se o Model é inválido, não levante exceção.
                // A maneira correta é enviando ao Form mensagens de validação de cada campo que falhou.
                // throw new Exception();

                // Monte uma nova lógica aqui. 
                // Aqui você pode conferir as CheckBoxes que foram marcadas, etc.
                // alterado = persistenciaPlayList.Alterar(playlist);

                if (alterado)
                {
                    TempData.Add("MsgAlerta", "PlayList alterada com sucesso");
                    TempData.Add("TipoAlerta", "alert-success");
                    return RedirectToAction("Index");
                }

                TempData.Add("MsgAlerta", "Ocorreu um erro ao alterar a PlayList");
                TempData.Add("TipoAlerta", "alert-danger");
            }
        // catch (Exception e)
        // {
        //    alterado = false;
        //    msgAlerta = "Ocorreu um erro ao alterar a PlayList: " + e;
        //    tipoAlerta = "alert-danger";
        // }

        ViewModel.Usuarios = contexto.Usuarios.ToList();            
        return View(alterado);
    }
0

Postar listas de objetos costuma dar um pouco de trabalho. Nestes casos eu costumo utilizar Custom Model Binders. Por padrão o Asp.NET realiza o bind dos dados de nossas Views para os parâmetros em nossas Actions, então quando utilizamos da abordagem que citei acima, abrimos mão de parte do Binding automático. Para fazer isso basta implementar algumas interfaces fornecidas pelo próprio Asp.NET, porém dependendo da versão ao invés de interfaces, você terá que estender algumas classes. No exemplo a seguir, implementei sua funcionalidade utilizando Asp.NET.Core. Veja como ficou o código:

class ListaMusicaModelBinderProvider : IModelBinderProvider
{
    public IModelBinder GetBinder(ModelBinderProviderContext context)
    {
        if (context == null) throw new ArgumentNullException(nameof(context));
        if (context.Metadata.PropertyName != null && context.Metadata.ContainerType.GetProperty(context.Metadata.PropertyName).PropertyType.IsConstructedGenericType)
            return new ListaMusicaModelBinder(context.Metadata.ModelType);
        return null;
    }
}

Primeiro criamos o Provider, o qual irá fornecer a instância correta responsável por realizar o Bind dos dados para você. Repare que para todos os metadados que não devem ser tratados por ListaMusicaModelBinder retornamos null, faço isso pois quero que toda propriedade diferente da coleção de músicas continue sob a responsabilidade do Asp.NET para realizar Bind.

Agora nosso ModelBinder

class ListaMusicaModelBinder : IModelBinder
{
    public ListaMusicaModelBinder(Type type)
    {
    }

    public Task BindModelAsync(ModelBindingContext bindingContext)
    {
        return Task.Run(() =>
        {
            List<Musica> musicas = new List<Musica>();
            var request = bindingContext.HttpContext.Request.Form.Keys.Where(w => w.Contains(bindingContext.FieldName)).ToArray();
            var grupos = request.GroupBy(s => s.Split('.').First());
            foreach (var item in grupos)
            {                    
                var value = bindingContext.ValueProvider.GetValue(item.First()).FirstValue;
                musicas.Add(new Musica
                {
                    MusicaId = int.Parse(value)
                });
            }
            bindingContext.Result = ModelBindingResult.Success(musicas);
        });
    }
}

Esta classe é a responsável por mapear os dados provenientes das requisições, para as respectivas propriedades dos seus parâmetros, quando não o parâmetro em si.

Mas quero chamar a atenção para o método BindModelAsync, existem outras abordagens de implementação deste método, como no artigo Custom Model Binding in ASP.Net Core.

Eu procurei implementar da maneira mais simples possível, pois não vi a necessidade de tratar (N) tipos de coleções e mapear (N) tipos de propriedades, isso serviria apenas para inflarmos o código com uma complexidade desnecessária, pois sabemos que você precisa tratar apenas coleções de músicas, e que sua view retornará apenas os Ids das músicas selecionadas.

Feito isso no arquivo Startup, no método ConfigureServices, configuramos nosso provider

public void ConfigureServices(IServiceCollection services)
    {
        // Add framework services.
        services.AddApplicationInsightsTelemetry(Configuration);
        services.AddMvc().AddMvcOptions((opt) =>
        {
            // aqui configuramos nosso provider.
            opt.ModelBinderProviders.Insert(0, new XMusic.Controllers.ListaMusicaModelBinderProvider());
        });
    }

O Asp.NET nos permite adicionar (N) providers para diversas coisas, que vão de Customizadores de Validação a Mapeamento dos dados provenientes das requisições.

Você irá encontrar o método Add em ModelBinderProviders, mas recomendo o uso do Insert, isso garante que nosso provider customizado seja o primeiro a ser analisado.

Por fim a View fica da seguinte maneira

@*
    For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}
@model XMusic.Models.PlayList

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Titulo, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Titulo, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Titulo, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.UsuarioId, "Usuário", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">

                @Html.DropDownList(
               "UsuarioId",
               new SelectList(
                   (IEnumerable<XMusic.Models.Usuario>)ViewData["usuarios"],
                   "UsuarioId",
                   "Nome"),

               htmlAttributes: new { @class = "form-control" })


                @Html.ValidationMessageFor(model => model.UsuarioId, "", new { @class = "text-danger" })
            </div>
        </div>
        @{ 
            var Musicas = (IList<XMusic.Models.Musica>)ViewData["musicas"];
        }
        <table>
            <thead>
                <tr>
                    <td>#</td>
                    <td>Música</td>
                </tr>
                @for (int i = 0; i < Musicas.Count; i++)
                {
                    <tr>
                        <td>
                            <input type="checkbox" value="@Musicas[i].MusicaId" 
                                   id="@Html.IdFor(m =>m.Musicas[i].MusicaId)"
                                   name="@Html.NameFor(m =>m.Musicas[i].MusicaId)"/>
                        </td>
                        <td>
                            @Musicas[i].Titulo
                        </td>
                    </tr>
                }
            </thead>

        </table>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Salvar" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Lista de PlayLists", "Index")
</div>

Suas músicas são exibidas em uma tabela, e nesta tabela temos o checkbox que irá permitir ao usuário escolher as músicas que serão salvas.

Ao executar o Post, você verá que sua lista dentro da PlayList estará preenchida apenas com as músicas selecionadas.

Mas o por quê desta abordagem?

Existem outras maneiras de realizar isso, uma delas é utilizando requisições ajax, mas para não fugir do que você fez até aqui, recomendo esta abordagem.

Caso queira um exemplo de ModelBind em outras versões do Asp.NET recomendo os links abaixo:

How to bind to custom objects in action signatures in MVC/WebAPI

Custom Model Binder for ASP.NET MVC on GET request

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 .