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