Duplicated ID in ManageLogin.cshtml built-in template

Question

I am using the built-in template which comes with ASP.NET MVC 4. The View which is causing problem is: ManageLogins.cshtml

This is how the output looks like:

So, this particular user has connected both Google and Facebook external IDs to his account:

And this is the Built in MS Template which produces the above code (I have changed the appearance a bit, but the code is the same)

@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>
}

The problem is that this code generates 2 inputs with id=loginProvider, and this gives me the browser error:

How can solve this problem?

Answer 1

Since model binding occurs on name and not id, I decided to remove the id from the hidden field and just use the name attribute:

@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>
}