ASP.NET AJAX無刷新數(shù)據(jù)處理技術(shù)
本章介紹ASP.NET AJAX無刷新數(shù)據(jù)處理技術(shù),如搭建無刷新Web環(huán)境、使用ASP.NET AJAX基本控件實現(xiàn)無刷新的操作(如計時器、顯示頁面進程等)、使用ASP.NET AJAX Toolkit中的控件無刷新處理數(shù)據(jù)的技術(shù)(如密碼強度提示、控制用戶輸入格式、文本輸入建議、文本提示、動態(tài)排序、彈出式日歷、滑動條、多樣式驗證提示框等)。
21.1 創(chuàng)建無刷新Web環(huán)境
ASP.NET AJAX中的ScriptManager控件又稱為腳本管理控件。它能夠管理Web窗體頁(或內(nèi)容頁、母版頁等)上的腳本,以及基于ASP.NET AJAX的服務(wù)器端和客戶端控件。它和UpdatePanel控件能夠共同實現(xiàn)無刷新的Web環(huán)境。
★ 注意 ★
本章介紹的所有實例都包含在Sample_21應(yīng)用程序中,在【解決方案資源管理器】面板中查看Sample_21應(yīng)用程序,如圖21-1所示。在本章其他實例中,不再對該應(yīng)用程序進行說明。
圖21-1 在【解決方案資源管理器】面板中查
看Sample_21應(yīng)用程序
★ 注意 ★
Sample_21應(yīng)用程序的數(shù)據(jù)庫連接字符串放置在Web.config配置文件的元素中,程序代碼如下。
<%@ Page Language="C#" AutoEventWireup="true"
StylesheetTheme="Aspnet3DBWeb"
CodeFile="UpdateData.aspx.cs" Inherits="UpdateData" %><connectionStrings>
<add name="ASPNET3WEBDBCONNECTIONSTRING"
connectionString="data source=localhost;
user id=sa;pwd=123456;database= ASPNET3WebDB"
providerName="System.Data.SqlClient"/>
</connectionStrings>
實現(xiàn)目標
本實例介紹使用ASP.NET AJAX中的ScriptManager控件來創(chuàng)建無刷新的Web環(huán)境,并在無刷新的Web環(huán)境實現(xiàn)無刷新的操作。
技術(shù)實現(xiàn)
1.創(chuàng)建AjaxWeb.aspx頁面
在Sample_21應(yīng)用程序中創(chuàng)建AjaxWeb.aspx頁面,并在該頁面上創(chuàng)建一個ScriptManager控件、一個UpdatePanel控件、一個Label控件和一個Button控件。這些控件的ID屬性的值分別為sm、up、lbTime和btnShowTime。其中,sm和up控件共同提供無刷新的Web環(huán)境。單擊btnShowTime控件可以在lbTime控件中顯示當(dāng)前時間。AjaxWeb.aspx頁面的部分HTML設(shè)計代碼如下:
<%@ Page Language="C#" AutoEventWireup="true"
StylesheetTheme="Aspnet3DBWeb"
CodeFile="AjaxWeb.aspx.cs" Inherits="AjaxWeb" %><%@ Page Language="C#" AutoEventWireup="true"
StylesheetTheme="Aspnet3DBWeb"
CodeFile="AjaxWeb.aspx.cs" Inherits="AjaxWeb" %>
<head runat="server"><title>創(chuàng)建無刷新Web環(huán)境</title></head>
<asp:ScriptManager ID="sm" runat="server" />
<asp:UpdatePanel ID="up" runat="server"><ContentTemplate>
<asp:Label ID="lbTime" runat="server"></asp:Label>
<asp:Button ID="btnShowTime" runat="server"
Text="顯示當(dāng)前時間" onclick= "btnShowTime_Click" />
</ContentTemplate></asp:UpdatePanel>
2.AjaxWeb.aspx頁面事件設(shè)計
單擊AjaxWeb.aspx頁面中的【顯示當(dāng)前時間】按鈕(btnShowTime控件)觸發(fā)其Click事件:btnShowTime_Click(object sender,System.EventArgs e)。該事件實現(xiàn)在lbTime控件顯示當(dāng)前時間的功能,它的程序代碼如下:
<%@ Page Language="C#" AutoEventWireup="true"
StylesheetTheme="Aspnet3DBWeb"
CodeFile="LinqProcedure.aspx.cs" Inherits="LinqProcedure" %>
把AjaxWeb.aspx頁面設(shè)置為Sample_21應(yīng)用程序的起始頁面,并運行該應(yīng)用程序。AjaxWeb.aspx頁面的初始界面如圖21-2所示。單擊【顯示當(dāng)前時間】按鈕(btnShowTime控件),AjaxWeb.aspx頁面將在lbTime控件中顯示當(dāng)前時間,如圖21-3所示。
★ 注意 ★
單擊【顯示當(dāng)前時間】按鈕時,AjaxWeb.aspx頁面不會產(chǎn)生刷新頁面的效果。
圖21-2 AjaxWeb.aspx頁面的初始界面
圖21-3 AjaxWeb.aspx頁面無刷新顯示時間