Boa Noite!
Poderia seguir nesta mesma pergunta aqui, mas iria ficar muito longo. Como pode ser outro assunto resolvi abrir outra pergunta.
Consegui tudo certo conforme a melhor resposta, mas precisaria fazer uma alteração. Cada campo novo adicionado não poderia ser digitado. Ele deveria ser preenchido com dados já cadastrados no banco de dados. Explicando melhor: No cadastro de ponto de coleta, o usuário não deve criar quantos tipos de lixo quiser, e sim selecionar os tipos de lixo disponíveis previamente cadastrados no banco de dados.
Para tal tentei trocar o TextBoxFor por uma DropDownList. Mas cada vez que tento adicionar um novo campo o sistema apresenta um erro.
An exception of type 'System.ArgumentNullException' occurred in System.Web.Mvc.dll but was not handled in user code. Additional information: Valor não pode ser nulo.
No controller possuo o código:
ViewBag.Lixo = db.TipoDeLixo.ToList();
E na PartialView troquei o código:
@Html.TextBoxFor(model => model.TipoDeLixo.NomeTipoLixo, new { @class = "form-control", placeholder = "Nome" })
Por:
@Html.ListBox("Id",(SelectList)ViewBag.Lixo)
Tentei outras formas com ListBox, tentei com ListBox sem usar o esquema das PartialViews, tentei com MultiSelectList e várias outras formas.
Sem utilizar o esquema das PartialViews, o sistema até lista os tipos de lixo, mas depois eu não consegui pensar em como gravar as informações na tabela de Ponto de coleta e na tabela associativa (PontosDeColetaTipoDeLixo).
1)Como fazer que cada campo adicionado seja um DropDownList?
2)Após conseguir criar, como seria a melhor forma para editar?
EDIT1: Criação da partial na view Create
:
@Html.Partial("_TiposDeLixo", Model.PontosDeColetaTiposDeLixo)
Partial que chama as linhas _TiposDeLixo
:
@model IEnumerable<IdentitySample.Models.PontoDeColetaTipoDeLixo>
<div class="actions">
<a class="btn btn-default btn-sm" id="adicionar-tipo-de-lixo">
Adicionar Tipo de lixo
</a>
<script type="text/javascript">
$("#adicionar-tipo-de-lixo").click(function () {
$.get('/PontosDeColeta/NovaLinhaDeTipoDeLixo', function (template) {
$("#area-tipos-de-lixo").append(template);
console.log(template);
});
});
</script>
</div>
<div id="area-tipos-de-lixo">
@if (Model != null)
{
foreach (var lixo in Model)
{
@Html.Partial("_LinhaTipoDeLixo", lixo);
}
}
</div>
Partial da linha _LinhaTipoDeLixo
:
@model IdentitySample.Models.PontoDeColetaTipoDeLixo
@using (Html.BeginCollectionItem("PontosDeColetaTiposDeLixo"))
{
<div class="form-group">
@Html.HiddenFor(model => model.Id)
@Html.HiddenFor(model => model.TipoDeLixoId)
<label class="col-md-1 control-label">Nome</label>
<div class="col-md-5">
@Html.ListBox("Id", new SelectList((List<IdentitySample.Models.TipoDeLixo>)ViewBag.Lixo))
</div>
<div class="col-md-2">
<a class="btn red" onclick="$(this).parent().parent().remove();">Excluir</a>
</div>
</div>
}
EDIT2:
Action do controller que chama a nova linha:
public ActionResult NovaLinhaDeTipoDeLixo()
{
return PartialView("_LinhaTipoDeLixo", new PontoDeColetaTipoDeLixo { Id = Guid.NewGuid() });
}
NovaLinhaDeTipoDeLixo
).