技术开发 频道

用ASP.NET AJAX开发Web程序 — ScriptManager篇

 

下面是一个简单的ASP.NET AJAX示例,实现一个DropDownList 已选值,传递到一个LabelText属性中。该程序再也不用象原来一样,出现屏幕“闪烁“。我们可以看到浏览器的”后退“按纽是灰色的,说明该程序示例它是没有象传统的提交信息来实现交互的。

   
我们制作该示例程序很简单,只需要拖两个控件ScriptManagerUpdatePanl到页面中,然后在UpdatePanlContentTemplate中放入DropDownList,有两个选择项“hello,world“和“hello,ajax”(记得将DropDownListAutoPastBack设置为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>
                &nbsp;<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>

下面我们将叙述如何来进行错误处理。

0
相关文章