.Net后台使用RegisterClientScriptBlock和RegisterStartupScript调用前台的JS 区别
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就实现了没有必要再后台处理！
在此感谢我的同事：bobby！因为使用UpdatePanel 后注册js是他告诉我的！