Using RenderPartial twice for same mvc view control in one page, get problems.

Question

I'm using same partial view in create.aspx view page twice, part of my code is: <%Html.RenderPartial("LocationVerifyControl"); %> <%Html.RenderPartial("LocationVerifyControl"); %>

In the mvc view user controls, it had a button and test code for it: $('#btnVerify').click(function() { alert("clicked by btnVerify");}

I watched the warning dialog pop up twice when clicked the button, the main view page had contents with same ids. How to solve this kind of problems? To prevent same ids in main view page, put my using html ids in the view data and pass them to partial view?

Answer 1

If I understand your question correctly, you are looking to add unique functionality to two different buttons with the same id.

It's not really valid to have more than one element with the same id. If there will be multiple you should just make it a class. You might want to first run your markup through W3C Validation.

Second you can do this by wrapping the partials in a div or whatever element you like. Something like this:

<div id="first">
    <% Html.RenderPartial("LocationVerifyControl"); %>
</div>

<div id="second">
    <% Html.RenderPartial("LocationVerifyControl"); %>
</div>

Then your script section can reference the buttons independently.

$('#first #btnVerify').click(function () {
    alert('first button click');
});

$('#second #btnVerify').click(function () {
    alert('second button click');
});

Notice that I'm just saying to find the id=first then find a id=btnVerify within the id=first.