私はこれをまとめるのに何時間も (あるいは何日と言うべきでしょうか?) 無駄にしています。
問題: クライアントを表すクラスのデータを入力するために、MVC3 ビューとコントローラーを構築しています。このクラスには、0 または N 個の電話番号 (クラス ClientPhone で表されます) があります。私の問題は、そのモデルのユーザー インターフェイス (View) にあります。これまでのところ、ネット上のいくつかの研究に基づいて、クライアント用に厳密に型指定されたビューを作成しました。次に、モデルの Phones 属性を反復処理して、Phones の HTML テーブルをレンダリングします。電話データのすべての操作にそのテーブルの DataTables 表現を使用しようとしています。送信アクション (javascript) では、このテーブルをコントローラーの JSON 経由で送信しています (クライアントのデータ自体と一緒に)。これまでのところ、私の問題は、これらの Phones データ操作 (新しい電話の入力、永続化された電話の削除、新しく追加されたが永続化されていない電話の削除、永続化された電話の更新、....) は大変な作業です。もっと簡単な方法があるに違いありません。
親クラスのビュー内で、特定のクラスのリストを維持する方法を教えてもらえますか?
わかりました、これがコードです（または少なくとも重要な部分）：
クライアントのようなクラスの場合、次のようになりました。
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>();
}
}
}
リストであるこれらの 2 つの属性は、電話番号と住所を表すものです...
ビューで、私は（これまでのところ）得ました：
(...)
$(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」の例に完全に基づいています。 .