none
救助:C#2008项目里面,需要在服务器控件下拉菜单的“SelectedIndexChangerd”事件代码里面,调用客户端脚本函数function Button_Click() RRS feed

  • 问题

  • 困扰我几个月的难题,求专家帮忙解答,能给我一个完整的小例子,万分感谢!我的邮箱:glwei@126.com

    编程环境:C#2008网站页面,支持AJAX环境
    程序界面:一个下拉菜单DropDownList,一个按钮Button1,一个标签Label1,一个更新面板UpdatePanel1。
    要求功能:按F5程序运行后,如果点击按钮时,通过AJAX的方式,将标签Label的文本设置为“aaaa”;如果没有点击按钮,只是点击下拉菜单,那么下拉菜单的SelectedIndexChangerd事件,调用按钮OnClientClick的脚步函数function Button_Click(),也能将标签的文本设置为“aaaa”。

    ======================================================================================
    //
    //下面是Default.aspx.cs文件
    //

    using System;
    
    using System.Collections;
    
    using System.Configuration;
    
    using System.Data;
    
    using System.Linq;
    
    using System.Web;
    
    using System.Web.Security;
    
    using System.Web.UI;
    
    using System.Web.UI.HtmlControls;
    
    using System.Web.UI.WebControls;
    
    using System.Web.UI.WebControls.WebParts;
    
    using System.Xml.Linq;
    
    
    
    public partial class XMLHttpRequestDemo : System.Web.UI.Page
    
    {
    
        protected void Page_Load(object sender, EventArgs e)
    
        {
    
            Label1.Text ="希望通过下单菜单SelectedIndexChanged事件调用按钮的OnClientClick='javascript:return Button1_Click()'";
    
        }
    
        protected void Button1_Click(object sender, EventArgs e)
    
        {
    
    
    
        }
    
        protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    
        {
    
            //请高手指点这里代码
    
            //需要在这里编写代码调用按钮的Button1的客户端方法,即OnClientClick='javascript:return Button1_Click()'";
    
            //也就是要执行下面的函数:
    
            //function Button1_Click() 
    
            //{
    
            //    $get("<%= Label1.ClientID %>").innerHTML = "aaaaaaaaaa";
    
            //    return false;
    
            //}  
    
        }
    
    }
    
    
    
    
    ==================================================================================================

    <!--下面是Default.aspx-->
    <!-- ==== -->
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
    
        Inherits="XMLHttpRequestDemo" %>
    
    
    
    <!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>服务器控件调用客户端方法</title>  
    
    </head>
    
    <body>
    
        <form id="form1" runat="server">
    
        <asp:ScriptManager ID="ScriptManager1" runat="server">
    
        </asp:ScriptManager>
    
        
    
        <script type="text/javascript">
    
            function Button1_Click() 
    
            {
    
                $get("<%= Label1.ClientID %>").innerHTML = "aaaa";
    
                return false;
    
            }   
    
        </script>
    
            
    
        <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"  OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
    
            <asp:ListItem>选项一</asp:ListItem>
    
            <asp:ListItem>选项二</asp:ListItem>
    
        </asp:DropDownList>
    
        
    
        <br />
    
        <asp:Button ID="Button1" runat="server" Text="设置标签文本为aaaa" OnClick="Button1_Click" OnClientClick="javascript:return Button1_Click();" />
    
        <br />
    
        
    
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    
            <ContentTemplate>
    
                <div id="layout">
    
                    <asp:Label ID="Label1" runat="server"></asp:Label>
    
                </div>
    
            </ContentTemplate>
    
            <Triggers>
    
                <asp:AsyncPostBackTrigger ControlID="DropDownList1"  EventName="SelectedIndexChanged" />
    
            </Triggers>
    
        </asp:UpdatePanel>
    
        </form>
    
    </body>
    
    </html>
    
    ===============================================================================================================================================
    2009年8月15日 2:49

