第四章介绍了asp.net服务器控件的类型,格式化控件,介绍HTML服务器控件,以及如何调用客户端脚本
我们主要学asp.net2.0新加的内容
1.服务器控件类型
2.识别服务器控件
服务器控件左上角有个绿色的三角,将HTML控件转为服务器控件只需选中控件,点右健选择作为服务器控件运行
3.格式化控件
3.1使用服务器控件本身的属性来定义
3.2.使用样式表格式化,当然CSS样式表可分为外部和内部
3.3也可以使用编程的方式来指定属性
4.共享 HTML 控件属性
所有 HTML 控件共享的属性
5.asp.net2.0 HTML服务器新增控件
一.HtmlHead 提供对服务器上的 HTML<head> 元素的编程访问
<head id="head1"
runat="server">
<title>To be replaced.</title>
</head>
runat="server">
<title>To be replaced.</title>
</head>
二.HtmlInputPassword 允许编程访问服务器上的 HTML <input type= password> 元素,用于创建一个允许用户输入密码的单行文本框
<input type="password" runat="server" />
三.HtmlInputReset 允许编程访问服务器上的 HTML <input type=reset> 元素,用于在网页上创建可将窗体控件重置为初始值的按钮控件
<input id="Reset1" type="reset" value="Clear" runat="server" />
四.HtmlInputSubmit 允许编程访问服务器上的 HTML <input type= submit> 元素,用于在网页上创建一个可提交窗体的按钮控件
<input type="submit" runat="server" value="Submit" />
五.HtmlLink HtmlLink 控件可用于以声明方式在网页中指定级联样式表引用
<head runat="server">
<title>HtmlLink Control</title>
<link id="Resource1" href="StyleSheet.css" runat="server" />
</head>
<title>HtmlLink Control</title>
<link id="Resource1" href="StyleSheet.css" runat="server" />
</head>
六.HtmlTitle 允许编程访问服务器上的 HTML <title> 元素,以编程方式指定 Web 窗体页的 HTML <title> 元素
<%@ Page Language="C#" %>
<script runat="server">
void Page_Load(object sender, EventArgs e)
{
if (Page.Header != null)
{
Page.Header.Title = "Welcome! The time is: " + System.DateTime.Now;
}
}
</script>
<html>
<head id="Head1" runat="server">
</head>
<body>
<form id="form1" runat="server">
<h3>HtmlTitle Example</h3>
</form>
</body>
</html>
<script runat="server">
void Page_Load(object sender, EventArgs e)
{
if (Page.Header != null)
{
Page.Header.Title = "Welcome! The time is: " + System.DateTime.Now;
}
}
</script>
<html>
<head id="Head1" runat="server">
</head>
<body>
<form id="form1" runat="server">
<h3>HtmlTitle Example</h3>
</form>
</body>
</html>
七.HtmlMeta 允许以编程方式访问服务器上的 HTML<meta> 标记
<%@ Page Language=”VB” %>
<script runat=”server”>
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
Meta1.Attributes(“Name”) = “description”
Meta1.Attributes(“CONTENT”) = “Generated on: “ & DateTime.Now.ToString()
End Sub
</script>
<html xmlns=”http://www.w3.org/1999/xhtml” >
<head runat=”server”>
<title>Using the HtmlGenericControl class</title>
<meta id=”Meta1” runat=”server” />
</head>
<body>
<form id=”form1” runat=”server”>
<div>
The rain in Spain stays mainly in the plains.
</div>
</form>
</body>
</html>
<script runat=”server”>
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
Meta1.Attributes(“Name”) = “description”
Meta1.Attributes(“CONTENT”) = “Generated on: “ & DateTime.Now.ToString()
End Sub
</script>
<html xmlns=”http://www.w3.org/1999/xhtml” >
<head runat=”server”>
<title>Using the HtmlGenericControl class</title>
<meta id=”Meta1” runat=”server” />
</head>
<body>
<form id=”form1” runat=”server”>
<div>
The rain in Spain stays mainly in the plains.
</div>
</form>
</body>
</html>
6.管理客户端脚本
ClientScriptManager用于在 Web 应用程序中定义用于管理客户端脚本的方法
6.1
使用OnClientClick属性指定引用的脚本事件
<%@ Page Language="C#" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
string myScript = @"function AlertHello() { alert('Hello ASP.NET'); }";
Page.ClientScript.RegisterClientScriptBlock(this.GetType(),
"MyScript", myScript, true);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Adding JavaScript</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" Runat="server" Text="Button"
OnClientClick="AlertHello()" />
</div>
</form>
</body>
</html>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
string myScript = @"function AlertHello() { alert('Hello ASP.NET'); }";
Page.ClientScript.RegisterClientScriptBlock(this.GetType(),
"MyScript", myScript, true);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Adding JavaScript</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" Runat="server" Text="Button"
OnClientClick="AlertHello()" />
</div>
</form>
</body>
</html>
再看下面的例子
6.2
<%@ Page Language="C#" %>
<!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)
{
// Page will produce Javascript error
string myScript = @"alert(document.forms[0]['TextBox1'].value);";
Page.ClientScript.RegisterClientScriptBlock(this.GetType(),
"MyScript", myScript, true);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server" Text="Hello ASP.NET"></asp:TextBox>
</div>
</form>
</body>
</html>
<!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)
{
// Page will produce Javascript error
string myScript = @"alert(document.forms[0]['TextBox1'].value);";
Page.ClientScript.RegisterClientScriptBlock(this.GetType(),
"MyScript", myScript, true);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server" Text="Hello ASP.NET"></asp:TextBox>
</div>
</form>
</body>
</html>
本来的意思是想弹出一个确认窗口,但出现错误提示对象为空可以使用RegisterStartupScript方法
RegisterStartupScript 方法添加的脚本块在页面加载完成但页面的 OnLoad 事件引发之前执行
<%@ Page Language="C#" %>
<!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)
{
string myScript = @"alert(document.forms[0]['TextBox1'].value);";
Page.ClientScript.RegisterStartupScript(this.GetType(),
"MyScript", myScript, true);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server" Text="Hello ASP.NET"></asp:TextBox>
</div>
</form>
</body>
</html>
<!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)
{
string myScript = @"alert(document.forms[0]['TextBox1'].value);";
Page.ClientScript.RegisterStartupScript(this.GetType(),
"MyScript", myScript, true);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server" Text="Hello ASP.NET"></asp:TextBox>
</div>
</form>
</body>
</html>
也可以使用RegisterClientScriptInclude方法获取外部JS脚本
string myScript = “myJavaScriptCode.js”
Page.ClientScript.RegisterClientScriptInclude(“myKey”, myScript);
<script src=”myJavaScriptCode.js” type=”text/javascript”></script>
Page.ClientScript.RegisterClientScriptInclude(“myKey”, myScript);
<script src=”myJavaScriptCode.js” type=”text/javascript”></script>
在 ASP.NET 网页中不经过回发而实现客户端回调
客户端回调组件
创建实现客户端回调的 ASP.NET 页与创建任何 ASP.NET 页类似,但也有些不同。例如,该页必须执行以下操作:
实现 ICallbackEventHandler 接口。可以向任何 ASP.NET 网页添加此接口声明。
包括一个实现 RaiseCallbackEvent 接口的方法。此方法将由回调来调用,然后它将向 clientCallback 函数返回一个字符串。
此外,该页还必须包含执行以下操作的三个客户端脚本函数:
一个函数调用帮助器方法,该方法执行对服务器的实际请求。在此函数中,可以首先执行自定义逻辑以准备事件参数,然后可以将一个字符串作为参数发送到服务器端回调事件处理程序。
另一个函数由处理回调事件的服务器代码的结果调用并接收该结果,同时接受表示该结果的字符串。该函数称为 clientCallBack 函数。
第三个函数是执行对服务器的实际请求的 Helper 函数,当在服务器代码中使用 GetCallbackEventReference 方法生成对此函数的引用时,由 ASP.NET 自动生成该函数。
客户端回调及回发都是对起始页的请求,因此在 Web 服务器日志中将客户端回调及回发记录为页请求
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="RandomNumber.aspx.cs" Inherits="RandomNumber" %>
<!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>Callback Page</title>
<script type="text/javascript">
function GetNumber(){
UseCallback();
}
function GetRandomNumberFromServer(TextBox1, context){
document.forms[0].TextBox1.value = TextBox1;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Button1" type="button" value="Get Random Number"
onclick="GetNumber()" />
<br />
<br />
<asp:TextBox ID="TextBox1" Runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class RandomNumber : System.Web.UI.Page, ICallbackEventHandler
{
private string _callbackResult = null;
protected void Page_Load(object sender, EventArgs e)
{
string cbReference = Page.ClientScript.GetCallbackEventReference(this,
"arg", "GetRandomNumberFromServer", "context");
string cbScript = "function UseCallback(arg, context)" +
"{" + cbReference + ";" + "}";
Page.ClientScript.RegisterClientScriptBlock(this.GetType(),
"UseCallback", cbScript, true);
}
public void RaiseCallbackEvent(string eventArg)
{
Random rnd = new Random();
_callbackResult = rnd.Next().ToString();
}
public string GetCallbackResult()
{
return _callbackResult;
}
}
<!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>Callback Page</title>
<script type="text/javascript">
function GetNumber(){
UseCallback();
}
function GetRandomNumberFromServer(TextBox1, context){
document.forms[0].TextBox1.value = TextBox1;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Button1" type="button" value="Get Random Number"
onclick="GetNumber()" />
<br />
<br />
<asp:TextBox ID="TextBox1" Runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class RandomNumber : System.Web.UI.Page, ICallbackEventHandler
{
private string _callbackResult = null;
protected void Page_Load(object sender, EventArgs e)
{
string cbReference = Page.ClientScript.GetCallbackEventReference(this,
"arg", "GetRandomNumberFromServer", "context");
string cbScript = "function UseCallback(arg, context)" +
"{" + cbReference + ";" + "}";
Page.ClientScript.RegisterClientScriptBlock(this.GetType(),
"UseCallback", cbScript, true);
}
public void RaiseCallbackEvent(string eventArg)
{
Random rnd = new Random();
_callbackResult = rnd.Next().ToString();
}
public string GetCallbackResult()
{
return _callbackResult;
}
}