.Net后台使用RegisterClientScriptBlock和RegisterStartupScript调用前台的JS 区别 -

songjg2010

浏览: 214555 次
性别:
来自: 北京

最近访客更多访客>>

gypb

likejiushilike

frantic

wain163

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

.Net后台使用RegisterClientScriptBlock和RegisterStartupScript调用前台的JS 区别

.net ASP.net ASP Ajax 脚本

this.Page.ClientScript.RegisterClientScriptBlock() 和this.Page.ClientScript.RegisterStartupScript()的区别

aspx页面：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RegsterClientJs.aspx.cs" Inherits="Ajax.Study.RegsterClientJs" %>

<!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>Register Client Script</title>
    <script type="text/javascript">
        function Test(nodeId) {
            document.getElementById(nodeId).style.display = "none";
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="tbName" runat="server" Text="name"></asp:TextBox>
        <asp:TextBox ID="tbAge" runat="server" Text="age"></asp:TextBox>
        <asp:Button ID="BtnTest" runat="server" Text="RegisterStartupScript 隐藏age输入框" onclick="BtnTest_Click" />
        <asp:Button ID="BtnTest2" runat="server" 
            Text="RegisterClientScriptBlock 隐藏age输入框" onclick="BtnTest2_Click"  />
    </div>
    </form>
</body>
</html>

后台代码：

       protected void Page_Load(object sender, EventArgs e)
       {

       }
       /// <summary>
       /// 使用RegisterStartupScript注册js脚本
       /// </summary>
       /// <param name="sender"></param>
       /// <param name="e"></param>
       protected void BtnTest_Click(object sender, EventArgs e)
       {
           //注册到 <form> 尾部 ,HTML元素已加载完毕
           this.Page.ClientScript.RegisterStartupScript(this.GetType(), "age1", "Test('" + tbAge.ClientID + "');", true);
       }


       /// <summary>
       /// 使用RegisterClientScriptBlock注册js脚本
       /// </summary>
       /// <param name="sender"></param>
       /// <param name="e"></param>
       protected void BtnTest2_Click(object sender, EventArgs e)
       {
           //注册到<form> 头部 ,此时HTML还未加载!
           //js会报缺少对象
           this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "age2", "Test('" + tbAge.ClientID + "');", true);
       }

运行程序后,查看源文件就会看到他们的巨大差别！这里我就懒得贴图了！见谅。

另：如果你是用了ajax的UpdatePanel控件在试一试上面的代码呢?（把上面的div内容放在UpdatePanel里面）

<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="sm" runat="server" />
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
    <div>
        <asp:TextBox ID="tbName" runat="server" Text="name"></asp:TextBox>
        <asp:TextBox ID="tbAge" runat="server" Text="age"></asp:TextBox>
        <asp:Button ID="BtnTest" runat="server" Text="RegisterStartupScript 隐藏age输入框" onclick="BtnTest_Click" />
        <asp:Button ID="BtnTest2" runat="server" 
            Text="RegisterClientScriptBlock 隐藏age输入框" onclick="BtnTest2_Click"  />
    </div>
     </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>

后台代码：

/// <summary>
        /// 使用RegisterStartupScript注册js脚本
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void BtnTest_Click(object sender, EventArgs e)
        {
            //注册到 <form> 尾部 ,HTML元素已加载完毕
            //this.Page.ClientScript.RegisterStartupScript(this.GetType(), "age1", "Test('" + tbAge.ClientID + "');", true);

            //UpdatePanel 是用ajax后用上面的没有效果
            ScriptManager.RegisterStartupScript(this.UpdatePanel1, this.GetType(), "age1", "Test('" + tbAge.ClientID + "');", true);

        }
        /// <summary>
        /// 使用RegisterClientScriptBlock注册js脚本
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void BtnTest2_Click(object sender, EventArgs e)
        {
            //注册到<form> 头部 ,此时HTML还未加载!
            //js会报 缺少对象 
            
            //this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "age2", "Test('" + tbAge.ClientID + "');", true);

            //使用ajax的UpdatePanel 后
             //页面上的this.UpdatePanel1控件ID
            ScriptManager.RegisterClientScriptBlock(this.UpdatePanel1, typeof(Page), "key1", "Test('" + tbAge.ClientID + "');", true);
        }

效果实现了撒，而且没有刷新!好像使用了UpdatePanel1后RegisterClientScriptBlock也没有报错了！当然这个示例只是为了我学习RegisterStartupScript和RegisterClientScriptBlock的区别! 以上功能可以直接用客服端js就实现了没有必要再后台处理！

分享到：