javascript - 使用 jQuery 从 Html 表获取值并映射到 C# 列表

Question

我有一个 MVC 项目，我在部分 View 中使用表格呈现数据:

<table id="tblUserSettings" class="table table-bordered CmtTable">
    <thead>
        <tr>
            <th>User Name</th>
            <th>Country</th>
            <th>System (s)</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        @if (Model == null)
        {
            <tr></tr>
        }
        else
        {
            foreach (var item in Model)
            {
                <tr>
                    <td><input type="hidden" id="usrId" value="@item.UserId" />
                    @item.UserName</td>

                    <td> <input type="hidden" id="usrCountryKey" value="@item.UserCountryKey" style="display:none"/>
                    @item.UserCountryName</td>

                    <td> <input type="hidden" id="usrSourceSystemKey" value="@item.UserSourceSystemKey" />
                    @item.UserSourceSystemDescription</td>

                    <td><a onclick='DeleteUserSettingsRow();'><i class='fa fa-times'></i> Delete</a><a onclick='EditUserSettingsPopup();'><i class='fa fa-pencil'></i> Edit</a></td>
                </tr>
            }
        }
    </tbody>
</table>

我要将此表中的值保存到数据库中，并且需要在 Controller 中调用 AddUserSettingsaction 方法，如下所示:

[HttpPost, Route("AddUserSettings")]
public ActionResult AddUserSettings(IEnumerable<UserSettings> request)
{
    AddUserSettingsRequest apiRequest = null;
    return View();
}

UserSettings的模型如下:

public class UserSettings
    {
        public UserSettings();

        public string UserId { get; set; }
        public string UserName { get; set; }
        public string UserCountryKey { get; set; }
        public string UserCountryName { get; set; }
        public string UserSourceSystemKey { get; set; }
        public string UserSourceSystemDescription { get; set; }
    }

我需要使用 jQuery 将表中的数据(包括隐藏字段)保存到数据库中，因此我创建了一个函数并将其调用为:

    <button type="button" id="btnAdd" onclick="SaveUserSettings();"><i class="fa fa-save"></i> Save</button>

        function SaveUserSettings()
        {
            debugger;
            var userSettings = [];

            $("table#tblUserSettings tr").each(function (i, v) {
                userSettings[i] = [];
                $(this).children('td').each(function (ii, vv)
                {
                    userSettings[i][ii] = $(this).text();

                });
            })

            alert(userSettings);

$.ajax({
             url: '@Url.Action("AddUserSettings", "Admin")',
             type: "POST",
             contentType: "application/json;",
             data: JSON.stringify(userSettings),
            success : function (result)
            {
                //alert(result);
            },
            error: function (result)
            {
                //alert(result);
            }
        });
    }

通过上面的 SaveUserSettings() 函数，我可以获得未隐藏的值，但我需要创建一个也包含隐藏属性的数组，并且可以将 ajax 请求作为参数发送到 Controller 。如何获取隐藏字段并创建映射到 Controller 的 IEnumerable 请求的数组？

Answer 1

如果 JavaScript 位于分部 View 中，您可以直接针对模型设置 userSettings，例如:

var userSettings = @Html.Raw(JsonConvert.SerializeObject(Model));

然后，这会将您的对象序列化为 JSON，并将其传递到浏览器，然后您可以使用它在 jQuery 中将其传递回服务器，而无需遍历表中的每一行。