关于ASP.NET中web编程后台添加脚本语言-优快云博客

本文探讨了ASP.NET中按钮OnClientClick事件为何无法触发窗口确认框，并提供了正确的实现方式。通过前后端代码对比，解释了OnClientClick与onclick的区别。

本文的内容很简单，高手童鞋些请绕道。。。

前台的页面代码很简单

<%@ 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>无标题页</title>
   <%--<script language="javascript" type="text/javascript">
         function TestExcuteClient()
         {
            return window.confirm("确定要显示信息吗?");
         }
    </script>--%>
</head>
<body>
    <form id="form1" runat="server">
    <div>
         <asp:Button ID="Btn_ShowInfo" runat="server" Text="显示信息" OnClick="Btn_ShowInfo_Click" />
         <asp:Label ID="Lbl_Info" runat="server" ForeColor="red"></asp:Label>
    </div>
    </form>
</body>
</html>
后台代码：

protected void Page_Load(object sender, EventArgs e)
{
if (!this.Page.IsPostBack)

        {
             this.this.Lbl_Info.Text ="";
             this.Btn_ShowInfo.Attributes["OnClientClick"] = "return window.confirm('确定要显示信息吗？')";

       }
    }
    protected void Btn_ShowInfo_Click(object sender, EventArgs e)
    {
        this.Lbl_Info.Text = "这是服务端发出的信息";
    }

按照我们的想法，在后台代码中给按钮添加客户端的处理事件OnClientClick,但是运行之后就会发现这种方法无法实现弹出确定消息框。运行之后的页面的源码如下：

<div>
         <input type="submit" name="Btn_ShowInfo" value="显示信息" id="Btn_ShowInfo" OnClientClick="return window.confirm('确定要显示信息吗?')" />
         <span id="Lbl_Info" style="color:Red;">这是服务端发出的信息</span>
    </div>
  而OnClientClick却在页面中无法运行，那我们换一种测试方法，将后台代码完全给注释掉。然后还是利用前台的JS代码来实现window.confirm的作用

前台代码变成这样：

<head runat="server">
    <title>无标题页</title>
   <script language="javascript" type="text/javascript">
         function TestExcuteClient()
         {
            return window.confirm("确定要显示信息吗?");
         }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
         <asp:Button ID="Btn_ShowInfo" runat="server" Text="显示信息" OnClick="Btn_ShowInfo_Click" OnClientClick="return TestExcuteClient()"; />
         <asp:Label ID="Lbl_Info" runat="server" ForeColor="red"></asp:Label>
    </div>
    </form>
</body>
</html>

后台代码就只有按钮的处理事件

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

        //if (!this.Page.IsPostBack)
        //    this.Btn_ShowInfo.Attributes["OnClick"] = "return window.confirm('确定要显示信息吗?')";
        //this.Btn_ShowInfo.Attributes["OnClientClick"] = "return window.confirm('确定要显示信息吗?')";
    }
    protected void Btn_ShowInfo_Click(object sender, EventArgs e)
    {
        this.Lbl_Info.Text = "这是服务端发出的信息";
    }
}
运行之后的结果：

当然就是在单击按钮的时候会提示是否现实消息，那我们这个时候来看下生成的页面代码：

比较下两者生成的页面代码的不同之处。发现能实现confirm消息确认框的生成了onclick事件的处理方法，而不能实现这一功能的却生成了OnClientClick方法。对于前台页面来说，浏览器无法处理OnClientClick这一事件，那位了能实现前台也能生成onclick的处理方法，我们在后台代码将this.Btn_ShowInfo.Attributes["OnClientClick"] = "return window.confirm('确定要显示信息吗?')";改为this.Btn_ShowInfo.Attributes["OnClick"] = "return window.confirm('确定要显示信息吗?')";就能实现。

补充下：this.Btn_ShowInfo.Attributes["OnClick"] = "return window.confirm('确定要显示信息吗?')";和 this.Btn_ShowInfo.Attributes.Add("OnClick", "return window.confirm('确定要显示信息吗?')");是一样的效果。

思考：为什么要使用后台编程的方法来实现消息确认框，因为我们在做web编程的时候，在做删除功能的时候，往往需要提示客户是否删除某条记录，而这条记录是动态的，如果用前台的方法，比如用<%=%>之类的传变量到前台方法中实现也可以，但是为了能使后台编程简单易维护，就可以在后台中通过拼字符串的方法提示用户删除具体的某条记录：如

this.Btn_ShowInfo.Attributes.Add("OnClick", "return window.confirm('确定要删除["+username+"]的信息吗?')");其中username是变量

延伸之处：我们在处理大量gridview表格的行列的时候可以根据内容显示的方法不同或者处理的事件不同，如在GridView里的RowDataBound事件里写如下代码

e.Row.Attributes.Add("key","value"),

下面列举两个常用的：

e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='#aafdaa'")// 鼠标经过的时候颜色的变化

e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='#FFFFFF'") // 鼠标离开的时候颜色变化

转载于:https://www.cnblogs.com/zhongyong314/archive/2011/08/11/2134826.html