Дублированный идентификатор во встроенном шаблоне ManageLogin.cshtml

Question

Я использую встроенный шаблон , который поставляется с ASP.NET MVC 4. Вид, вызывающий проблему: ManageLogins.cshtml

ThisВот как выглядит результат:

Итак, этот конкретный пользователь подключил внешние идентификаторы Google и Facebook к своей учетной записи:

И это встроенный шаблон MS, который производит приведенный выше код (я немного изменил внешний вид, но код тот же)

@foreach (var account in Model.CurrentLogins)
{
    <div class="form-row">
        @using (Html.BeginForm("RemoveLogin", "Manage"))
        {
        @Html.AntiForgeryToken()
        <div>
            @Html.Hidden("loginProvider", account.LoginProvider)
            @Html.Hidden("providerKey", account.ProviderKey)
            <input type="submit" class="btn btn-default" value="Remove" title="Remove this @account.LoginProvider login from your account" />
        </div>
        }
    </div>
}

Проблема в том, что этот код генерирует 2 ввода с id=loginProvider, и это дает мне ошибку браузера:

Как можно решить эту проблему?

Answer 1

Вы можете использовать перегрузку помощника, которая позволяет вам предоставить htmlAttributes.

например,

for (int i = 0; i < 3; i++)
{
    @Html.Hidden("foo", $"value{i}", new { id = $"foo{i}"})
    ...
}

Предупреждение: в приведенном выше примере показано, как вы можете делать все, что хотитедля name, value, id и т. д. он может повлиять на проверку (и заставить вас настроить это тоже).Однако в вашем конкретном случае использования, поскольку это просто id, все должно быть в порядке.

Answer 2

Поскольку привязка модели происходит на name, а не на id, я решил удалить id из скрытого поля и просто использовать атрибут name:

@using (Html.BeginForm("RemoveLogin", "Manage", FormMethod.Post, new { @class = "inline-form float-right" }))
{
    @Html.AntiForgeryToken()
    <div>
        <input type="hidden" name="LoginProvider" value="@Model.LoginProvider" class="d-none login-provider" />
        <input type="hidden" name="ProviderKey" value="@Model" class="d-none provider-key" />
        <input type="submit" class="btn btn-default" value="Remove" title="Remove this @account.LoginProvider login from your account" />
    </div>
}