發送阿賈克斯陣到控制器

Question

上面我已經表明我的動態UI，我根據日期設定的ID動態的相關領域的方式。

所以我需要論文的數據發送到MVC控制器作爲陣列阿賈克斯後，然後從中挑選那些東西里面controller.This應該發生了，當我點擊保存按鈕

我的崗位方法如下（沒有上述陣列詳情）：

$("#clocked-details").find("#btnSave").die('click').live('click', function() { 

     var yearValue = $("#year").val(); 
     var monthValue = $("#month").val(); 

     $.ajax({ 
      url: "/Employees/UpdateEmployeeClockedHoursByProvider", 
      type: 'POST', 
      cache: false, 
      data: { employeeId: employeeId, year: yearValue, month: monthValue }, 
      success: function (result) { 

      }, 
      error: function (xhr, ajaxOptions, thrownError) { 
       alert(xhr.status); 
       alert(thrownError); 
       } 
      }); 
      return false; 
     }); 

我的控制器是如下面（無jquery的陣列maupulation）：

[HttpPost] 
public void UpdateEmployeeClockedHoursByProvider(Guid employeeId, int year, int month) 
     { 

     } 

更新

UI已經使用下面生成提到代碼：

<% foreach (var ec in Model) 
     {%> 
    <tr> 
     <td> 
      <%: ec.ClockedDate.ToString("yyyy-MM-dd") %> 
     </td> 
     <td> 
      <input type="number" id="<%: ec.ClockedDate.ToString("yyyy-MM-dd") %>-hours" name="<%: ec.ClockedDate.ToString("yyyy-MM-dd") %>-hours" 
       class="total-hours" placeholder="Hours" value="<%: ec.TotalHours %>" /> 
     </td> 
     <td> 
      <input type="number" id="<%: ec.ClockedDate.ToString("yyyy-MM-dd") %>-minutes" name="<%: ec.ClockedDate.ToString("yyyy-MM-dd") %>-minutes" 
       class="total-minutes" placeholder="Minutes" value="<%: ec.TotalMinutes %>" /> 
     </td> 
    </tr> 
    <% }%> 

我的問題：

1. 如何通過使用Ajax來發送上述每行數據的動態2場？

2. 如何操縱控制器內的數組？

Answer 1

你可以開始通過定義服務器上的視圖模式，將代表數據要檢索：

public class MyViewModel 
{ 
    public Guid EmployeeId { get; set; } 
    public int Year { get; set; } 
    public int Month { get; set; } 

    public ItemViewModel[] Items { get; set; } 
} 

public class ItemViewModel 
{ 
    public int TotalHours { get; set; } 
    public int TotalMinutes { get; set; } 
} 

，然後讓你的控制器動作持這種觀點模型參數：

[HttpPost] 
public ActionResult UpdateEmployeeClockedHoursByProvider(MyViewModel model) 
{ 
    ... 
} 

下一步就是解決您的觀點一點點，因爲現在你似乎是硬編碼輸入字段，而不是使用HTML輔助和定義錯誤ID和名稱爲您的輸入字段（在HTML中，id和name屬性不能以數字開頭）。

因此，這裏是你如何能生成表：

<% using (Html.BeginForm("UpdateEmployeeClockedHoursByProvider", null, FormMethod.Post, new { id = "myForm" })) { %> 
    <table> 
     <thead> 
      <tr> 
       <th>Clocked Date</th> 
       <th>Total Hours</th> 
       <th>Total Minutes</th> 
      <tr> 
     </thead> 
     <tbody> 
      <% for (var i = 0; i < Model.Count; i++) { %> 
      <tr> 
       <td> 
        <%= Html.DisplayFor(x => x[i].ClockedDate) %> 
       </td> 
       <td> 
        <%= Html.TextBoxFor(
         x => x[i].TotalHours, 
         new { 
          type = "number", 
          placeholder = "Hours", 
          @class = "total-hours" 
         } 
        ) %> 
       </td> 
       <td> 
        <%= Html.TextBoxFor(
         x => x[i].TotalMinutes, 
         new { 
          type = "number", 
          placeholder = "Minutes", 
          @class = "total-minutes" 
         } 
        ) %> 
       </td>      
      </tr> 
     <% } %> 
     </tbody> 
    </table> 

    <button type="submit">Save</button> 
<% } %> 

最後你可能有一些JavaScript文件，將訂閱.submit處理的形式和值發送到服務器：

$(document).on('#myForm', 'submit', function() { 
    var items = []; 
    $('table tbody tr').each(function() { 
     items.push({ 
      totalHours: $(this).find('td input.total-hours').val(), 
      totalMinutes: $(this).find('td input.total-minutes').val() 
     }); 
    }); 

    var data = { 
     employeeId: employeeId, // <!-- It's not very clear from your code where is this supposed to come from 
     year: $('#year').val(), 
     month: $('#month').val(), 
     items: items 
    }; 

    $.ajax({ 
     url: this.action, 
     type: this.method, 
     contentType: 'application/json', 
     data: JSON.stringify(data), 
     success: function (result) { 
      // TODO: here you could handle the response from the server 
      alert('Your request has been successfully processed.'); 
     }, 
     error: function (xhr, ajaxOptions, thrownError) { 
      alert(xhr.status); 
      alert(thrownError); 
     } 
    }); 

    return false; 
}); 

在此示例中，請注意我如何使用.on()方法而不是.live()，該方法已棄用且不應再使用。

Answer 2

這個答案是針對你的no.1 querstions。

您可以使用form.serialize()發送所有表格數據。例如

$.ajax({ 
    ... 
    data: $('#yourformId').serialize(), 
    ... 
});