Помощник по меткам Asp-for в Material Design Lite с .NET Core

Question

Я пытаюсь получить StatusId выбранного элемента в моем списке.

У меня есть список статуса, созданный с помощью Material Design Lite:

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select getmdl-select__fix-height">
    <input type="text" value="" class="mdl-textfield__input" id="statusList" asp-for="Status" readonly>
    <input type="hidden" value="" name="statusList" asp-for="StatusId">
    <i class="mdl-icon-toggle__label material-icons">keyboard_arrow_down</i>
    <label for="statusList" class="mdl-textfield__label">Status</label>
    <ul for="statusList" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
        @foreach (var status in ViewBag.Status)
        {
            <li class="mdl-menu__item" data-val="@status.Id">@status.Name</li>
        }
    </ul>
</div>

Я установил StatusId здесь:

<li class="mdl-menu__item" data-val="@status.Id">@status.Name</li>

И я заметил, что StatusId переходит к этому input, когда я выбираю элемент в списке:

<input type="hidden" value="" name="statusList" asp-for="StatusId">

Я добавил asp-for, но он не работает. Значение в Controller после submit равно нулю.

asp-for="Status" в следующем вводе работает идеально, и привязка к Controller происходит идеально:

<input type="text" value="" class="mdl-textfield__input" id="statusList" asp-for="Status" readonly>

Controller метод:

public async Task<IActionResult> Create([Bind("StatusId,CNPJ,Name,BusinessName,State,City,Street,District,CEP,Observation,Phone,Cellphone,Email,Status")] Company company)
{}

CompanyStatus модель:

public class CompanyStatus
{
    public int Id { get; set; }
    public string Name { get; set; }
}

Company модель:

public class Company
{
    public int Id { get; set; }
    public int StatusId { get; set; }
    public string CNPJ { get; set; }
    public string Name { get; set; }
    public string BusinessName { get; set; }
    public string State { get; set; }
    public string City { get; set; }
    public string Street { get; set; }
    public string District { get; set; }
    public string CEP { get; set; }
    public string Observation { get; set; }
    public string Phone { get; set; }
    public string Cellphone { get; set; }
    public string Email { get; set; }
    public string Status { get; set; }
}

Есть идеи, что я делаю не так?

Answer 1

Давайте рассмотрим ваш метод действий на сервере:

public async Task<IActionResult> Create([Bind("StatusId,CNPJ,Name,BusinessName,State,City,Street,District,CEP,Observation,Phone,Cellphone,Email,Status")] Company company)
{}

Здесь модель компании ожидает поля StatusId, Status и т. Д.

Тем не менее, input TagHelper на стороне сервера

<input type="text" value="" class="mdl-textfield__input" id="statusList" asp-for="Status" readonly>
<input type="hidden" value="" name="statusList" asp-for="StatusId">

будет отображаться в HTML-тегах, как показано ниже, в браузере:

<input type="text" value="" class="mdl-textfield__input" id="statusList" readonly="" name="Status">
<input type="hidden" value="" name="statusList" data-val="true" data-val-required="The StatusId field is required." id="StatusId">

Обратите внимание, что при визуализации в браузере атрибут name скрытого элемента <input> равен statusList вместо statusId.

Причина в том, что ваше свойство name TagHelper input на стороне сервера переопределяет атрибут, сгенерированный атрибутом name, свойством asp-for.

В результате полезная нагрузка, которую вы отправляете на сервер, будет:

Status=your-status-name&statusList=1&__RequestVerificationToken=xxx

Поскольку сервер не заботится о поле statusList, он просто игнорирует его.

Я не уверен, как ваши Material Design Lite и клиентские скрипты привязывают значение к input#statusId, когда пользователь выбирает <ul>/<li>. Но если вы хотите отправить запрос через форму, вы должны изменить свой код просмотра с:

<input type="hidden" value="" name="statusList" asp-for="StatusId">

будет:

<input type="hidden" value="" asp-for="StatusId">