Go homepage(回首页)
Upload pictures (上传图片)
Write articles (发文字帖)

The author:(作者)归海一刀
published in(发表于) 2014/1/30 1:13:10
第五篇:创建第一个ajax页面_[Asp.Net教程]

第五篇:创建第一个ajax页面_[Asp.Net教程]

















本节使用northwind示例数据库,没有的朋友可以在这里下载http://www.microsoft.com/downloads/details.aspx?FamilyId=06616212-0356-46A0-8DA2-EEBC53A68034&displaylang=en




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








14、设置html按钮的onclick事件




onclick="CancelAsyncPostBack()" />




15、在浏览器中浏览效果如下。




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




如果此时点击取消按钮,数据获取将取消。
到这里我们今天的示例就完成了。
代码下载

























If you have any requirements, please contact webmaster。(如果有什么要求,请联系站长)





QQ:154298438
QQ:417480759