MVC - fields in a partial View need a Unique Id. How do you do this?

Question

In my view I render a partial view within a loop. The problem I have is that for each new row, the Id of the fields remains the same. I can I change this so that the Ids are unique and predictable?

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/AdminAccounts.master" Inherits="System.Web.Mvc.ViewPage<SHP.WebUI.Models.BankHolidayViewModel>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    BankHoliday
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="AdminAccountsContent" runat="server">
    <% using (Html.BeginForm())
       {%>
        <h3>Bank Holiday Administration</h3>
        <p>Select the year: <%: Html.DropDownListFor(model => model.SelectedYear, Model.YearList)%></p>
            <fieldset>
            <legend>Enter the bank holidays here:</legend>
            <table>
                <tr>
                    <th>Bank Holiday</th>
                    <th>Date</th>
                    <th>Notes</th>
                </tr>
                <% foreach (var bankHolidayExtended in Model.BankHolidays)
                   { %>
                    <% Html.RenderPartial("BankHolidaySummary", bankHolidayExtended); %>
                <% } %>
               <tr>
                    <td align="center" colspan="3" style="padding-top:20px;">
                        <input type="submit" value="Create" />
                    </td>
                </tr>
            </table>
            </fieldset>
        <% } %>

---

Partial View

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

    <tr>
        <td><%: Model.T.BankHolidayDescription%></td>
        <td><%: Html.EditorFor(model => model.BH.NullableBankHolidayDate)%></td>
        <td><%: Html.EditorFor(model => model.BH.BankHolidayComment)%></td>
    </tr>

Answer 1

I would recommend you using editor templates instead of rendering partial views:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/AdminAccounts.master" Inherits="System.Web.Mvc.ViewPage<SHP.WebUI.Models.BankHolidayViewModel>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    BankHoliday
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="AdminAccountsContent" runat="server">
    <% using (Html.BeginForm()) { %>
        <h3>Bank Holiday Administration</h3>
        <p>Select the year: <%: Html.DropDownListFor(model => model.SelectedYear, Model.YearList)%></p>
        <fieldset>
            <legend>Enter the bank holidays here:</legend>
            <table>
                <tr>
                    <th>Bank Holiday</th>
                    <th>Date</th>
                    <th>Notes</th>
                </tr>
                <%: Html.EditorFor(x => x.BankHolidays) %>
                <tr>
                    <td align="center" colspan="3" style="padding-top:20px;">
                        <input type="submit" value="Create" />
                    </td>
                </tr>
            </table>
        </fieldset>
    <% } %>
</asp:Content>

And then place your user control in ~/Views/Home/EditorTemplates/BankHolidayExtended.ascx (the name and location are important, replace Home with the name of your controller):

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<SHP.WebUI.Models.BankHolidayExtended>" %>
<tr>
    <td><%: Model.T.BankHolidayDescription %></td>
    <td><%: Html.EditorFor(model => model.BH.NullableBankHolidayDate) %></td>
    <td><%: Html.EditorFor(model => model.BH.BankHolidayComment) %></td>
</tr>

This editor template will be automatically rendered for each element of the BankHolidays collection property on your view model. It will ensure that unique Ids are generated and the name of the input fields will be suitable for binding in the POST action. It also makes your code more readable.