答案

  • <%@ Page Language="C#" AutoEventWireup="true"%>
    <!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 id="Head1" runat="server">
        <title>服务器控件调用客户端方法</title>  
        <script runat="server">
            // 你只需要将你 DropDownList 和 Button 播放到 UpdatePanel 中就行了,其它的和服务端操作一样, 
            // UpdatePanel 会自动为你完成无刷新的操作
            protected void Page_Load(object sender, EventArgs e)
            {
                Label1.Text = "Message";
            }
    
            protected void Button1_Click(object sender, EventArgs e)
            {
                this.Label1.Text = "ButtonClick";
            }
    
            protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
            {
                this.Label1.Text = this.DropDownList1.SelectedValue;
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <div id="layout">
                    <asp:Label ID="Label1" runat="server"></asp:Label>
                    <br />
                    <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"  OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
                            <asp:ListItem>选项一</asp:ListItem>
                            <asp:ListItem>选项二</asp:ListItem>
                    </asp:DropDownList>
                    <br />
                    <asp:Button ID="Button1" runat="server" Text="设置标签文本为aaaa" OnClick="Button1_Click"  />
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
        </form>
    </body>
    </html>

    知识改变命运,奋斗成就人生!
    2009年8月16日 5:12
    版主
  • 楼主,您好,个人的思路请参考:
    1、我不明白为什么要通过服务器端回调客户端来实现,为什么不利用webform的机制来赋值?
    2、按您的思路,因为用到了Ajax,实际上是在下拉框中执行代码后返回客户端,再调用Button1_Click()
        涉及到Ajax的调用生命周期
        请参考:http://www.asp.net/AJAX/Documentation/Live/ViewSample.aspx?sref=ClientEventExample1
                   http://www.asp.net/AJAX/Documentation/Live/ViewSample.aspx?sref=ClientEventExample1/cs/ClientEventTest.js
        上面两个连接是一个整体,您可以先研究一下,然后再试着修改自己的代码。基本思路是在EndRequest中调用Button1_Click(),当然还需要写一些判断,确定是由下拉框触发的。
    2009年8月16日 5:35
    版主
  • <%@ Page Language="C#" %>
    
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
    
        
    
        }
    
     
        protected void Button1_Click(object sender, EventArgs e)
        {
            Label1.Text = "aaaaa";
          
            
        }
    
        protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        {
            Button1.OnClientClick = "buttons()";
        }
        
    </script>
    
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    <script language="javascript"
    >
        function buttons() {
    
            alert("按钮脚本");
            document.getElementById('<%= Label1.ClientID %>').innerHTML = "aaaaa";
        }
    </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                      <asp:DropDownList AutoPostBack="True"   ID="DropDownList1" runat="server" 
                onselectedindexchanged="DropDownList1_SelectedIndexChanged">
                <asp:ListItem>1</asp:ListItem>
              <asp:ListItem>2</asp:ListItem>
            
            </asp:DropDownList>  
            
                <asp:Button ID="Button1"  OnClick="Button1_Click" runat="server" Text="Button" />
                </ContentTemplate>
                
            </asp:UpdatePanel>
         
         
          </div>
        </form>
    </body>
    </html>
    
    • 已编辑 mldark 2009年8月16日 11:49
    • 已建议为答案 mldark 2009年8月17日 3:31
    • 已标记为答案 weigaolin 2009年8月19日 15:30
    2009年8月16日 10:07

