Asp.net(C#) 如何在后台调用javascript 函数

Question

我在divalert.js 写了个DIV 提示框，代码如何。
function sAlert(txt){
    var eSrc=(document.all)?window.event.srcElement:arguments[1];
    var shield = document.createElement("DIV");
    shield.id = "shield";
    shield.style.position = "absolute";
    shield.style.left = "0px";
    shield.style.top = "0px";
    shield.style.width = "100%";
    shield.style.height = document.body.scrollHeight+"px";
    shield.style.background = "#333";
    shield.style.textAlign = "center";
    shield.style.zIndex = "10000";
    shield.style.filter = "alpha(opacity=0)";
    shield.style.opacity = 0;
    var alertFram = document.createElement("DIV");
    alertFram.id="alertFram";
    alertFram.style.position = "absolute";
    alertFram.style.left = "50%";
    alertFram.style.top = "50%";
    alertFram.style.marginLeft = "-225px" ;
    alertFram.style.marginTop = -75+document.documentElement.scrollTop+"px";
    alertFram.style.width = "450px";
    alertFram.style.height = "150px";
    alertFram.style.background = "#ccc";
    alertFram.style.textAlign = "center";
    alertFram.style.lineHeight = "150px";
    alertFram.style.zIndex = "10001";
    strHtml = "<ul style=\"list-style:none;margin:0px;padding:0px;width:100%\">\n";
    strHtml += "    <li style=\"background:#DD828D;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #F9CADE;\">[系统提示]</li>\n";
    strHtml += "    <li style=\"background:#fff;text-align:center;font-size:12px;height:120px;line-height:120px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;\">"+txt+"</li>\n";
    strHtml += "    <li style=\"background:#FDEEF4;text-align:center;font-weight:bold;height:25px;line-height:25px; border:1px solid #F9CADE;\"><input type=\"button\" value=\"确 定\" id=\"do_OK\" onclick=\"doOk()\" /></li>\n";
    strHtml += "</ul>\n";
    alertFram.innerHTML = strHtml;
    document.body.appendChild(alertFram);
    document.body.appendChild(shield);
    this.setOpacity = function(obj,opacity){
        if(opacity>=1)opacity=opacity/100;
        try{ obj.style.opacity=opacity; }catch(e){}
        try{ 
            if(obj.filters.length>0&&obj.filters("alpha")){
                obj.filters("alpha").opacity=opacity*100;
            }else{
                obj.style.filter="alpha(opacity=\""+(opacity*100)+"\")";
            }
        }catch(e){}
    }
    var c = 0;
    this.doAlpha = function(){
        if (++c > 20){clearInterval(ad);return 0;}
        setOpacity(shield,c);
    }
    var ad = setInterval("doAlpha()",1);
    this.doOk = function(){
        //alertFram.style.display = "none";
        //shield.style.display = "none";
        document.body.removeChild(alertFram);
        document.body.removeChild(shield);
        eSrc.focus();
        document.body.onselectstart = function(){return true;}
        document.body.oncontextmenu = function(){return true;}
    }
    document.getElementById("do_OK").focus();
    eSrc.blur();
    document.body.onselectstart = function(){return false;}
    document.body.oncontextmenu = function(){return false;}
}---------------------------------------------------------
在前台的 default.aspx 用button 调用可以的：
<input type="button" value="点击这里" onclick="sAlert('渐变的',this);" />但在后台 想通过 button1的Click来触发，但是不行。
protected void Button1_Click(object sender, EventArgs e)
    {
        string str;
        str = "<script language='javascript'>";
        str += "sAlert('渐变的',this);";
        str += "</script>";
        //Literal1.Visible=true;
        Literal1.Text = str;    }

Answer 1

    protected void Button1_Click(object sender, EventArgs e) 
    { 
        string str; 
        str = " <script language='javascript'>"; 
        str += "sAlert('渐变的',document.getElementById('"+Button1.ClientID+"'));"; 
        str += " </script>"; 
        //Literal1.Visible=true; 
        Literal1.Text = str;     } or
Button1OnClientClick="sAlert('渐变的',this);" 

Answer 2

方法一：protected void Page_Load(object sender,EventArgs e)
{
    Button1.Attributes.Add("onclick","sAlert('渐变的',this);");
}
方法二：<asp:Button ID="Button1" runat="server" OnClientClick="sAlert('渐变的',this);" />方法三:protected void Button1_Click(object sender, EventArgs e)
    {
        this.ClientScript.RegisterStartupScript(typeof(string),"js","sAlert('渐变的',document.getElementById('"+Button1.ClientID+"'));",true);    } 

Answer 3

<asp:Button ID="Button1" runat="server" OnClientClick="sAlert('渐变的',this);" />

Answer 4

http://topic.csdn.net/u/20090519/09/c14682c9-b3ec-45f7-a1bb-86872e28f942.html

Answer 5

谢谢各位， 阿非和天行健你们的方法都试了下，我点击button1都没反应。<asp:Button ID="Button1" runat="server" OnClientClick="sAlert('渐变的',this);" />
我想让button1按过后执行onclick="Button1_Click" 因为会有其他代码，来判断到底要不要执行 sAlert('渐变的',this);Default.aspx -----------------------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
<script type="text/javascript" language="javascript" src="JS/divalert.js"> </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="button" value="点击这里" onclick="sAlert('渐变的',this);" />
        <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
        <asp:Literal ID="Literal1" runat="server"></asp:Literal>
    </div>
    
    </form>
</body>
</html>Default.aspx.cs -------------------------------------------------------------
 protected void Button1_Click(object sender, EventArgs e)
    {
        //string str;
        //str = "<script language='javascript'>";
        //str += "sAlert('渐变的',document.getElementById('" + Button1.ClientID + "'));";
        //str += "</script>";
        //Literal1.Visible = true;
        //Literal1.Text = str;        this.ClientScript.RegisterStartupScript(typeof(string), "js", "sAlert('渐变的',document.getElementById('" + Button1.ClientID + "'));", true);
    }

Answer 6

仔细看了一下
问题在这
var eSrc=(document.all)?window.event.srcElement:arguments[1]; 
你的js中的 sAlert 方法 有一个参数
调用的时候 是用 sAlert('渐变的',this); 这种形式调用的 传递了两个参数var eSrc=(document.all)?window.event.srcElement:arguments[1];
这句的意思是  如果是IE那么就会调用触发事件的事件源
当你点击input button时，因为触发源是本身 也就是this 所以没有问题，
当你传input button 本身的引用(指针)时，因为是IE 所以 eSrc=window.event.srcElement;
而window.event.srcElement 又为null 所以 失效
你现在的代码 在非IE的浏览器 中应该是可用的
改成通用的话，如下:
function sAlert(txt,obj){ 
    var eSrc=obj;
    ...

Answer 7

仔细看了一下 
问题在这 
var eSrc=(document.all)?window.event.srcElement:arguments[1]; 
你的js中的 sAlert 方法 有一个参数 
调用的时候 是用 sAlert('渐变的',this); 这种形式调用的 传递了两个参数 var eSrc=(document.all)?window.event.srcElement:arguments[1]; 
这句的意思是  如果是IE那么就会使用触发事件的事件源 ,不是IE就会使用 传递的第二个参数
当你点击input button时，因为触发源是本身 也就是this 所以没有问题。 
当你传input button 本身的引用(指针)时，就是document.getElementById('id')这种形式。
因为是IE 所以 eSrc=window.event.srcElement; 
而window.event.srcElement 又为null 所以 失效 
你现在的代码 在非IE的浏览器 中应该是可用的 
改成通用的话，如下: 
function sAlert(txt,obj){ 
    var eSrc=obj;
    ...

Answer 8

 this.button1.Attributes.Add("onclick", "sAlert('渐变的',this)"); 

Answer 9

现在能显示了弹出的层了，不过还有个错误提示出来，这是怎么回事啊。
Internet Explorer cannot open the Internet site http://localhost:1463/Divtest/Default.aspx.Opertation aborted

Answer 10

有可能是js函数执行时，html标记还没有完全输出，或者你在子元素内修改父元素的html内容了。你现在代码是怎么写的

Answer 11

前台用<input type="button" value="点击这里" onclick="sAlert('渐变的',this);" />
直接调用没问题的。
Default.aspx ----------------------------------------------------------
<!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>
<script type="text/javascript" language="javascript" src="JS/divalert.js"> </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="button" value="点击这里" onclick="sAlert('渐变的',this);" />
        <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
        <asp:Literal ID="Literal1" runat="server"></asp:Literal>
    </div>
    
    </form>
</body>
</html>Default.aspx.cs --------------------------------------------------
public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        this.ClientScript.RegisterStartupScript(typeof(string), "js", "sAlert('渐变的',document.getElementById('" + Button1.ClientID + "'));", true);
    }
}divalert.js ---------------------------------------------------------function sAlert(txt,obj){
    var eSrc=obj;
    var shield = document.createElement("DIV");
    shield.id = "shield";
    shield.style.position = "absolute";
    shield.style.left = "0px";
    shield.style.top = "0px";
    shield.style.width = "100%";
    shield.style.height = document.body.scrollHeight+"px";
    shield.style.background = "#333";
    shield.style.textAlign = "center";
    shield.style.zIndex = "10000";
    shield.style.filter = "alpha(opacity=0)";
    shield.style.opacity = 0;
    var alertFram = document.createElement("DIV");
    alertFram.id="alertFram";
    alertFram.style.position = "absolute";
    alertFram.style.left = "50%";
    alertFram.style.top = "50%";
    alertFram.style.marginLeft = "-225px" ;
    alertFram.style.marginTop = -75+document.documentElement.scrollTop+"px";
    alertFram.style.width = "450px";
    alertFram.style.height = "150px";
    alertFram.style.background = "#ccc";
    alertFram.style.textAlign = "center";
    alertFram.style.lineHeight = "150px";
    alertFram.style.zIndex = "10001";
    strHtml = "<ul style=\"list-style:none;margin:0px;padding:0px;width:100%\">\n";
    strHtml += "    <li style=\"background:#DD828D;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #F9CADE;\">[系统提示]</li>\n";
    strHtml += "    <li style=\"background:#fff;text-align:center;font-size:12px;height:120px;line-height:120px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;\">"+txt+"</li>\n";
    strHtml += "    <li style=\"background:#FDEEF4;text-align:center;font-weight:bold;height:25px;line-height:25px; border:1px solid #F9CADE;\"><input type=\"button\" value=\"确 定\" id=\"do_OK\" onclick=\"doOk()\" /></li>\n";
    strHtml += "</ul>\n";
    alertFram.innerHTML = strHtml;
    document.body.appendChild(alertFram);
    document.body.appendChild(shield);
    this.setOpacity = function(obj,opacity){
        if(opacity>=1)opacity=opacity/100;
        try{ obj.style.opacity=opacity; }catch(e){}
        try{ 
            if(obj.filters.length>0&&obj.filters("alpha")){
                obj.filters("alpha").opacity=opacity*100;
            }else{
                obj.style.filter="alpha(opacity=\""+(opacity*100)+"\")";
            }
        }catch(e){}
    }
    var c = 0;
    this.doAlpha = function(){
        if (++c > 20){clearInterval(ad);return 0;}
        setOpacity(shield,c);
    }
    var ad = setInterval("doAlpha()",1);
    this.doOk = function(){
        //alertFram.style.display = "none";
        //shield.style.display = "none";
        document.body.removeChild(alertFram);
        document.body.removeChild(shield);
        eSrc.focus();
        document.body.onselectstart = function(){return true;}
        document.body.oncontextmenu = function(){return true;}
    }
    document.getElementById("do_OK").focus();
    eSrc.blur();
    document.body.onselectstart = function(){return false;}
    document.body.oncontextmenu = function(){return false;}
}

Answer 12

protected void Button1_Click(object sender, EventArgs e) 
    { 
        this.ClientScript.RegisterStartupScript(typeof(string), "js", "sAlert('渐变的',document.getElementById('" + Button1.ClientID + "'));", true); 
    } 
改为protected void Button1_Click(object sender, EventArgs e) 
    { 
        string js = @"var xxx = function (){ 
                      sAlert('渐变的',document.getElementById('" + Button1.ClientID + @"'))
                    }
                    window.attachEvent('onload', xxx);";
        ClientScript.RegisterStartupScript(GetType(), "js",js, true);
    } 

