如何在同一页面上使用用户控件的多个实例（使用 jquery）答案

【问题标题】：How to use multiple instances of a usercontrol (with jquery) on the same page如何在同一页面上使用用户控件的多个实例（使用 jquery）
【发布时间】：2011-02-21 11:36:49
【问题描述】：

我一直在开发一个带有 jquery 计时器的用户控件。起初我在用户控件中有 jquery。但是当我将其中 2 个控件添加到我的页面时，第二个用户控件并不能很好地显示它的数据。

现在我已经把 jquery 放到了主页中，并且用户控件只使用了 jquery 的 id。

这是我的用户控件：

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs"
    Inherits="WebUserControl" %>
<style type="text/css">
    #mainpanel
    {
        width: 145px;
        height: 123px;
    }
</style>
<div id="mainpanel">
    <div>
        test</div>
    <div id="shortly" style="background-color: #FFFFFF">
    </div>
    <button id="resetButton">
        Reset
    </button>
</div>

主页：

  <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

    <%@ Register Src="WebUserControl.ascx" TagName="WebUserControl" TagPrefix="uc1" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>hoi</title>
        <script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
        <script src="Scripts/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
        <link href="Css/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
        <script type="text/javascript" src="Scripts/jquery.countdown.js"></script>
        <script type="text/javascript">


            $(document).ready(function () {

            $(function() {
            $("#mainpanel");
        });

                shortly = new Date();
                shortly.setSeconds(shortly.getSeconds() + 5.5);
                $('#shortly').countdown({ until: shortly,
                    onExpiry: liftOff, layout: '{sn}', 
                });
                $('#resetButton').click(function () {
                 $('#mainpanel').effect("highlight", {}, 700 );
                 $('#shortly').effect("highlight", {}, 700 );
                    shortly = new Date();
                    shortly.setSeconds(shortly.getSeconds() + 5.5);
                    $('#shortly').countdown('change', { until: shortly });

                });


                function liftOff() {
                    // refresh the page  
                    window.location = window.location;
                }


            });

        </script>
    </head>
    <body>
        <uc1:WebUserControl ID="WebUserControl1" runat="server" />
<uc1:WebUserControl ID="WebUserControl2" runat="server" />

    </body>
    </html>

但是我的用户控件仍然表现得很奇怪，现在我的问题是：“我怎样才能使相同的用户控件在一个页面上正常工作？”

这两个都使用相同的 jquery 代码，但按钮等应该只在用户控件本身内工作。

【问题讨论】：

标签： c# asp.net jquery user-controls

【解决方案1】：

正如 David 所建议的那样，当您重复用户控件并明确设置其 id 时，您最终会在页面上看到多个共享相同 id 的控件。我想$("#someid") 将返回页面中的第一个元素，而不一定是您真正想要的那个。

David 建议将 CSS 类添加到您的用户控件中的元素（这与 jQuery 无关 - 尽管您编写的 jQuery 会引用它们）。

例如

<%@ Control Language="C#"  %>
<div class="mainpanel">
    <div>
        test
    </div>
    <div class="shortly">
        ??
    </div>
    <button class="resetButton">
        Reset
    </button>
</div>

[PS。请注意，您可能应该从用户控件中删除您的 CSS，因为每次控件出现在页面上时重复是不好的做法，例如将其包含在您的主页或单独的 CSS 文件中]

<style type="text/css">
    #mainpanel
    {
        width: 145px;
        height: 123px;
    }
    #shortly
    {
        background-color: #FFFFFF
    }
</style>

你的脚本可以是这样的

$(function () { 
    // function that does something exciting?
    var liftOff = function() { 
        // .... 
    };

    // Get a date that is some (short) time in the future
    var getDeadline = function() {
        var shortly = new Date();
        shortly.setSeconds(shortly.getSeconds() + 5.5);
        return shortly;
    };

    // Attach click handler to all our buttons
    $("div.mainpanel button.resetButton").click(function(event){

        // I am assuming that you will not be nesting these controls?
        var $mainpanel = $(this).parents("div.mainpanel")   // this will find the mainpanel div that contains the pressed button
                .effect("highlight", {}, 700 );

        $("div.shortly", $mainpanel) // this will find any div with the class = shortly inside mainpanel
                .countdown('change', { until: getDeadline() });    
    });

    // Start all countdowns going on page load
    $('#shortly').countdown({ 
        until: getDeadline(),
        onExpiry: liftOff, 
        layout: '{sn}'
    });
});

【讨论】：

【解决方案2】：

您的用户控件在元素上使用 id=""。 Id 在单个 html 页面中必须是唯一的。如果您需要附加 css 样式或通过 jquery 查询的内容，则需要使用类而不是 id，这样第二个控件就不会违反 id 必须唯一的约定。

【讨论】：

控件本身的ID是唯一的，忘记粘贴整个主页代码。现在编辑，您会看到两个用户控件都有自己的 ID。
不，我的意思是用户控件本身内部的标记是在像
这样的元素上设置 id，你需要使用像
然后使用 jquery 类选择器而不是 id 选择器
我要调查一下，谢谢！如果有人知道做同样事情的其他方法，请仍然发表评论。大卫，你也许有很好的例子？
答案仍然需要人...无法弄清楚 jquery 类。以及如何向它们添加脚本。