创建用户控件

发布于 2024-10-20 19:19:48 字数 1193 浏览 1 评论 0原文

如果我在普通页面（例如 Default.aspx）中使用此代码，则它可以正常工作。我想在用户控件中使用它。

我该怎么做？

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

<!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>Check/Uncheck All CheckBoxes Using JQuery</title>

    <script src="Scripts/jquery-1.2.6.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#chkAll').click(
             function() {
                 $("INPUT[type='checkbox']").attr('checked', $('#chkAll').is(':checked'));
             });
         });    

     </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>

        <asp:CheckBox ID="chkAll" runat="server" Text="Check All" /><br />

        <asp:CheckBoxList ID="cbList" runat="server">
        </asp:CheckBoxList>

    </div>
    </form>
</body>
</html>

原文

This code works fine if I use it inside a normal page (e.g. Default.aspx). I want to use this in a UserControl.

How can I do this?

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

<!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>Check/Uncheck All CheckBoxes Using JQuery</title>

    <script src="Scripts/jquery-1.2.6.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#chkAll').click(
             function() {
                 $("INPUT[type='checkbox']").attr('checked', $('#chkAll').is(':checked'));
             });
         });    

     </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>

        <asp:CheckBox ID="chkAll" runat="server" Text="Check All" /><br />

        <asp:CheckBoxList ID="cbList" runat="server">
        </asp:CheckBoxList>

    </div>
    </form>
</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

垂暮老矣 2024-10-27 19:19:48

当放置在用户控件中时，复选框具有不同的客户端 ID，前面加上用户控件的 ID。尝试按如下方式修改您的 jQuery：

$(document).ready(function() {
   $('#<%=chkAll.ClientID %>').click(
    function() {
        $("INPUT[type='checkbox']").attr('checked', $('#<%=chkAll.ClientID %>').is(':checked'));
    });
});

The checkboxes have a different client ID when placed in a User Control, prepended by the ID of the User Control. Try modifying your jQuery as follows:

$(document).ready(function() {
   $('#<%=chkAll.ClientID %>').click(
    function() {
        $("INPUT[type='checkbox']").attr('checked', $('#<%=chkAll.ClientID %>').is(':checked'));
    });
});

回复收藏 0 原文

疾风者 2024-10-27 19:19:48

创建启用脚本的用户控件有很多复杂性，例如 ASP.NET - JQuery

一般来说：您需要确保脚本命名容器的安全。 DOM ID 的引用需要指向 ASP.NET 客户端 ID（@FarligOpptredn 的答案），或者使用 CSS 选择器（除非您创建的功能特定于实例）。

理想情况下，在 JS 文件中创建所有客户端脚本，并使用 ScriptManager 从代码隐藏中注册它。这允许重复使用脚本并避免 UserControl 实例之间的冲突。由于您不能在 JS 文件中使用 scriptlet (<%= ... %>)，因此应使用参数来引用 UserControl DOM 中的对象，或使用 CSS 选择器。并在事件中使用 this 而不是硬引用。示例

myUserControl.js：

 $(document).ready(function() {
            $('.myUserControl > .chkAll').click(
             function() {
                 $("INPUT[type='checkbox']").attr('checked', $(this).is(':checked'));
             });
         });

myUserControl.ascx：

<div class="myUserControl">

    <asp:CheckBox ID="chkAll" class="chkAll" runat="server" Text="Check All" /><br />

    <asp:CheckBoxList ID="cbList" runat="server">
    </asp:CheckBoxList>

</div>

与具有大量转义的内联脚本相比，这也将使您的脚本更易于阅读和调试。

There are a lot of complexities in creating script-enabled UserControls, e.g. ASP.NET - JQuery

Generally: You need to make your script naming-container safe. References by DOM ID need to be made to the ASP.NET client ID (@FarligOpptredn's answer), or, alternatively, use CSS selectors (unless the functionality you are creating is specific to an instance).

Ideally, create all your client script in a JS file and register it from codebehind using ScriptManager. This allows the script to be re-used and avoids conflicts between instances of the UserControl. Since you can't use scriptlets (<%= ... %>) in a JS file, instead, use parameters to refer to objects in the UserControl DOM, or use CSS selectors. And use this in events instead of hard refs. Example

myUserControl.js:

 $(document).ready(function() {
            $('.myUserControl > .chkAll').click(
             function() {
                 $("INPUT[type='checkbox']").attr('checked', $(this).is(':checked'));
             });
         });

myUserControl.ascx:

<div class="myUserControl">

    <asp:CheckBox ID="chkAll" class="chkAll" runat="server" Text="Check All" /><br />

    <asp:CheckBoxList ID="cbList" runat="server">
    </asp:CheckBoxList>

</div>

This will make your script easier to read and debug, too, versus inline script with lots of escaping.

回复收藏 0 原文

~没有更多了~