Answer 13

protected void Button1_Click(object sender, EventArgs e) 
    { 
        this.ClientScript.RegisterStartupScript(typeof(string), "js", "sAlert('渐变的',document.getElementById('" + Button1.ClientID + "'));", true); 
    } 
改为 protected void Button1_Click(object sender, EventArgs e) 
    { 
        string js = @"var xxx = function (){ 
                      sAlert('渐变的',document.getElementById('" + Button1.ClientID + @"')) 
                    } 
                    window.attachEvent('onload', xxx);"; 
        ClientScript.RegisterStartupScript(GetType(), "js",js, true); 
    } 

Answer 14

写个完整的，兼容其他浏览器的protected void Button1_Click(object sender, EventArgs e) 
    { 
        string js = @"var xxx = function (){ 
                      sAlert('渐变的',document.getElementById('" + Button1.ClientID + @"'))
                    }
                    if(document.all)
                    {
                        window.attachEvent('onload', xxx);
                    }
                    else
                    {
                        window.addEventListener('load', xxx , false);
                    }";
        ClientScript.RegisterStartupScript(GetType(), "js",js, true); 
    } 

Answer 15

阿非你太强了，现在没问题。马上给你结分。顺便问问 为什么要这样写进一个function里，再用 window.attachEvent。 不要笑话，我对javascript不太熟

