在剃刀视图的for循环中发布来自select2的值

Posted 2023-05-07

【中文标题】在剃刀视图的for循环中发布来自select2的值

【英文标题】：Post value from select2 in for loop of razor view

【发布时间】：2018-06-24 21:30:48

【问题描述】：

我有一个这样的列表视图：

@model List<ABC.Models.InfoDetails>

我使用 for 循环来显示表格中的值，以便能够编辑每一行并使用提交按钮（在表格底部）将数据发布回控制器。

@using (html.BeginForm("UpdateUsers", "User")) 
<table ...

<tbody>
    @for (var i = 0; i < Model.Count(); i++) 
 ...

这些值是这样回传的：

[0].Title

[1].Title

等等

这很好，我在控制器中得到了正确的值。

我遇到的唯一问题是从每行的 select2 下拉元素中发布所选值。

<select class="js-select2 form-control" name="user" id="select2-user">

名称值（“用户”）被发布到控制器而不是名称[0].User

我的 javascript：

var users = [
                 id: '0', text: 'Please choose...' ,
                 id: '1', text: 'Paul' 
                ];

$("[name='user']").select2(
                placeholder: "Select a user",
                data: users
            );

有没有办法将值放到每个用户属性的相应索引中？

我希望你能帮助我。

【问题讨论】：

使用DropDownListFor() 方法生成<select>，使其正确命名。 （和id="select2-user" 生成重复的无效html）

你能告诉我语法吗？这不起作用：@Html.DropDownListFor(modelItem => modelItem[i].User, null, new htmlAttributes = new @name = "@modelItem[i].User", @class = "js-select2 form-control" )“没有具有键 '[0].User' 的 'IEnumerable' 类型的 ViewData 项”

(1)。使用 HtmlHelper 方法时，切勿尝试更改 name 属性。 (2)。错误解释为here - 您需要将用户集合传递给视图（另请参阅this answer，了解有关在循环中使用下拉列表的更多详细信息

【参考方案1】：

始终使用HtmlHelper 方法生成正确的html（包括name 属性）并绑定到您的模型。我还建议您为控制器中的选项生成集合并将其传递给模型，而不是在视图中生成它们。理想情况下，您会使用视图模型来做到这一点

public class InfoDetailsVM

    public IEnumerable<User> UserList  get; set; 
    public List<InfoDetails> Details  get; set; 

请注意，这假设您有一个包含属性 int ID 和 string Name 的 User 类

在 GET 方法中

InfoDetailsVM model = new InfoDetailsVM

    Details = ... // your current query for the collection of InfoDetails
;
ConfigureViewModel(model);
return View(model);

ConfigureViewModel() 在哪里

private void ConfigureViewModel(InfoDetailsVM model)

    model.UserList = ... // your code to return a collection of Users

在视图中

@model InfoDetailsVM
....
@for(int i = 0; i < Model.Details.Count; i++)

    @Html.LabelFor(m => m.Details[i].User)
    @Html.DropDownListFor(m => m.Details[i].User, 
        new SelectList(Model.UserList, "ID", "Name", Model.Details[i].User,
        "Select a user", 
        new  @class = "js-select2 form-control" 
    )
    @Html.ValidationMessageFor(m => m.Details[i].User)
    ....

脚本将只是

$('.js-select2').select2();

旁注：

有关在循环中生成下拉列表的详细信息，请参阅 MVC5 Razor html.dropdownlistfor set selected when value is in array 单独的ConfigureViewModel() 方法允许您调用它 POST 方法（不重复代码），如果 ModelState 无效，需要返回视图。

【参考方案2】：

@Html.DropDownListFor(items => Model[i].UserID,                                
 new SelectList(@Model.Users, "id", "text", @Model.Users[i].id),            
 new                                                                          
                                                                        
   @class = "select2-hidden-accessible",                              
   @aria_hidden = "true"                                                     
)

尝试以 razor 语法呈现。并给class = "select2-hidden-accessible"

【讨论】：

如果下拉菜单在 for 循环中，那么 @StephenMuecke 你是对的。

模型不包含名为Users的属性！

那个@ratanmalko 需要添加Model。而Model.User 应该包含要绑定下拉列表的用户列表