决战.NET
上QQ阅读APP看本书，新人免费读10天
设备和账号都新为新人
上一章目录下一章

2.3 与ASP.NET AJAX的初次接触

安装了ASP.NET AJAX后，Visual Studio 2005中的“New Web Site”向导中会多一个ASP.NET AJAX的项目模板，如图2-8所示。

true

图2-8

请点击“OK”按钮来创建一个项目，由这个模板所创建出来的Web Site项目中包含了ASP.NET AJAX所需要的web.config配置设定，同时这个模板也会产生一个默认网页，里面放置了一个ScriptManager控件，每个欲使用ASP.NET AJAX技术的网页里都需要放置这个控件，如图2-9所示。

true

图2-9

接着请在Default.aspx页面中放置一个UpdatePanel控件，此控件外观与Panel控件无异，设计师可于其内放入大多数的ASP.NET控件，如图2-10所示。

true

图2-10

接着请在UpdatePanel控件外面放入一个SqlDataSource控件，并配置其链接至Northwind数据库的Customers数据表。完成后再放一个GridView控件至UpdatePanel控件外面，将其DataSourceID设为刚放入的SqlDataSoruce控件。此时请不要启动GridView控件的分页功能，让这个GridView控件一次列出Customers数据表中的所有数据，如图2-11所示。

true

图2-11

接着再放一个Button控件至UpdatePanel里面，如图2-12所示。

true

图2-12

用鼠标双击页面上的Button控件来添加Click事件，并键入程序2-1的代码。

程序2-1

    Samples\2\FirstAjax\Default.aspx.cs
    protected void Button1_Click(object sender, EventArgs e)
    {
        Button1.Text = DateTime.Now.ToString();
    }

接着再放一个Button控件至UpdatePanel控件外面，如图2-13所示，同样于Click事件键入程序2-2的代码。

true

图2-13

程序2-2

    Samples\2\FirstAjax\Default.aspx.cs
    protected void Button2_Click(object sender, EventArgs e)
    {
      Button2.Text = DateTime.Now.ToString();
    }

完成后运行程序，请分别点击两个按钮来观察网页的刷新状态，你会发现放置于UpdatePanel控件外面的Button（由上数来第二个Button）被点击时，网页有非常明显的重新刷新动作，但点击UpdatePanel控件里面的Button时，感觉上网页并没有刷新，而是直接显示现在的时间，如图2-14所示。

true

图2-14

在用户点击UpdatePanel控件里面的Button时，网页会进行一次Postback动作，不同于传统ASP.NET网页的Postback动作，UpdatePanel中控件的Postback动作称为Async-Postback，也就是非同步的Postback。这种类型的Postback动作不会导致整个网页刷新，而仅仅是刷新此控件所在的 UpdatePanel 控件及网页上的所有将UpdateMode属性设为Always的UpdatePanel控件内的内容，相较于传统的刷新整个网页的动作，Async-Postback的动作不容易被用户察觉。对用户而言，如果画面上的这些UpdatePanel控件所涵盖的区域较大时，只会察觉到这些区域内的网页似乎有种停滞感，而不是如以往般，整个网页会变成全白然后再显示。接着请回到设计页面，再放入一个UpdatePanel控件，并将原本位于外面的SqlDataSoruce及GridView控件移入此UpdatePanel控件中，重新配置SqlDataSource成可编辑的DataSource，接着点击“Tasks”窗口中的“Refresh Schema”连结，这会重设GridView控件所显示的字段，如图2-15所示。

true

图2-15

接着请点击GridView控件，启用其分页功能后运行程序，在点击“Edit”连结后，你应会察觉到每次点击“Edit”连结时，似乎会稍微停滞一段时间才会显示，不过并没有原本的闪动情况发生，如图2-16所示。

true

图2-16

这个现象告诉我们，UpdatePanel控件所涵盖区域在刷新时，不会如传统网页般发生闪动情况，而是显现成略停滞状态。看到这里，细心的读者会察觉到这个行为模式有着一个可能会发生异常的情况，那就是当Async-Postback动作发生时，若后端需要较多时间来处理这个动作，此时这些区域将会体现停滞状态，如果用户于此期间再点击另一笔数据的编辑链接，就会有另一个Async-Postback动作再次送后端，那两个Async-Postback的动作先后顺序究竟是怎样的呢？想知道答案的方法很简单，请向拥有GridView控件的UpdatePanel中再放入一个Button控件，将Text属性设为“Edit 4”，在其Click事件键入程序2-3的代码即可。

程序2-3

    Samples\SecondAjax\Default.aspx.cs
    protected void Button3_Click(object sender, EventArgs e)
    {
            GridView1.EditIndex = 4;
            GridView1.DataBind();
    }

这段程序代码的意思是，当用户点击此Button后，令GridView控件进入编辑第四行的状态。请再于GridView控件的RowEditing事件中键入程序2-4的代码。

程序2-4

    Samples\SecondAjax\Default.aspx.cs
    protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
    {
            System.Threading.Thread.Sleep(5000);
    }

程序2-4 代码的意思是，当用户点击某行的Edit连结时，进入编辑状态前等待5 秒。请特别注意一点，RowEditing事件不会触发于用程序来指定EditIndex时，因此Button3_Click函数中的程序代码是不会触发RowEditing事件的。修改完成后再次运行程序，先点击第一行的Edit联结，此时网页会因Async-Postback动作的关系，出现停滞状态，请立刻点击上方的Edit 4按钮，此时会发现第四行立即进入编辑状态，但是等待了10秒后，早先点击Edit连结的第一行依旧没有进入编辑状态。这个现象已经告诉我们答案，当UpdatePanel控件中有一个Async-Postback发生，而后端需要较多时间来处理这个动作时，网页会出现停滞状态，但此时所有页面上所有控件仍处于“可操作状态”，若用户于此期间操作网页上的控件而触发了另一个Async-Postback，虽然前一个Async-Postback动作仍会“正常地完成”，不过此Async-Postback后的动作将会被放弃，也就是原本第一次发生Async-Postback后所回传的UpdatePanel控件之“更新信息会被放弃掉”！这有可能会引发一些问题，后面的章节将会再次讨论如何调整这种行为模式。

上一章目录下一章