Tenho uma classe Pessoa que tem um ICollection
da classe Telefone.
Na tela de manutenção de Pessoa tenho um dataTable com os Telefones. Existe um link para acrescentar um novo telefone, mas não consigo usar o @Html.DropDownLIstFor
para pedir o tipo de telefone (comercial, residencial, celular).
Vou tentar ser sucinto.
public partial class PessoaModel
{
public Guid PessoaID { get; set; }
public string Nome { get; set; }
public virtual ICollection<TelefoneModel> Telefone { get; set; }
}
public partial class TelefoneModel
{
public Guid TelefoneID { get; set; }
public string DDD { get; set; }
public string Numero { get; set; }
public string TipoTelefone { get; set; }
public Guid PessoaID { get; set; }
}
E minha view está desta forma:
@model GeoArea.Models.ViewModel.PessoaViewModel
<div class="panel panel-default" id="ITelefones">
<div class="panel-heading">
<h3 class="panel-title">Telefones</h3>
</div>
<div class="panel-body">
<table id="tbTelefonePessoa" class="table table-striped table-hover">
<thead>
<tr>
<th>Tipo</th>
<th>Telefone</th>
<th>Opções</th>
<th></th>
</tr>
</thead>
<tbody></tbody>
</table>
<div style="text-align:end">
<a href="#" onclick="AcrescentarFone()">acrescentar telefone</a>
</div>
<div id="acrescfone" class="hidden">
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
<div class="col-md-6">
@Html.Label("Tipo", htmlAttributes: new { @class = "control-label" })
<div>
@Html.EditorFor(model => model.Telefone.FirstOrDefault().TipoTelefone.Nome, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Telefone, "", new { @class = "text-danger" })
</div>
</div>
<div class="col-md-6">
@Html.Label("Telefone", htmlAttributes: new { @class = "control-label" })
<div>
@Html.EditorFor(model => model.Telefone.FirstOrDefault().Numero, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Telefone, "", new { @class = "text-danger" })
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
var ex = document.getElementById('tbTelefonePessoa');
if ($.fn.DataTable.fnIsDataTable(ex)) {
$(ex).dataTable().fnClearTable();
$(ex).dataTable().fnDraw();
}
oTelefonePessoa = $('#tbTelefonePessoa').DataTable({
"bAutoWidth": false,
"dom": '<"hidden"f><"hidden"l><"hidden"i><"hidden"p>t',
"bPaginate": false,
"bProcessing": true,
"bStateSave": false,
"bLengthChange": false,
"sSearch": false,
"destroy": true,
"bServerSide": false,
"bSort": true,
"iDisplayLength": 10,
"order": [[0, "asc"]],
"language": {
"url": ROOT + "Content/resources/Portuguese-Brasil.json"
},
"columnDefs": [
{
'targets': 1,
"mData": 0,
mRender: function (data, type, row) {
var fone = row["Numero"];
fone = '(' + row["DDD"] + ') ' + fone.substr(0,(fone.length - 4)) + '-' + fone.substr((fone.length - 4),4);
return fone;
}
},
{
'targets': 2,
mRender: function(){
return '<a class="glyphicon glyphicon-edit">alterar</a>' + ' ' +
'<a class="glyphicon glyphicon-remove">excluir</a>';
}
}
],
"columns": [
{ "data": "TipoTelefone.Nome" },
{ "data": "DDD" },
{ "data": "Numero" }
]
});
var data = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.Telefone));
if (data.length > 0) {
$("#tbTelefonePessoa").dataTable().fnAddData(data);
}
});
function AcrescentarFone(){
$("#acrescfone").removeClass("hidden");
};
</script>
Não preciso necessariamente usar o dataTable mas eu achei o mais fácil. Tem alguma sugestão?