将 Ajax 数组发送到控制器

Question

上面我展示了我的动态 UI 以及我根据日期为相关字段动态设置 ID 的方式。

所以我需要将这些数据作为数组 ajax 帖子发送到 MVC 控制器，然后在控制器中选择这些东西。这应该在我单击 保存 按钮时发生

我的post方法如下（没有上面的数组细节）：

 $("#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)
        {

        }

更新

用户界面已经通过使用下面提到的代码生成：

<% 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

此答案适用于您的第一个问题。

您可以使用form.serialize() 发送所有表单数据。例如

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