Требуется помощь в управлении пользователем

Question

Я использую пользовательский элемент управления (.ascx), как показано ниже

 <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

На моей странице aspx я использую этот пользовательский элемент управления, как показано ниже.

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

и используя jquery, я изменяю сообщение в div.

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

Работало нормально. Но теперь я хочу использовать этот пользовательский элемент управления в двух разных местах на странице. Мне нужен какой-то способ разграничить пользовательский контроль в обоих местах. Любой процесс приветствуется.

ПРИМЕЧАНИЕ - Я использую приложение ASP.net MVC 2

Answer 1

Я бы порекомендовал вам использовать строго типизированный элемент управления:

<%@ 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>

А затем включить элемент управления в разных местах с другой моделью:

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

и в другом месте:

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

Если вам нужно изменить текст с помощью javascript, оберните пользовательский элемент управления в div с указанным идентификатором и используйте селектор класса.

Answer 2

Оберните каждую часть в div в разных идентификаторах, затем просто используйте оба IDS:

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

Однако, только заметьте, что это совершенно неправильно. Вы никогда не должны иметь дубликаты идентификаторов на странице, так как это неверная разметка. Вы должны применять имена классов вместо идентификаторов:

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

Так что, когда вы заключите это в другое деление с идентификатором divC, вы исправите нечто вроде:

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