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

Question

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

当管理员搜索域用户时，序列化的 json 用作源，然后 selected 用户 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);
});

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

Answer 1

最后，正是 disabled 属性阻止了表单 post 任何事情。更改为 readonly 并且有效。

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

Populate input tags using jQuery and then submit to ASP.NET Core through model binding

asp.net-mvc

jquery

model-binding

asp.net-core