Question

我正在为用户使用更新角色，我希望将我的for循环中的角色值列表从View传递到Controller中的RoleViewModels。我该怎么办？

UserViewModels ：

public class UserViewModels
{
    // ...
    [DisplayName("Role")]
    public List<RoleViewModels> ListRoles { get; set; }
}

控制器：

[HttpPost]
public ActionResult Edit(UserViewModels userViewModels)
{
    return View(userViewModels);
}

我的观点：

@for (int i = 0; i < Model.ListRoles.Count(); i++)
            {
                <label style="display:block">
                    @Html.CheckBoxFor(model => model.ListRoles[i].Selected)
                    @Html.HiddenFor(model => model.ListRoles[i].Id)
                    @Html.LabelFor(model => model.ListRoles[i].RoleName, Model.ListRoles[i].RoleName)
                </label>
            }

ajax脚本：

<script>
        $(document).ready(function () {
            $("#btnUpdate").click(function (e) {
                e.preventDefault();

                var data = {
                    Id: $("#Id").val(),
                    UserName: $("#UserName").val(),
                    Active: $("#Active:checked").val(),
                    // ListRoles: **get values here ???**
                };
                $.ajax({
                        type: "POST",
                        url: "@Url.Action("Edit", "User")",
                        data: data,
                        dataType: 'json',
                        success: function (result) {
                            alert('Update successful !');
                        },
                    });
            });
        })
    </script>

Answer 1

嗯，这就是我在谈论的内容。

使用form标记包裹您的输入：

<form id="your-form-id">
        @for (int i = 0; i < Model.ListRoles.Count(); i++)
        {
            <label style="display:block">
                @Html.CheckBoxFor(model => model.ListRoles[i].Selected)
                @Html.HiddenFor(model => model.ListRoles[i].Id)
                @Html.LabelFor(model => model.ListRoles[i].RoleName, Model.ListRoles[i].RoleName)
            </label>
        }
</form>

然后你可以在你的js代码中简化它：

<script>
        $(document).ready(function () {
            $("#btnUpdate").click(function (e) {
                e.preventDefault();

                //here is your serialization
                var data = $("#your-form-id").serialize();

                $.ajax({
                        type: "POST",
                        url: "@Url.Action("Edit", "User")",
                        data: data,
                        dataType: 'json',
                        success: function (result) {
                            alert('Update successful !');
                        },
                    });
            });
        })
    </script>

Answer 2

根据我的经验，我认为使用内置HTML帮助程序和模型绑定的最佳方法是按照预期的方式使用它，或者手动完成所有操作。

您展示的代码似乎是将手动部件和内置部件混合在一起。有两种方法可以解决这个问题，取决于你喜欢什么

选项＃1：MVC方式

在这种情况下，我们使用HTML帮助程序和MVC中的模型绑定程序将 UserViewModels 返回到控制器中。

<form id="myform">
@for (int i = 0; i < Model.ListRoles.Count(); i++)
            {
                <label style="display:block">
                    @Html.CheckBoxFor(model => model.ListRoles[i].Selected)
                    @Html.HiddenFor(model => model.ListRoles[i].Id)
                    @Html.LabelFor(model => model.ListRoles[i].RoleName, Model.ListRoles[i].RoleName)
                </label>
            }
</form>

然后使用

提交表单

$.ajax({
                        type: "POST",
                        url: "@Url.Action("Edit", "User")",
                        data: $("#myFormId").serialize(),

                        success: function (result) {
                            alert('Update successful !');
                        },
                    });

此处的导入部分是 数据：$（“＃myFormId）.serialize（），

MVC不是处理数组的最佳人选，请查看phil hack http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx/的这篇文章，了解模型绑定器的工作原理以及使其正常工作所需的操作。

选项＃2手册

    <form id="myform">
        @for (int i = 0; i < Model.ListRoles.Count(); i++)
                    {
                        <label style="display:block">
                          <input type="checkbox" id= "chk@i" >
 <input type="hidden" id= "hiddenIdField@i" >
 <input type="hidden" id= "hiddenRoleName@i" >

                        </label>
                    }
        </form>

然后在构建对象时，您需要重新创建整个模型

var data = new Object();
data.Id = $("#Id").val();
data.UserName =  $("#UserName").val();
data.Active = $("#Active:checked").val();
data.ListRoles  = [];
var firstRole = new Object();
firstRole.PropertyName = $("#correctId").val();
..
..
data.ListRoles.push(firstRole );

您需要确保属性的名称与数组完全相同。

选项＃2是很多手动工作，如果你不得不在代码中做很多事情，你可能需要考虑使用客户端MVC框架而不是基于HTML帮助程序的MVC框架。

希望这有帮助。

如何使用JQuery在for循环中获取值并将它们传递给List <model>？

2 个答案: