我正在浪费时间(或者我应该说几天?)试图把它放在一起,所以,任何帮助都会非常感激。
问题:我正在构建一个 MVC3 视图和控制器来为代表客户端的类输入数据,该类具有 0 或 N 个电话号码(由 ClientPhone 类表示)。我的问题在于该模型的用户界面(视图)。到目前为止,基于网上的一些研究,我已经为 Client 创建了一个强类型视图。然后,我遍历模型的 Phones 属性,为 Phones 呈现 HTML 表。我正在尝试将该表的 DataTables 表示用于电话数据的所有操作,并且在提交操作(javascript)中,我通过 JSon 为控制器发送此表(连同客户端的数据本身)。到目前为止,我的问题是在 JS 中实现这些电话数据操作的每一个使用场景(比如输入新电话,删除保留的电话,删除新添加的 - 但未保留的 - 电话,更新保留的电话,....)真是太辛苦了!必须有一个更简单的方法。
谁能指出我在父类的视图中维护某个类的列表的方法?
好的,这是代码(或者至少是重要的部分):
对于类客户端类,我得到了这个:
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Linq;
using System.Web;
using Olimpique.DAL;
using System.Data.Entity;
namespace Olimpique.Entities
{
[Table("OLIM_PROPRIETARIO")]
public class Proprietario
{
public int? fIDProprietario;
//---=== ATRIBUTOS ===---
[Key]
[Column("PROP_ID_PROPRIETARIO")]
public int? IDProprietario { get { return this.fIDProprietario; } set { this.fIDProprietario = value; this.LoadLists(); } }
[ForeignKey("EstadoCivil")]
[Column("ESCI_ID_ESTADO_CIVIL")]
public int? IDEstadoCivil { get; set; }
public virtual EstadoCivil EstadoCivil { get; set; }
[Column("PROP_TX_NOME")]
public string Nome { get; set; }
[Column("PROP_TX_CPF")]
public string CPF { get; set; }
[Column("PROP_TX_IDENTIDADE")]
public string Identidade { get; set; }
[Column("PROP_TX_ORGAO_IDENT")]
public string OrgaoIdentidade { get; set; }
[Column("PROP_DT_EMISSAO_IDENT")]
public DateTime? EmissaoIdentidade { get; set; }
[Column("PROP_TX_NACIONALIDADE")]
public string Nacionalidade { get; set; }
[Column("PROP_TX_PROFISSAO")]
public string Profissao { get; set; }
[Column("PROP_TX_OBS")]
public string Obs { get; set; }
public List<EnderecoProprietario> Enderecos { get; set; }
public List<TelefoneProprietario> Telefones { get; set; }
//---=== METODOS ===---
public void LoadLists()
{
OlimpiqueDBContext myDbContext = new OlimpiqueDBContext();
var ends = (from end in myDbContext.EnderecosProprietarios
where end.IDProprietario == this.IDProprietario
select end);
var tels = (from tel in myDbContext.TelefonesProprietarios
where tel.IDProprietario == this.IDProprietario
select tel);
this.Enderecos = ends.ToList<EnderecoProprietario>();
this.Telefones = tels.ToList<TelefoneProprietario>();
}
}
}
这两个属性是列表,是代表电话和地址的属性......
在视图中,我得到了(到目前为止):
(...)
$(document).ready(function () {
// here i have used datatables.js (jQuery Data Table)
$('#tblTelefones').dataTable({
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"aButtons": [],
"sRowSelect": "single"
},
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"bInfo": false,
"oLanguage": {
"sZeroRecords": " - - - ",
"sEmptyTable": "< nenhum telefone armazenado >"
},
"aoColumns": [
/*ID*/ { "bVisible": false },
/*Número*/ null,
/*Falar com */ null,
/*Obs*/ null,
/*Actions*/ null,
/*DataStatus*/ { "bVisible": false, "sType": "html" }
]
});
var oTable = $('#tblTelefones').dataTable();
});
(...)
这是保存“TelefoneProprietario”实例数据的表的 DataTable 表示形式的呈现。
以下是一些 JS 使用场景(例如添加和删除 TelefoneProprietario 数据):
function AddTel() {
if ($('#Telefone').val().trim() == '')
{
alert('É necessário indicar ao menos o número do telefone a incluir');
return;
}
$('#tblTelefones').dataTable().fnAddData(['', $('#Telefone').val(), $('#FalarCom').val(), $('#ObsTel').val(), '<span onclick="DeleteTel(this.parentNode.parentNode);">X</span>', 'I']);
$('#Telefone').val("");
$('#FalarCom').val("");
$('#ObsTel').val("");
}
function DeleteTel(nTr) {
var oTT = $('#tblTelefones').dataTable();
var sRow = oTT.fnGetData(nTr);
if (confirm('Tem certeza que deseja remover o telefone ' + sRow[1] + '?')) {
if (sRow[0] == '') {
oTT.fnDeleteRow(nTr);
} else {
oTT.fnUpdate('D', nTr, 5);
}
}
}
这是表格的渲染:
<div style="width:75%; margin-left:auto; margin-right:auto;">
<fieldset style="width:100%;">
<legend>Novo Telefone</legend>
<table style="width:100%;">
<tr>
<td style="width:10%;">
<span class="editor-label">
<label>Telefone:</label>
</span>
</td>
<td style="width:23%;">
<span class="editor-field">
@Html.TextBox("Telefone")
</span>
</td>
<td style="width:10%;">
<span class="editor-label">
<label>Falar com:</label>
</span>
</td>
<td style="width:23%;">
<span class="editor-field">
@Html.TextBox("FalarCom")
</span>
</td>
<td style="width:10%;">
<span class="editor-label">
<label>Obs:</label>
</span>
</td>
<td style="width:23%;">
<span class="editor-field">
@Html.TextBox("ObsTel")
</span>
</td>
</tr>
<tr>
<td colspan="6" style="text-align:center;">
<input type="button" value="Adicionar telefone" onclick="AddTel()" />
</td>
</tr>
</table>
</fieldset>
<table id="tblTelefones" class="TabelaDados" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>Número</th>
<th>Falar com </th>
<th>Obs</th>
<th> </th>
<th>DataStatus(N = None / U - Updated / D - Deleted / I = Inserted)</th>
</tr>
</thead>
<tbody>
@{
foreach (var tel in Model.Telefones)
{
<tr>
<td>@Html.DisplayFor(t => tel.IDTelefoneProprietario)</td>
<td>@Html.DisplayFor(t => tel.Numero)</td>
<td>@Html.DisplayFor(t => tel.FalarCom)</td>
<td>@Html.DisplayFor(t => tel.Obs)</td>
<td><span onclick="DeleteTel(this.parentNode.parentNode);">X</span></td>
<td>N</td>
</tr>
}
}
</tbody>
</table>
</div>
请注意,这并没有完全工作(只是为了简单的使用),它仍然没有实现很多情况......
将此表发送回控制器的方式完全基于作者称为“Master Detail CRUD 操作”的“http://code.msdn.microsoft.com/Detail-CRUD-Operations-fbe935ef”示例。 .