下面是一个简单的ASP.NET AJAX示例,实现一个DropDownList 已选值,传递到一个Label的Text属性中。该程序再也不用象原来一样,出现屏幕“闪烁“。我们可以看到浏览器的”后退“按纽是灰色的,说明该程序示例它是没有象传统的提交信息来实现交互的。
我们制作该示例程序很简单,只需要拖两个控件ScriptManager,UpdatePanl到页面中,然后在UpdatePanl的ContentTemplate中放入DropDownList,有两个选择项“hello,world“和“hello,ajax”(记得将DropDownList的AutoPastBack设置为True),再放置一个Label控件。这样我们就完成了简单的示例,在浏览器中浏览就可以看到效果了。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"Namespace="System.Web.UI" TagPrefix="asp" %>
<script runat="server">
void DropDownSelection_Change(Object sender, EventArgs e)
{
Label1.Text = DropDownList1.SelectedValue;
}
</script>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownSelection_Change" AutoPostBack="True">
<asp:ListItem>hello,world</asp:ListItem>
<asp:ListItem> hello,ajax </asp:ListItem>
</asp:DropDownList>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
是不是很简单,使用ASP.NET AJAX实现ajax效果就是这么简单。请在WEB.Config配置文件当中加入以下配置信息,否则程序将报“Sys未定义”错误:
<httpHandlers>
<add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
</httpHandlers>
下面我们将叙述如何来进行错误处理。