ASP.NET MVC RenderPartial Handling Client Side IDs

Question

I have taken on an MVC project that has a view that displays several partial views using

Html.RenderPartial("ClientDetail", model);
Html.RenderPartial("PlanSummary", model);

The problem I have is that inside of these partial views, controls with the same id are being generated. Both of the above partial views have this line:

Html.Hidden("Surname", Model.Surname)

This then creates invalid HTML as two elements appear on the rendered output with the same id.

Is there any other way of fixing this, apart from using "Surname1", "Surname2" etc.

Answer 1

Try this:

<%= Html.RenderPartial("ClientDetail", model, new ViewDataDictionary {{"PartialId", 1}}) %>
<%= Html.RenderPartial("PlanSummary", model, new ViewDataDictionary {{"PartialId", 2}}) %>

In the Partial Views:

Html.Hidden("Surname" + HtmlEncode(ViewData["PartialId"]), Model.Surname)

<!-- or -->

Html.Hidden("Surname" + PartialId, Model.Surname)

<script runat="server">
    protected string PartialId {
        get {
            return HtmlEncode(ViewData["PartialId"]);
        }
    }
</script>