MVC查看操作一對多關係

Question

我有一個ASP.NET MVC應用程序與一對多關係WITHOUT查找（即用戶可以輸入自己的數據）。我正在嘗試確定添加記錄的最佳用戶界面。以下是我現在所擁有的：

Table1 
------ 
eventId 
eventName 

Table2 
------ 
eventRepeatId 
eventId 
startTime 
endTime 

表1 &表2是通過EVENTID場有關。在我看來，我現在正在做的是將Table2數據綁定到多選框。用戶點擊jQuery日曆，選擇開始和結束時間，然後點擊「添加」按鈕。這增加了新的開始/結束時間作爲多選框的一個選項。然後，在我的viewmodel方法中，我解析該選項並將其保存到數據庫。

目前有效。但是，需要注意的是，當您點擊「創建/更新」時，您必須在多選框中選擇所有選項。否則，發佈到控制器的數據爲空。

我想找到一種方法，添加和刪除一些開始/結束時間的事件，以便當我點擊「創建/更新」，他們都傳遞給控制器​​，無論我是否有他們選擇與否。

現在我傾向於使用jQuery來添加/刪除顯示用戶選擇的HTML元素（表或div），並將數據本身作爲JSON存儲在隱藏的表單字段中。只是想知道是否有更好的方法。

Answer 1

解決方案（我最終使用jQuery和一個隱藏字段）：

<div class="col-xs-5"> 
    <div id="dtpIS" class="row datetimepicker input-group"> 
     <div class="input-group"> 
      <input class="form-control" id="IrregularDPStart" data-format="MM/dd/yyyy HH:mm PP" /> 
      <span class="input-group-addon add-on"> 
       <i data-time-icon="glyphicon glyphicon-time" data-date-icon="glyphicon glyphicon-calendar"> 
       </i> 
      </span> 
     </div> 
    </div> 
    <div id="dtpIE" class="row datetimepicker input-group"> 
     <div class="input-group"> 
      <input class="form-control" id="IrregularDPEnd" data-format="MM/dd/yyyy HH:mm PP" /> 
      <span class="input-group-addon add-on"> 
       <i data-time-icon="glyphicon glyphicon-time" data-date-icon="glyphicon glyphicon-calendar"> 
       </i> 
      </span> 
     </div> 
    </div> 
</div> 
<div class="col-xs-1"> 
    <span class="glyphicon glyphicon-chevron-right" id="IrregularAdd"></span> 
</div> 
<div class="col-xs-6"> 
    <table id="IDDTable" class="table table-striped"> 
     <thead> 
      <tr> 
       <th>Start Time</th> 
       <th>End Time</th> 
      </tr> 
     </thead> 
     <tbody> 

     </tbody> 
    </table> 
    <input type="hidden" id="EventIrregularRepeats" name="EventIrregularRepeats" /> 
</div> 

<script type="text/javascript"> 
    var idd = []; 
    function UpdateIdd() { 
     idd = []; 
     $("#IDDTable tbody tr").each(function() { 
      var dates = []; 
      var count = 0; 
      $(this).child("td").each(function() { 
       dates[count] = $(this).text(); 
       count++; 
      }) 
      var newidd = { startTime: dates[0], endTime: dates[1] }; 
      idd.push(newidd); 
     }); 

     $("#EventIrregularRepeats").val(JSON.stringify(idd)); 
    } 
    $(function() { 
     $("#IrregularAdd").on('click', function() { 
      var tbody = $("#IDDTable tbody"); 
      var st = $("#IrregularDPStart").val(); 
      var end = $("#IrregularDPEnd").val(); 
      tbody.append("<tr><td>" + st + "</td><td>" + end + "</td><td><span class='iddremove glyphicon glyphicon-remove'></span></td>"); 
      UpdateIdd(); 
     }) 
     $('#IDDTable').on('click', '.iddremove', function() { 
      $(this).parents("tr").remove(); 
      UpdateIdd(); 
     }); 
    }); 
</script> 

Answer 2

數據如何發佈到控制器。當表單發佈時，請使用完整的postack。嘗試使用Ajax功能發佈表單數據。

嘗試通過Java腳本添加刪除開始和結束時間。所以當你發佈表單數據時，所有的選擇都會持續。由於