用户控制所需的帮助答案

【问题标题】：Help required in user control用户控制所需的帮助
【发布时间】：2010-09-29 18:58:12
【问题描述】：

我正在使用如下用户控件 (.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 应用程序

【问题讨论】：

标签： jquery asp.net-mvc user-controls

【解决方案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 修改文本，请使用具有特定 id 的 div 包装用户控件并使用类选择器。

【讨论】：

Model 属性将是您的控件声明中使用的类型（在本例中为字符串）。当我们渲染部分时，该值被传递。 Html.Encode 确保这个字符串是正确的 html 编码以避免 XSS 攻击。

【解决方案2】：

将每个部分包装在不同 ID 中的 div 中，然后只使用两个 IDS：

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

但是，请注意这是完全错误的。您不应该在页面上有重复的 ID，因为它是无效的标记。您应该应用类名而不是 ID：

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

因此，当您将其包装在另一个 ID 为 divC 的 div 中时，您会正确：

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

【讨论】：

是的，目前看来是个不错的方法。但等待更多答案。谢谢。