【IT】创建第一个ajax页面 (2/215)

AJAX首次作为Visual Studio的绑定功能为我们编写代码提供了大量便利，也使我们可以运用最少的时间实现最好的用户体验。主要应用在异步处理、页面部分刷新、减少数据传输量、提供用户体验上。
今天不对AJAX做过多讲解，主要是通过示例提供一个对ajax的直观印象。
本篇目标：
1、  使用ajax获取数据。
2、  实现页面的局部刷新。
3、  获取数据时提示用户正在获取数据。
4、  允许用户取消数据获取。
1、使用快捷键Shift+Alt+N创建一个web站点。


2、使用快捷键Ctrl+N创建一个linq数据映射，命名为Northwind.dbml。



3、将northwind中的数据表添加数据映射中。详细方法见第二篇。
4、使用快捷键Ctrl+N创建一个新的aspx页面。



5、  打开工具栏中的 AJAX Extensions tab页, 双击 ScriptManager 控件添加到页面中。


6、双击UpdatePanel控件将其添加到页面中。
7、在属性面板中设置UpdateMode属性为Conditional。

8、向UpdatePanel1中添加控件TextBox1、Button1如下图布局。


9、设置GridView的数据源为数据映射中的Categorys表。详见第二篇。
10、在UpdatePanel下添加UpdateProgress1控件，并在其中添加Lable控件与html的按钮。
11、双击button按钮向click事件添加函数。
12、完成Button1_Click函数。
    NorthwindDataContext db;
    protected void Button1_Click(object sender, EventArgs e)
    {
        if (db == null)
        {
            db = new NorthwindDataContext();
        }
        this.GridView1.DataSourceID = "";
        this.GridView1.DataSource = db.Categories.Where(c => c.CategoryName.IndexOf(this.TextBox1.Text.Trim()) >= 0);
        this.GridView1.DataBind();
        System.Threading.Thread.Sleep(3000);
    }

将DataSourceID设为空，防止与DataSource的冲突。
语句db.Categories.Where(c => c.CategoryName.IndexOf(this.TextBox1.Text.Trim()) >= 0)
的意思与sql的where CategoryName like this.TextBox1.Text.Trim()的类似。
System.Threading.Thread.Sleep(3000);表示将当前线程延迟3秒等待获取数据。
13、在html代码中向ScriptManager的后面添加js

<script language="javascript" type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
function CancelAsyncPostBack() {
    if (prm.get_isInAsyncPostBack()) {
      prm.abortPostBack();
    }
}
</script>

14、设置html按钮的onclick事件
<input type="button" style="width: 80px" value="取消" onclick="CancelAsyncPostBack()" />
15、在浏览器中浏览效果如下。

在Textbox中输入，然后点击Button，效果如下。


如果此时点击取消按钮，数据获取将取消。
到这里就完成了。