Answer 16

ClientScript.RegisterStartupScript 
这个方法 是向前台输出一段代码，不是一定是js脚本的，只是现在都习惯用它输出js脚本
当指定它的第4个参数addScriptTags 为true时 会自动加上 <script> 开始和结束标记
ClientScript.RegisterStartupScript 这个方法输出的js脚本在</form>之前你一开始用的Literal.Text来输出js脚本 也是可以的，它的位置相对灵活一些，
Literal放在那里就在那里输出js脚本，但Literal 只能放在<form runat="server"></form>中间也就是输出的js脚本都在</form>之前 也等于在</body>之前
Internet Explorer cannot open the Internet site http://localhost:1463/Divtest/Default.aspx. Opertation aborted这个错误就是
MSDN:子容器 HTML 元素包含试图修改子容器的父容器元素的脚本.
上面是MSDN 的说法，在你的代码里 就是在body 闭合之前 不能修改它的内容之前<input type="button" value="点击这里" onclick="sAlert('渐变的',this);" /> 
好用 是因为你在单击按钮的时候 页面已经加载完毕了。
可ClientScript.RegisterStartupScript 不好用是
脚本加载到</form>之前  </body>还没有出现，这个时候你调用了sAlert 方法
也就是调用了
document.body.appendChild(alertFram); 
    document.body.appendChild(shield); 
