使用 jQuery 填充输入标签，然后通过模型绑定提交到 ASP.NET Core

如何解决使用 jQuery 填充输入标签，然后通过模型绑定提交到 ASP.NET Core

我正在编写 ASP.NET Core MVC 3.1 应用程序的一部分，其中管理员向应用程序添加新用户。可以有域用户和本地用户，所以计划是给 Admin 一个选择标签（域/本地），一个带有 3rd 方自动完成库的输入标签，用于在符合条件的域用户之间进行搜索操作，以及一系列正常的输入标签用于手动插入新的本地用户。

当Admin搜索域用户时，一个序列化的json用作源，然后选择的用户ID，名字和第二名从自动完成源复制到手动输入标签（也可以直接使用如果是本地用户）。最后，这些输入标签的值被用作发送到动作方法的模型的绑定源。

我有一个相当简单的 ViewModel：

public class UserCreateModel
{
    [BindNever]
    public List<SelectListItem> AvailableDomains { get; }

    [BindNever]
    public string EligibleUsers { get; set; }

    [Required]
    public UserDomain SelectedDomain { get; set; }

    [Display(Name = "Id Utente")]
    [Required]
    public string Id { get; set; }

    [Required] 
    public string Nome { get; set; }

    [Required] 
    public string Cognome { get; set; }
}

EligibleUsers 属性是 List<EligibleUserModel> 实例的序列化：

public class EligibleUserModel
{
    public string text { get; set; }
    public string link { get; set; }
    public string cognome { get; set; }
    public string nome { get; set; }
}

这是关联的视图，其中我只保留了基本的 html 代码，去掉了与问题无关的所有标签、类和属性：

@model UserCreateModel

<form method="post">
    <fieldset>
        <select asp-for="SelectedDomain" asp-items="Model.AvailableDomains"></select>
    </fieldset>
    <fieldset class="add-domain-user">
        <input type="search" class="autocomplete"
               id="autocomplete-users"
               name="autocomplete-users"
               data-autocomplete='@Model.EligibleUsers'
    </fieldset>
    <fieldset disabled>
            <input asp-for="Id" type="text" class="form-control"/>
            <input asp-for="Cognome" type="text" class="form-control"/>
            <input asp-for="Nome" type="text" class="form-control"/>
    </fieldset>
    <button asp-controller="Account" asp-action="AddUser" type="submit">Conferma</button>
</form>

data-autocomplete 属性是第三方库的一部分，该库接收要添加的所有符合条件的用户的 JSON，并将锚标记列表动态附加到输入标记。使用一些 jQuery，我填充了 Id、Cognome 和 Nome 输入标签。 :

$('form .add-domain-user').on('click','.autocomplete-list li a',function (event) {
    event.preventDefault();

    // the href attribute comes with the 3rd-party lib,and is the only way 
    // for me to get the selected user Id
    var id = $(this).attr('href');

    var userList = $('.add-domain-user input[type="search"]').data()["autocomplete"];
    var selectedUser = userList.find(el => el.link === id);

    $('#Id').val(selectedUser.link);
    $('#Cognome').val(selectedUser.cognome);
    $('#Nome').val(selectedUser.nome);
});

现在，问题是当我在输入标签中手动输入文本时，它们被正确绑定并发送到操作方法。当我尝试从自动完成列表中选择域用户时，我可以看到输入标签中的值，但没有值绑定到模型。

解决方法

最后，只是 disabled 属性阻止了表单发布任何内容。更改为 readonly 并且有效。