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

问题
-
困扰我几个月的难题,求专家帮忙解答,能给我一个完整的小例子,万分感谢!我的邮箱: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> ===============================================================================================================================================
- 已编辑 weigaolin 2009年8月16日 4:34
答案
-
<%@ 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>
知识改变命运,奋斗成就人生!- 已标记为答案 KeFang Chen 2009年8月17日 3:29
-
楼主,您好,个人的思路请参考:
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(),当然还需要写一些判断,确定是由下拉框触发的。- 已标记为答案 KeFang Chen 2009年8月17日 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>
- 已建议为答案 肖小勇Moderator 2009年8月15日 3:41
- 已编辑 mldark 2009年8月15日 3:58
- 已标记为答案 肖小勇Moderator 2009年8月16日 3:36
- 取消答案标记 weigaolin 2009年8月16日 5:03
- 取消建议作为答案 weigaolin 2009年8月16日 5:04
- 已标记为答案 KeFang Chen 2009年8月17日 3:28
- 取消答案标记 weigaolin 2009年8月21日 13:02
-
困扰我几个月的难题,求专家帮忙解答,能给我一个完整的小例子,万分感谢!我的邮箱: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-->
<!-- ==== -->
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>- 已移动 肖小勇Moderator 2009年8月16日 5:12 ASP.NET 相关问题 (发件人:Visual C#)
- 已编辑 weigaolin 2009年8月16日 6:04
- 已合并 孟宪会Moderator 2009年8月16日 13:32 相同的内容
-
<%@ 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>
知识改变命运,奋斗成就人生!- 已标记为答案 KeFang Chen 2009年8月17日 3:29
-
楼主,您好,个人的思路请参考:
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(),当然还需要写一些判断,确定是由下拉框触发的。- 已标记为答案 KeFang Chen 2009年8月17日 3:29
-
谢谢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!- 已编辑 weigaolin 2009年8月16日 6:18
-
您好!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”,就是我的救命恩人,谢谢! -
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();
} -
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();
}