Help required in user control

Question

I am using a user control (.ascx) as below

 <div class="ui-widget" id="w_instruction">
        <div class="ui-state-instruction ui-corner-all w-msg"> 
                    <a id="btn_instruction_close" class="ui-dialog-titlebar-close ui-corner-all" href="#" style="float:right;"><img src="../../Images/i_close_blue.png" border="0"/></a>
                    <img src="../../Images/i_info_24.png" align="absmiddle"/>
                    <span id="i_msg"></span>
        </div>
    </div> // this code goes in to instruction.ascx

In my aspx page I am using this user control like below.

 <%Html.RenderPartial("Instruction"); %> 

and using jquery I am changing the message in the div.

 <script type="text/javascript">
            $("#i_msg").text("Please Enter the Infringement Details.");
        </script>

It was working fine. But now I want to use this user control at two different places in a page. I need some way to differentiate the user control at both places. Any thougth process is welcome.

NOTE- I am using ASP.net MVC 2 application

Answer 1

Wrap each of the partials within a divs within different IDs, then just use both the IDS:

var targetA = $("#divA #i_msg");
var targetB = $("#divB #i_msg");

However, just note that this is totally wrong. You should never have duplicate IDs on the page as it's invalid markup. You should apply class names instead of IDs:

<div id="divC">
    /* Created by RenderPartial */
    <div class="ui-widget">
        <div class="ui-state-instruction ui-corner-all w-msg"> 
            ....
            <span class="msg"></span>
        </div>
    </div>
</div>

So when you wrap this in another div with the ID divC, you'd right something like:

var targetB = $("#divC .msg");

Answer 2

I would recommend you using a strongly typed control:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<string>" %>
<div class="ui-widget" id="w_instruction">
    <div class="ui-state-instruction ui-corner-all w-msg"> 
        <a id="btn_instruction_close" class="ui-dialog-titlebar-close ui-corner-all" href="#" style="float:right;">
            <img src="../../Images/i_close_blue.png" border="0"/>
        </a>
        <img src="../../Images/i_info_24.png" align="absmiddle"/>
        <span id="i_msg"><%= Html.Encode(Model) %></span>
    </div>
</div>

And then include the control in different places with different model:

<% Html.RenderPartial("Instruction", "text 1"); %> 

and another place:

<% Html.RenderPartial("Instruction", "text 2"); %> 

If you need to modify the text using javascript wrap the user control by a div with specific id and use a class selector.