如何将.aspx 页面中的jquery 函数调用到asp.net 中的usercontrols 控件？答案

【问题标题】：how to call the jquery function in .aspx page to usercontrols controls in asp.net?如何将.aspx 页面中的jquery 函数调用到asp.net 中的usercontrols 控件？
【发布时间】：2011-01-27 11:05:41
【问题描述】：

我在 default.aspx 中有以下功能.....我有 webusercontrol，它有 10 个复选框和 1 个按钮....我希望当我单击用户控件的 button1 时它可以访问默认功能。 aspx ...page ...如果我将用户控件拖到 default.aspx

通常，如果我在 default.aspx 中使用 10 个复选框和 1 个按钮，那么它可以正常工作...如果我在用户控件中使用 10 个复选框和 1 个按钮，然后在 default.aspx 中拖动该用户控件，那么它将无法正常工作..

出了什么问题...如何解决这个问题？

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>

<%@ 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>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

        <uc1:WebUserControl ID="WebUserControl1" runat="server" />

    </div>
    </form>
     <script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
      <script type="text/javascript">

      $("#'<%=Button1.ClientID %>'").click(function(){

    var vCheckedCBCount =  $("input:checkbox").filter(function(index){ 
    return $(this)[0].checked == true;
    }).length;
    if(vCheckedCBCount > 1)
    {
        alert('You cannot check more than 1 check box.');
        return false;
    } 
});
 </script >
   </body>
</html>

【问题讨论】：

标签： javascript asp.net jquery vb.net visual-studio-2008

【解决方案1】：

试试这个 -->

----------------------ASPX 代码------ -------------------------------------------------- ----------------------

ASPX：

<%@ Register Src="~/UserControl/WebUserControl.ascx" TagName="ucCheckBox" TagPrefix="UC" %>

<UC:ucCheckBox ID="ucCheckBox" runat="server" />

JAVASCRIPT：

$(document).ready(function(){

    $("input:submit[id$='btnSubmit']").click(function(){

        var vCheckedCBCount =  $("input:checkbox").filter(function(index){
        return $(this)[0].checked == true;
        }).length;
        if(vCheckedCBCount > 5)
        {
            alert('You cannot check more than 5 check box.');
            return false;
        } 
    });
});

----------------------ASPX 代码------ -------------------------------------------------- ----------------------

------------------用户控制代码---------- ----------------------------------------

用户控制：

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="UserControl_WebUserControl" %>
<asp:CheckBox ID="CheckBox1" runat="server" /><br />
<asp:CheckBox ID="CheckBox2" runat="server" /><br />
<asp:CheckBox ID="CheckBox3" runat="server" /><br />
<asp:CheckBox ID="CheckBox4" runat="server" /><br />
<asp:CheckBox ID="CheckBox5" runat="server" /><br />
<asp:CheckBox ID="CheckBox6" runat="server" /><br />
<asp:CheckBox ID="CheckBox7" runat="server" /><br />
<asp:CheckBox ID="CheckBox8" runat="server" /><br />
<asp:CheckBox ID="CheckBox9" runat="server" /><br />
<asp:CheckBox ID="CheckBox10" runat="server" /><br />
<asp:Button ID="btnSubmit" runat="server" Text="Continue" />

------------------用户控制代码---------- ----------------------------------------

【讨论】：

你为什么用这个？
我可以直接在用户控件中使用吗？
就像您在 aspx 页面中注册 WebUserControl。在我的情况下 TagName="ucCheckBox" TagPrefix="UC" 和在您的情况下 tagname="WebUserControl" tagprefix="uc1"。请参阅您的问题。
把所有的复选框和按钮控件放到usercontrol中。

【解决方案2】：

试试

$("#'<%=Button1.ClientID %>'").click(function(){
});

usercontrol 实现 INamingContainer 接口。因此，为了使用 id 获取元素，您需要使用 .ClientID 获取运行时生成的 id。

【讨论】：

【解决方案3】：

将用户控件添加到default.aspx时，Button1的ID变为userControl1_Button1

因此您需要更改$("#Button1").click(function() 以便它始终拥有正确的按钮名称：

$("# + <%=Button1.ClientID %> +").click(function()

【讨论】：

您需要更新您的问题以显示声明 Button1 的 html。
我已经更新了 ny default2.aspx 页面，我在其中拖动 usercontrol ..看看更新的代码