Duplicated ID in ManageLogin.cshtml built-in template - asp.net-mvc

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

Answer 2

You can use an overload of the helper that allows you to provide htmlAttributes.
e.g.
for (int i = 0; i < 3; i++)
{
#Html.Hidden("foo", $"value{i}", new { id = $"foo{i}"})
...
}
Caveat: while the sample above shows how you can do whatever you want for name, value, id, etc., it may affect validation (and force you to customize that too). In your specific use case however, since it's just id, it should be fine.