我如何 post 支持多 select 列表中的所有 selected 项目，以便它包含在我的视图模型中？

Question

我正在开发一个 ASP.Net Core 2.1 MVC 网站。

在我的一个观点中，我设置了两个多 select 列表，允许客户端通过在左侧列表中提供所有未分配用户的列表和在右侧列表中分配用户，使用 html/javascript/scss 的 Esua Silva's 示例。这工作得很好。

对于 post 返回，我意识到我需要 select 提交时新 "Assigned Users" 列表中的所有项目，所以我使用 javascript 来当用户单击更新（提交）按钮时，将“分配的用户列表”中的所有选项设置为真。

但是，我没有获得模型中的用户列表，因此我可以在 post 后面的控制器中使用它们。模型中的已分配用户列表在传递到控制器 POST 方法时始终具有 0 计数。

这是我在视图中的多select列表HTML。

<!-- User Assignment Tab -->
<div role="tabpanel" class="tab-pane" id="assignUsersTab" aria-labelledby="assign-users-tab">

    <div class="card-body ml3 mr3">

        <div class="row">


            <div class="col-5">
                <label>Users Assigned to Site</label>
                <select multiple="multiple" id="lstBox1" name="AssignedUserList" size="10"  asp-items="@(new SelectList(Model.AssignedUserList, "UserId", "Name"))" class="form-control">
                </select>
            </div>

            <div class="col-2 text-center subject-info-arrows pt-5">
                <input type="button" id="btnAllRight" value=">>" class="btn btn-default"/><br/>
                <input type="button" id="btnRight" value=">" class="btn btn-default"/><br/>
                <input type="button" id="btnLeft" value="<" class="btn btn-default"/><br/>
                <input type="button" id="btnAllLeft" value="<<" class="btn btn-default"/>
            </div>

            <div class="col-5">
                <label>Unassigned Company Users</label>
                <select multiple="multiple" id="lstBox2" size="10" name="UnassignedUserList" asp-items="@(new SelectList(Model.UnassignedUserList, "UserId", "Name"))" class="form-control"></select>
            </div>
            <div class="clearfix"></div>

        </div>


    </div>

</div>

这是我的视图模型。

public class EditSiteViewModel
{
    public int Id { get; set; }

    [Required]
    [StringLength(50, ErrorMessage = "The {0} must be at least {2} and at max {1} characters long.", MinimumLength = 2)]
    [Display(Name = "Site Name")]
    public string SiteName { get; set; }

    [Required]
    [Display(Name = "Company ID")]
    public int CompanyId { get; set; }

    [Display(Name = "Company Name")]
    public string CompanyName { get; set; }

    [Display(Name = "App ID")]
    public string AppId { get; set; }

    [Display(Name = "App Key")]
    public string AppKey { get; set; }

    [Display(Name = "Admin Site")]
    public bool IsAdminSite { get; set; }

    [Display(Name = "Enabled")]
    public bool IsEnabled { get; set; }

    public string ReturnUrl { get; set; }

    public List<Company> CompanyList { get; set; }

    public List<UserSiteItem> UnassignedUserList { get; set; }

    public List<UserSiteItem> AssignedUserList { get; set; }

    public List<ApplicationUser> CompanyUsersList { get; set; }

}

这是我的 jquery 当用户单击“更新”按钮时的 SelectAll 操作

$('#site-form').on("submit", selectAll);

function selectAll() {
    $("#lstBox1").find("option").each(function() {
        $(this).attr('selected', true);
    });
    console.log(`SelectAll processed`);
}

当我在 Chrome 中按 F12 时，我可以看到 console.log 被击中了。

这是我在控制器中的 POST 编辑方法签名。

[HttpPost]
public async Task<IActionResult> Edit(EditSiteViewModel editSite, string cancel)

当我在提交时检查 EditSiteViewModel 的属性时，我看到 AssignedUserList 属性的计数为 0。我可以在我的视图模型中看到其他属性，所以我知道表单 post 一切正常，只是不适用于 multi-select 列表。

我认为问题在于我如何尝试将多 select 列表与视图模型属性相关联。我看到 SO posts 说我需要在名称中的文本后面放一个 []。（即 name="AssignedUserList[]" 在

我花了很多时间寻找解决方案，但没有成功。非常感谢任何帮助 wou.d。

Answer 1

select 的发布值将始终是基本类型（字符串、整数等）。因此，select 倍数的发布值将只是原始类型的可枚举。因此，您不能直接绑定到 List<UserSiteItem> 之类的东西。相反，您需要绑定到 List<string> 或 List<int> 类型的属性（取决于您是否自定义了身份的用户 PK），因为在这种情况下，它将是一个列表正在发回用户 ID。

我如何 post 支持多 select 列表中的所有 selected 项目，以便它包含在我的视图模型中？

How do I post back all selected items in a multi-select list so it is included in my view model?

html

javascript

jquery

asp.net-core-mvc

asp.net-core-2.1