全部回复

  • 狭隘的想法问题 很矛盾 选择框触发服务端事件 能调用客户端的按钮的脚本? 我看不懂你的问题  感觉很矛盾

    2009年8月15日 3:29
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
    
        
    
    
    
        }
    
     
        protected void Button1_Click(object sender, EventArgs e)
        {
            Label1.Text = "aaaaa";
            
            
        }
    
        protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        {
              ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "aa", "按钮脚本", true);//或者注册js脚本  不能用asp.netajax
           
        }
        
    </script>
    
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    <script language="javascript"
    >
        function buttons() {
    
            alert("按钮脚本");
            document.getElementById('<%= Label1.ClientID %>').innerHTML = "aaaaa";
        }
    </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                      <asp:DropDownList  onchange="buttons()" ID="DropDownList1" runat="server" 
                onselectedindexchanged="DropDownList1_SelectedIndexChanged">
                <asp:ListItem>1</asp:ListItem>
              <asp:ListItem>2</asp:ListItem>
            
            </asp:DropDownList>  
            
                <asp:Button ID="Button1"  OnClick="Button1_Click" runat="server" Text="Button" />
                </ContentTemplate>
                
            </asp:UpdatePanel>
         
          </div>
        </form>
    </body>
    </html>
    2009年8月15日 3:40
  • 谢谢mldark的热心解答,我正在研究您的代码。
    2009年8月16日 2:32
  • 困扰我几个月的难题,求专家帮忙解答,能给我一个完整的小例子,万分感谢!我的邮箱:glwei@126.com

    编程环境:C#2008网站页面,支持AJAX环境
    程序界面:一个下拉菜单DropDownList,一个按钮Button1,一个标签Label1,一个更新面板UpdatePanel1。
    要求功能:按F5程序运行后,如果点击按钮时,通过AJAX的方式,将标签Label的文本设置为“aaaa”;如果没有点击按钮,只是点击下拉菜单,那么下拉菜单的SelectedIndexChangerd事件,调用按钮OnClientClick的脚步函数function Button_Click(),也能将标签的文本设置为“aaaa”。

    ======================================================================================
    //
    //下面是Default.aspx.cs文件
    //

    using System;
    using System.Collections;
    using System.Configuration;
    using System.Data;
    using System.Linq;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.HtmlControls;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Xml.Linq;
    
    public partial class XMLHttpRequestDemo : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
    
            Label1.Text ="希望通过下单菜单SelectedIndexChanged事件调用按钮的OnClientClick='javascript:return Button1_Click()'";
        }
    
    
        protected void Button1_Click(object sender, EventArgs e)
        {
        }
    
    
    
        protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        {
    
            //请高手指点这里代码
    
            //需要在这里编写代码调用按钮的Button1的客户端方法,即OnClientClick='javascript:return Button1_Click()'";
    
            //也就是要执行下面的函数:
    
            //function Button1_Click() 
    
            //{
            //    $get("<%= Label1.ClientID %>").innerHTML = "aaaaaaaaaa";
            //    return false;
            //}  
    
        }
    }
    
    
    
    
    
    
    
    



    ==================================================================================================

    <!--下面是Default.aspx-->
    <!-- ==== -->
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
        Inherits="XMLHttpRequestDemo" %>
    <!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>服务器控件调用客户端方法</title> 
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
       
        <script type="text/javascript">
            function Button1_Click()
            {
                $get("<%= Label1.ClientID %>").innerHTML = "aaaa";
                return false;
            }  
        </script>
           
        <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"  OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
            <asp:ListItem>选项一</asp:ListItem>
            <asp:ListItem>选项二</asp:ListItem>
        </asp:DropDownList>
       
        <br />
        <asp:Button ID="Button1" runat="server" Text="设置标签文本为aaaa" OnClick="Button1_Click" OnClientClick="javascript:return Button1_Click();" />
        <br />
       
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <div id="layout">
                    <asp:Label ID="Label1" runat="server"></asp:Label>
                </div>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="DropDownList1"  EventName="SelectedIndexChanged" />
            </Triggers>
        </asp:UpdatePanel>
        </form>
    </body>
    </html>
    2009年8月16日 4:54
  • <%@ Page Language="C#" AutoEventWireup="true"%>
    <!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 id="Head1" runat="server">
        <title>服务器控件调用客户端方法</title>  
        <script runat="server">
            // 你只需要将你 DropDownList 和 Button 播放到 UpdatePanel 中就行了,其它的和服务端操作一样, 
            // UpdatePanel 会自动为你完成无刷新的操作
            protected void Page_Load(object sender, EventArgs e)
            {
                Label1.Text = "Message";
            }
    
            protected void Button1_Click(object sender, EventArgs e)
            {
                this.Label1.Text = "ButtonClick";
            }
    
            protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
            {
                this.Label1.Text = this.DropDownList1.SelectedValue;
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <div id="layout">
                    <asp:Label ID="Label1" runat="server"></asp:Label>
                    <br />
                    <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"  OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
                            <asp:ListItem>选项一</asp:ListItem>
                            <asp:ListItem>选项二</asp:ListItem>
                    </asp:DropDownList>
                    <br />
                    <asp:Button ID="Button1" runat="server" Text="设置标签文本为aaaa" OnClick="Button1_Click"  />
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
        </form>
    </body>
    </html>

    知识改变命运,奋斗成就人生!
    2009年8月16日 5:12
    版主
  • 楼主,您好,个人的思路请参考:
    1、我不明白为什么要通过服务器端回调客户端来实现,为什么不利用webform的机制来赋值?
    2、按您的思路,因为用到了Ajax,实际上是在下拉框中执行代码后返回客户端,再调用Button1_Click()
        涉及到Ajax的调用生命周期
        请参考:http://www.asp.net/AJAX/Documentation/Live/ViewSample.aspx?sref=ClientEventExample1
                   http://www.asp.net/AJAX/Documentation/Live/ViewSample.aspx?sref=ClientEventExample1/cs/ClientEventTest.js
        上面两个连接是一个整体,您可以先研究一下,然后再试着修改自己的代码。基本思路是在EndRequest中调用Button1_Click(),当然还需要写一些判断,确定是由下拉框触发的。
    2009年8月16日 5:35
    版主
  • 谢谢Moderator的热心解答,请帮忙再分析下,我的这个示例主要是为了演示服务器控件调用客户端脚本方法,而不单纯只是为了改变标签的文本,文本的改变是为了证明脚本方法里面的代码被下拉菜单的DropDownList1_SelectedIndexChanged事件执行调用了。


    因为我有个实际的项目,客户要求当改变下拉菜单的选项后,就要出现产品列表,而我的源代码就是要调用Button1的OnClientClick="javascript:return Button1_Click();"。以前的代码设计是通过点击Button1才出现产品列表,现在客户要求出现下拉菜单改变就出现产品列表。所以我需要通过下拉菜单的DropDownList1_SelectedIndexChanged去调用Button1的OnClientClick="javascript:return Button1_Click();"。

    我已经翻过书店里面能找到的最新书籍,都没有找到一本C#2008关于这个服务器控件调用客户端脚本方法的例子。VB2008的倒是有,《大师讲堂asp.net3.5AJAX开发范例精讲精析》。因为是VB的,我没有买。

    谢谢Moderator!

    2009年8月16日 5:42
  • 谢谢,Jiyuan 我去您提示的网页看看。
    2009年8月16日 5:55
  • <%@ Page Language="C#" %>
    
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
    
        
    
        }
    
     
        protected void Button1_Click(object sender, EventArgs e)
        {
            Label1.Text = "aaaaa";
          
            
        }
    
        protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        {
            Button1.OnClientClick = "buttons()";
        }
        
    </script>
    
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    <script language="javascript"
    >
        function buttons() {
    
            alert("按钮脚本");
            document.getElementById('<%= Label1.ClientID %>').innerHTML = "aaaaa";
        }
    </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                      <asp:DropDownList AutoPostBack="True"   ID="DropDownList1" runat="server" 
                onselectedindexchanged="DropDownList1_SelectedIndexChanged">
                <asp:ListItem>1</asp:ListItem>
              <asp:ListItem>2</asp:ListItem>
            
            </asp:DropDownList>  
            
                <asp:Button ID="Button1"  OnClick="Button1_Click" runat="server" Text="Button" />
                </ContentTemplate>
                
            </asp:UpdatePanel>
         
         
          </div>
        </form>
    </body>
    </html>
    
    • 已编辑 mldark 2009年8月16日 11:49
    • 已建议为答案 mldark 2009年8月17日 3:31
    • 已标记为答案 weigaolin 2009年8月19日 15:30
    2009年8月16日 10:07
  • 您好!mldark,我复制了您的源代码试了下,下拉菜单SelectedIndexChanged事件,还是没有调用客户端脚本方法
        protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        {
            Button1.OnClientClick = "buttons()";//这行代码还是没有执行document.getElementById('<%= Label1.ClientID %>').innerHTML = "aaaaa";

        }
       

    不知道您是没有弄明白我需要的功能,还是您认为你的代码已经可以通过下拉菜单的DropDownList1_SelectedIndexChanged事件,可以调用客户端脚本方法了?这行代码Button1.OnClientClick = "buttons()",可以让f下面的代码执行起来就OK了,
    unction buttons()
    {

         alert("按钮脚本");
         document.getElementById('<%= Label1.ClientID %>').innerHTML = "aaaaa";
    }


    我还是没有从你的代码里面实现我的功能,请指点迷津!!!!!!!!!!!!!!!!


    在您的代码中,永远都不要点击按钮,当下拉菜单的选项发生改变时,标签的文本能通过AJAX的方式变成“aaaa”,就是我的救命恩人,谢谢!

    2009年8月19日 15:43
  • default2页
    -------------------------------------------------
        <script language="javascript"
    >    var xmlHttp;
        function createXMLHttpRequest() {
            if (window.ActiveXObject) {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            else if (window.XMLHttpRequest) {
                xmlHttp = new XMLHttpRequest();
            }
        }
        function addNumber() {
            createXMLHttpRequest();
            var url = "Default.aspx"
            xmlHttp.open("GET", url, true);
            xmlHttp.onreadystatechange = showResult;
            xmlHttp.send(null);
        }
        function showResult() {
            if (xmlHttp.readyState == 4) {
                if (xmlHttp.status == 200) {
           
                         document.getElementById('<%= Label1.ClientID %>').innerHTML =  xmlHttp.responseText;
                }
            }
        }

        function buttons() {
           addNumber() ;
                 
        }
      
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
                 <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
              <asp:DropDownList onchange="buttons()"  AutoPostBack="True"   ID="DropDownList1" runat="server"
               >
                <asp:ListItem>1</asp:ListItem>
              <asp:ListItem>2</asp:ListItem>
           
            </asp:DropDownList>      </ContentTemplate>
            </asp:UpdatePanel>
                       </div>    </form>
    </body>
    </html>


    default 页 只有后台代码


    --------------------------------------------------------

        protected void Page_Load(object sender, EventArgs e)
         {
            Response.Clear();
            Response.Write("aaaa");
            Response.End();
       
        }

    2009年8月19日 17:17
  • lz您好,还以为您已经搞定了,下面是按上次给的思路写的代码,加粗部分是新添加的,请参考(在vs2008上测试通过):
    1、aspx页面代码:
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebFormCallClientJS.aspx.cs" Inherits="WebApplication1.WebFormCallClientJS" %>

    <!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 id="Head1" runat="server">

        <title>服务器控件调用客户端方法</title> 

    </head>

    <body>

        <form id="form1" runat="server">

        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Scripts>
               <asp:ScriptReference Path="ClientEventTest.js" />
            </Scripts>

        </asp:ScriptManager>

        <script type="text/javascript">
            function Button1_Click() 
            {
                $get("<%= Label1.ClientID %>").innerHTML = "aaaa";
                return false;
            }  

        </script>      

        <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"  OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">

            <asp:ListItem>选项一</asp:ListItem>

            <asp:ListItem>选项二</asp:ListItem>

        </asp:DropDownList>  

        <br />

        <asp:Button ID="Button1" runat="server" Text="设置标签文本为aaaa" OnClick="Button1_Click" OnClientClick="javascript:return Button1_Click();" />

        <br />

       

        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">

            <ContentTemplate>

                <div id="layout">

                    <asp:Label ID="Label1" runat="server"></asp:Label>

                </div>

            </ContentTemplate>

            <Triggers>

                <asp:AsyncPostBackTrigger ControlID="DropDownList1"  EventName="SelectedIndexChanged" />

            </Triggers>

        </asp:UpdatePanel>

        </form>

    </body>

    </html>

    2、codebehind代码基本没动
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;

    namespace WebApplication1
    {
        public partial class WebFormCallClientJS : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {

                Label1.Text = "希望通过下单菜单SelectedIndexChanged事件调用按钮的OnClientClick='javascript:return Button1_Click()'";

            }

            protected void Button1_Click(object sender, EventArgs e)
            {
               

            }
           
            protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
            {


            }

        }
    }

    3、新增js
    var app = Sys.Application;

    var postBackElement;
    app.add_init(ApplicationInit);

    // Application event handlers for component developers.
    function ApplicationInit(sender) {
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        if (!prm.get_isInAsyncPostBack()) {
            prm.add_beginRequest(BeginRequestHandler);
            prm.add_endRequest(EndRequest);
        }
       
    }
    function BeginRequestHandler(sender, args) {
        postBackElement = args.get_postBackElement();
       
    }

    function EndRequest(sender, args) {
        if (postBackElement.id == "DropDownList1") {
            //可以在这里判断是否是下拉框触发的动作
            alert(postBackElement.id);
         }
        Button1_Click();
    }

    2009年8月20日 3:54
    版主
  • Jiyuan 用户奖牌用户奖牌用户奖牌用户奖牌


    十分感谢您热心的解答,好人啊,请您把这个测试成功了的完整源代码发到我的邮箱里面好吗?拜托了!这是我梦寐以求的东西啊。
    我的邮箱是:glwei@126.com

    我复制上面的代码后执行时报错了,所以需要您将源代码发到我邮箱里面。



    急盼!
    2009年8月21日 12:40
  • 报错?什么错?是不是copy时格式有问题。
    邮件已发,请查收!
    2009年8月21日 15:01
    版主