这在IE6,IE7中认为是不合法的，是错误的。 在IE8中是可以的。
所以出现了

Internet Explorer cannot open the Internet site http://localhost:1463/Divtest/Default.aspx. Opertation aborted

解决办法 就是要不在</body> 标记的后面加载js脚本，要不就是等页面加载之后运行sAlert 方法
所以就有了window.attachEvent('onload', methodName);
这个形式 用于将sAlert 方法包装一下，在页面加载结束后运行

Answer 17

4楼基本说完，
提示一下，如果使用ajax.net的UpdatePanel 控件 第三种方法修改为调用ScriptManager.RegisterStartupScript(this.UpdatePanel1, this.GetType(), "js", "sAlert('渐变的',document.getElementById('"+Button1.ClientID+"'));",true);"
作用是注册页面js 代码并执行。 ClientScript.RegisterStartupScript 需要页面初始化的时候才是执行一次。
  

Answer 18

正在学习ASP.NET........,学习的最好方式就是不耻下问。

Answer 19

this.ClientScript.RegisterStartupScript
没有什么比这个更好的方法了  

Answer 20

学习下，asp.net中的js确实不太好处理

Answer 21

protected void Button1_Click(object sender, EventArgs e) 
    { 
        string js = @"var xxx = function (){ 
                      sAlert('渐变的',document.getElementById('" + Button1.ClientID + @"'))
                    }
                    if(document.all)
                    {
                        window.attachEvent('onload', xxx);
                    }
                    else
                    {
                        window.addEventListener('load', xxx , false);
                    }";
        ClientScript.RegisterStartupScript(GetType(), "js",js, true); 
    } 
这种方式在页面刷新时还是出现对话框<asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="sAlert('渐变的',this);"   />
        </ContentTemplate>
        </asp:UpdatePanel>
加一个UpdatePanel 
方法一： C# code 
protected void Page_Load(object sender,EventArgs e) 
{ 
    Button1.Attributes.Add("onclick","sAlert('渐变的',this);"); 
} 
方法二： HTML code 
<asp:Button ID="Button1" runat="server" OnClientClick="sAlert('渐变的',this);" /> 
都可以了

Answer 22

但Literal 只能放在<form runat="server"></form>中间
--------------------------------------------------------
这个说法是错误的，Literal 可以放在页面的任何位置，<html>标记外也可以。特此更正,对之前的误导深感抱歉~