Seguindo o gancho anterior, se você tem a relação de Aba
para Tela
, a seleção feita aqui já contempla a carga preguiçosa de Tela
e de TelaFuncao
:
var abaQuery = _sigconEntities.Aba
.Where(a => a.idEmpresa == idEmpresa);
return abaQuery.ToList();
@model
da sua View, portanto, precisa ser:
@model IEnumerable<Sigcon.Model.Aba>
@{
ViewBag.Title = "Cadastrar";
}
E o preenchimento:
@foreach (var aba in Model)
{
<h1>Aba: @aba.Nome</h1>
foreach (var tela in aba.Telas)
{
<h2>Tela: @tela.Nome</h1>
foreach (var permissao in tela.TelaFuncoes)
{
<p>Permissão: @permissao.Nome</p>
}
}
}
Mas como você quer um formulário de criação e edição, a solução ficará obrigatoriamente mais complexa. Vou tentar fazer uma resposta sucinta cobrindo todos os pontos.
Antes de mais nada, estamos lidando com uma tela de múltiplas cardinalidades. Minha sugestão é que primeiro você faça uma tela cujo Model seja Tela
, e por ele você possa lidar com N Models do tipo TelaFuncao
. Começar por Aba
vai tornar a solução muito complexa para você que está começando.
Assim sendo, tomei algumas liberdades e irei reimplementar seu sistema com alguns ajustes, a começar pelos Models:
public class TelaFuncao
{
[Key]
public Guid TelaFuncaoId { get; set; }
public Guid TelaId { get; set; }
[Required]
public string Nome { get; set; }
public virtual Tela Tela { get; set; }
}
public class Tela
{
[Key]
public Guid TelaId { get; set; }
public Guid AbaId { get; set; }
[Required]
public string Nome { get; set; }
public virtual Aba Aba { get; set; }
public virtual ICollection<TelaFuncao> TelaFuncoes { get; set; }
}
public class Aba
{
[Key]
public Guid AbaId { get; set; }
public Guid EmpresaId { get; set; }
[Required]
public string Nome { get; set; }
public virtual Empresa Empresa { get; set; }
public virtual ICollection<Tela> Telas { get; set; }
}
public class Empresa
{
[Key]
public Guid EmpresaId { get; set; }
[Required]
public string Nome { get; set; }
public virtual ICollection<Aba> Abas { get; set; }
}
Repare também que estou usando Guid
de propósito, em detrimento de int
, na definição das chaves. Há algumas vantagens em se usar que podem ser achadas aqui.
Fiz isso porque quero usar as convenções de nomes do Entity Framework e gerar tudo automaticamente usando Scaffolding. Feito isso, podemos gerar Controllers e Views através da IDE.
Para isso, depois de ter definido os 4 Models, clico com o botão direito no diretório Controllers
e escolho a opção Add > Controller...:
Na tela seguinte, escolha MVC 5 Controller with Views, using Entity Framework:
Logo após, defina a Model class, a classe do contexto de dados e o nome do Controller. Aqui fiz para Empresa
. Ficou assim:
Clicando em Add, o resultado deve ser:
Repare que não apenas a lógica de seleção, detalhamento, inclusão, edição e exclusão foram geradas, mas também as Views correspondentes de cada operação.
Repita o processo, para Abas, Telas e Funções de Telas.
Feito isso, será necessário instalar um pacote chamado BeginCollectionItem. Já falei muito sobre ele aqui, então vou pular algumas partes.
Abra o Package Manager Console (View > Other Windows > Package Manager Console) e instale-o.
Abra TelasController
(estou supondo que você já gerou ele) e Views/Telas/Create.cshtml
. Vamos começar pela View. A minha está assim:
@model MeuProjeto.Models.Tela
@{
ViewBag.Title = "Create";
}
<h2>Create</h2>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Tela</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.AbaId, "AbaId", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("AbaId", null, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.AbaId, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Nome, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Nome, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Nome, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
Entre o botão "Create" e o último campo, Nome
, coloque uma declaração de chamada de Partial, assim:
<div class="form-group">
@Html.LabelFor(model => model.Nome, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Nome, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Nome, "", new { @class = "text-danger" })
</div>
</div>
@Html.Partial("_Permissoes", Model.TelaFuncoes)
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
Ou seja, estamos mandando para outra View (no caso, uma View parcial) apenas TelaFuncoes
. Lá montaremos nossa lista de permissões.
Crie uma Partial chamada "_Permissoes":
Coloque dentro dela o seguinte:
@model IEnumerable<MeuProjeto.Models.TelaFuncao>
<div class="actions">
<a class="btn btn-default btn-sm" id="adicionar-nova-permissao">
Adicionar Nova Permissão
</a>
<script type="text/javascript">
$("#adicionar-nova-permissao").click(function () {
$.get('/Telas/NovaLinhaPermissao', function (template) {
$("#area-permissoes").append(template);
});
});
</script>
</div>
<div id="area-permissoes">
@if (Model != null)
{
foreach (var permissao in Model)
{
@Html.Partial("_LinhaPermissao", permissao);
}
}
</div>
Bom, se você ler o código, notará que vamos precisar de mais uma Partial chamada _LinhaPermissao
. Crie esta Partial e coloque dentro dela o seguinte:
@model MeuProjeto.Models.TelaFuncao
@using (Html.BeginCollectionItem("TelaFuncoes"))
{
<div class="form-group">
@Html.HiddenFor(model => model.TelaFuncaoId)
@Html.HiddenFor(model => model.TelaId)
<label class="col-md-1 control-label">Nome</label>
<div class="col-md-5">
@Html.TextBoxFor(model => model.Nome, new { @class = "form-control", placeholder = "Nome" })
@Html.ValidationMessageFor(model => model.Nome, "", new { @class = "text-danger" })
</div>
<div class="col-md-2">
<a class="btn red" onclick="$(this).parent().parent().remove();">Excluir</a>
</div>
</div>
}
Se você fez tudo certo, a tela deve aparecer assim:
Se você reparou, no nosso TelasController
, precisamos adicionar um método chamado NovaLinhaPermissao
. Ele é assim:
public ActionResult NovaLinhaPermissao()
{
return PartialView("_LinhaPermissao", new TelaFuncao { TelaFuncaoId = Guid.NewGuid() });
}
E agora podemos adicionar e excluir permissões.
E, quando adicionamos 3 permissões e mandamos para Create
de TelasController
, temos as 3 permissões lá.
Como exercício, faça agora a edição. Se precisar de ajuda, abra outra pergunta (essa já ficou grande demais).
PS: Elimine um repositório da sua arquitetura. O Entity Framework já é um repositório.