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脚本添加删除开始和结束时间。所以当你发布表单数据时，所有的选择都会持续。由于