將MVC4綁定到包含數組的對象

Question

我正在創建一個允許員工在線提交工時表的表單。該表格由多個部分組成，每個部分代表一週中的一天。在每個部分中，用戶可以添加多行，每行都反映當天進行的任務。

function AddRow(day) 
{ 
    var count = $("#RowCount_" + day).data("count"); 

    var row = "<tr>" + 
        "<td>&nbsp;</td>" + 
        "<td><input type='text' size='50' id='" + day + "[" + count + "].Description' name='timesheet." + day + "[" + count + "].Description' class='Description' data-day='" + day + "' /></td>" + 
        "<td><input type='text' size='6' id='" + day + "[" + count + "].Start' name='timesheet." + day + "[" + count + "].Start' /></td>" + 
        "<td><input type='text' size='6' id='" + day + "[" + count + "].Finish' name='timesheet." + day + "[" + count + "].Finish' /></td>" + 
        "<td><input type='text' size='6' id='" + day + "[" + count + "].Travel' name='timesheet." + day + "[" + count + "].Travel'/></td>" + 
        "<td>" + 
         "<select style='width:200px' id='" + day + "[" + count + "].JobNo' name='timesheet." + day + "[" + count + "].JobNo'>@Html.Raw(ViewBag.Jobs)</select>" + 
        "</td>" + 
        "<td><input type='text' size='6' id='" + day + "[" + count + "].Hrs' name='timesheet." + day + "[" + count + "].Hrs' /></td>" + 
       "</tr>"; 

    $("#Table_" + day).append(row); 
    $("#RowCount_" + day).data("count", ++count); 
} 

然後我想這個綁定到Timesheet對象，如下所示：

public class Timesheet 
{ 
    List<Core.Models.TimesheetEntry> Monday = new List<TimesheetEntry>(); 
    TimesheetEntry[] Tuesday { get; set; } 
    TimesheetEntry[] Wednesday { get; set; } 
    TimesheetEntry[] Thursday { get; set; } 
    TimesheetEntry[] Friday { get; set; } 
    TimesheetEntry[] Saturday { get; set; } 
    TimesheetEntry[] Sunday { get; set; } 
} 

（注意：我想這兩個列表和數組在這裏，無論是結合的，但在更多這樣的分鐘）

的TimesheetEntry如下：

public class TimesheetEntry 
{ 
    public string Description { get; set; } 
    public string Start { get; set; } 
    public string Finish { get; set; } 
    public decimal Travel { get; set; } 
    public string JobNo { get; set; } 
    public decimal Hrs { get; set; } 
} 

該職位，以下列的控制器方法：

[HttpPost] 
public ActionResult Create(Core.Models.Timesheet timesheet) 
{ 
    return View(); 
} 

當提交時，形式不結合（在時間表所有字段都是0或空的）。但是，如果我控制器更改爲

public ActionResult Create(List<Core.Models.TimesheetEntry> Monday) 
{ 
    return View(); 
} 

，並調整HTML領域name='" + day + "[" + count + "].Description'的名字，那麼它將綁定就好了。這有點凌亂，所以如果可能的話，我寧願使用Timesheet類。是否存在與模型中的列表綁定的問題？

編輯：下面是POST數據的一個片段，有一個條目和星期一2空白項，3空白週二：

timesheet.Monday[0].Description:test entry 
timesheet.Monday[0].Start:0900 
timesheet.Monday[0].Finish:1700 
timesheet.Monday[0].Travel:0 
timesheet.Monday[0].JobNo:14089A - line 14 hut heater sockets 
timesheet.Monday[0].Hrs:7.5 
timesheet.Monday[1].Description: 
timesheet.Monday[1].Start: 
timesheet.Monday[1].Finish: 
timesheet.Monday[1].Travel: 
timesheet.Monday[1].JobNo:14089A - line 14 hut heater sockets 
timesheet.Monday[1].Hrs: 
timesheet.Monday[2].Description: 
timesheet.Monday[2].Start: 
timesheet.Monday[2].Finish: 
timesheet.Monday[2].Travel: 
timesheet.Monday[2].JobNo:14089A - line 14 hut heater sockets 
timesheet.Monday[2].Hrs: 
timesheet.Tuesday[0].Description: 
timesheet.Tuesday[0].Start: 
timesheet.Tuesday[0].Finish: 
timesheet.Tuesday[0].Travel: 
timesheet.Tuesday[0].JobNo:14089A - line 14 hut heater sockets 
timesheet.Tuesday[0].Hrs: 
timesheet.Tuesday[1].Description: 
timesheet.Tuesday[1].Start: 
timesheet.Tuesday[1].Finish: 
timesheet.Tuesday[1].Travel: 
timesheet.Tuesday[1].JobNo:14089A - line 14 hut heater sockets 
timesheet.Tuesday[1].Hrs: 

Answer 1

更改所有TimesheetEntry[]陣列List<TimesheetEntry>

嘗試添加constuctor你的模型，模型初始化的所有領域：

public class Timesheet 
{ 
    public Timesheet() 
    { 
     Monday = new List<Core.Models.TimesheetEntry>(); 
     Tuesday = new List<Core.Models.TimesheetEntry>();   
    } 
} 

確保您的文章數據有前綴像Timesheet.Monday[0].Description=...

而且this'l做事

Answer 2

這個問題的答案將是，只要它是很好的一個博客帖子。不管怎麼說，請執行以下

轉到視圖 - >共享文件夾，創建一個名爲EditorTemplates

在這種EditorTemplates文件夾中新建文件夾，創建一個名爲_TimeSheetEntry的局部視圖，其處理一行（一個TimeSheetEntry）如下

@model TimeSheetEntry 
<tr> 
    <td></td> 
    <td>@Html.TextBoxFor(model => model.Description)</td> 
    <!--Add code for other fields--> 
</tr> 

現在在您的主視圖中，執行以下操作。

@model TimeSheet 
<table id="table_1"> 
    @for (var i = 0; i < Model.Monday.Count; i++) 
    { 
     @Html.EditorFor(model => model.Monday[i], "_TimeSheetEntry") 
    } 
</table> 
<input type="button" onClick="addRow(1)" value="Add Row" /> 
<!-- Do the same for other 4 days, change the table id accordingly and pass the correct day value for addRow--> 

現在在你的控制器，創建一個動作，將增加一個新行我們將其稱爲後用ajax表。

[HttpGet] 
public PartialViewResult AddTimeSheetRow(int day, int index) 
{ 
    string prefix = ""; 
    switch(day) 
    { 
     case 1: 
     prefix = "Monday[" + index + "]" 
     break; 
     //do the same for other 4 days but change the day name 
    } 
    ViewData.TemplateInfo.HtmlFieldPrefix = prefix; 
    return PartialView("_TimeSheetEntry", new TimeSheetEntry()); 
} 

現在，我們來看看Create視圖中的JavaScript代碼。

function addRow(day){ 
    var tbody = $("table_" + day).find('tbody'); 
    var index = tbody.find('tr').size() - 1; 
    $.get('@Url.Action("AddTimeSheetRow", "YourControllerName")', 
      { day:day, index:index }, 
      function (response){ 
       tbody.append(response); 
      }); 
} 

這是我放在一起的一個快速代碼，有絕對的改進空間。但上面應該讓你開始。