title: 1-N entity creating/editing View
body: <p>I'm wasting hours (or should I say days?) on trying to put this together, so, any help would be very apreciated.</p>
  
  <p>The problem: I'm building a MVC3 View and Controller to enter data for a class that represents a Client, which has 0 or N phone numbers (that are represented with a Class ClientPhone). My problem lies on the user interface (View) for that model. So far, based on several reaserches on the net, I've created a strongly typed view for Client. I then iterate through the Phones attribute of the model, rendering a HTML Table for the Phones.
    I'm trying to use DataTables representation of that table for all the operations on Phones data, and in the submit action (javascript) I'm sending this table through JSon for the controller (altogether with the Client's data itself).
    My problem so far is that implementing in JS each and every one of the uses cenarios for those Phones data manipulations (like entering new phones, removing persisted phones, removing newly added - and yet not persisted - phones, updating persisted phones, ....) is such a labor! There MUST be an easier way. </p>
  
  <p>Can anyone point me a way to maintain a list of a certain class, within a view for a parent class? </p>
  
  <hr>
  
  <p>Ok, here's the code (or at least, the part that matters):</p>
  
  <p>For the Client-like class, I got this:</p>
  
  <pre><code>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&lt;EnderecoProprietario&gt; Enderecos { get; set; } 
  
      public List&lt;TelefoneProprietario&gt; 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&lt;EnderecoProprietario&gt;();
          this.Telefones = tels.ToList&lt;TelefoneProprietario&gt;();
      }
  }
  }
  </code></pre>
  
  <p>Those 2 attributes wich are Lists, are the ones representing Phones and Addresses...</p>
  
  <p>In the View, I got (so far):</p>
  
  <pre><code>(...)
      $(document).ready(function () {
          // here i have used datatables.js (jQuery Data Table)
          $('#tblTelefones').dataTable({
              "sDom": 'T&lt;"clear"&gt;lfrtip',
              "oTableTools": {
                  "aButtons": [],
                  "sRowSelect": "single"
              },
              "bLengthChange": false,
              "bFilter": false,
              "bSort": false,
              "bInfo": false,
              "oLanguage": {
                  "sZeroRecords": " - - - ",
                  "sEmptyTable": "&lt; nenhum telefone armazenado &gt;"
              },
              "aoColumns": [
                      /*ID*/         { "bVisible": false },
                      /*Número*/     null,
                      /*Falar com */ null,
                      /*Obs*/        null,
                      /*Actions*/    null,
                      /*DataStatus*/ { "bVisible": false, "sType": "html" }
              ]
          });
          var oTable = $('#tblTelefones').dataTable();
  
      });
  (...)
  </code></pre>
  
  <p>This is the rendering of the DataTable representation for a table that holds data for the "TelefoneProprietario" instances.</p>
  
  <p>Here are some of the JS uses cenarios (like adding and deleting TelefoneProprietario data):</p>
  
  <pre><code>    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(), '&lt;span onclick="DeleteTel(this.parentNode.parentNode);"&gt;X&lt;/span&gt;', '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);
              }
          }
      }
  </code></pre>
  
  <p>And here is the rendering of the Table:</p>
  
  <pre><code>        &lt;div style="width:75%; margin-left:auto; margin-right:auto;"&gt;
              &lt;fieldset style="width:100%;"&gt;
                  &lt;legend&gt;Novo Telefone&lt;/legend&gt;
                  &lt;table style="width:100%;"&gt;
                      &lt;tr&gt;
                          &lt;td style="width:10%;"&gt;
                              &lt;span class="editor-label"&gt;
                                  &lt;label&gt;Telefone:&lt;/label&gt;
                              &lt;/span&gt;
                          &lt;/td&gt;
                          &lt;td style="width:23%;"&gt;
                              &lt;span class="editor-field"&gt;
                                  @Html.TextBox("Telefone")
                              &lt;/span&gt;
                          &lt;/td&gt;
                          &lt;td style="width:10%;"&gt;
                              &lt;span class="editor-label"&gt;
                                  &lt;label&gt;Falar com:&lt;/label&gt;
                              &lt;/span&gt;
                          &lt;/td&gt;
                          &lt;td style="width:23%;"&gt;
                              &lt;span class="editor-field"&gt;
                                  @Html.TextBox("FalarCom")
                              &lt;/span&gt;
                          &lt;/td&gt;
                          &lt;td style="width:10%;"&gt;
                              &lt;span class="editor-label"&gt;
                                  &lt;label&gt;Obs:&lt;/label&gt;
                              &lt;/span&gt;
                          &lt;/td&gt;
                          &lt;td style="width:23%;"&gt;
                              &lt;span class="editor-field"&gt;
                                  @Html.TextBox("ObsTel")
                              &lt;/span&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td colspan="6" style="text-align:center;"&gt;
                              &lt;input type="button" value="Adicionar telefone" onclick="AddTel()" /&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/fieldset&gt;
              &lt;table id="tblTelefones" class="TabelaDados" style="width:100%"&gt;
                  &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;ID&lt;/th&gt;
                      &lt;th&gt;Número&lt;/th&gt;
                      &lt;th&gt;Falar com &lt;/th&gt;
                      &lt;th&gt;Obs&lt;/th&gt;
                      &lt;th&gt;&amp;nbsp;&lt;/th&gt;
                      &lt;th&gt;DataStatus(N = None / U - Updated / D - Deleted / I = Inserted)&lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                  @{
                      foreach (var tel in Model.Telefones)
                      {
                          &lt;tr&gt;
                              &lt;td&gt;@Html.DisplayFor(t =&gt; tel.IDTelefoneProprietario)&lt;/td&gt;
                              &lt;td&gt;@Html.DisplayFor(t =&gt; tel.Numero)&lt;/td&gt;
                              &lt;td&gt;@Html.DisplayFor(t =&gt; tel.FalarCom)&lt;/td&gt;
                              &lt;td&gt;@Html.DisplayFor(t =&gt; tel.Obs)&lt;/td&gt;
                              &lt;td&gt;&lt;span onclick="DeleteTel(this.parentNode.parentNode);"&gt;X&lt;/span&gt;&lt;/td&gt;
                              &lt;td&gt;N&lt;/td&gt;
                          &lt;/tr&gt;
                      }
                  }
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Notice that this is not fully working (just for a plain use) and still it doesn't implements lots of situations...</p>
  
  <p>The way to send back this table to the controller is totally based on the "http://code.msdn.microsoft.com/Detail-CRUD-Operations-fbe935ef" example of what the author called "Master Detail CRUD operations"... </p>