Ajax之三 Ajax服务器端控件（下）-阿里云开发者社区

项目二：利用UpdatePanel实现局部更新数据表内容

1. 在创建好的3-2项目中添加一个ScriptManager、UpdatePanel、GridView和一个按钮控件到页面。

2. 数据表内容为某银行客户的数据表，如图3-1所示：

图3-1：某银行客户交易信息表

3. 该文件的HTML关键代码如程序清单3-3所示：

程序清单3-3利用UpdatePanel实现局部更新数据表内容1

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1"runat="server"/>
        <div>
            <asp:UpdatePanel ID="UpdatePanel1"runat="server">
                <ContentTemplate>
                    <asp:GridView ID="gvUserData"runat="server"Width="800px">
                    </asp:GridView>
                    <asp:Button ID="btnRefresh"runat="server"Text="刷  新" Width="135px"OnClick="btnRefresh_Click"/>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </form>
</body>
</html>

4. 然后，我们把GridView绑定到表userdata表，需要用户自己建立数据库Bank，查询交易记录在前三条的账户信息。

后台的关键代码如程序清单3-4所示：

程序清单3-4：利用UpdatePanel实现局部更新数据表内容2

protected void Page_Load(objectsender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
           ShowUserData();
        }
    }
    protected voidbtnRefresh_Click(object sender, EventArgs e)
    {
       ShowUserData();
    }
    /*从数据库读数据的方法.*/
    public voidShowUserData()
    {
        string selSql = "selecttop 3 * from userdata order by 记账日期desc";
       gvUserData.DataSource = DBHelper.GetDataSet(selSql).Tables[0];
       gvUserData.DataBind();
}

5.效果验证，运行程序，将显示数据库表userdata中的最近前三条数据，将数据库中的支出金额由“49.4”修改为“49.45”，点击“刷新”按钮，发现数据在页面无刷新的情况下改变,如图3-2所示。即浏览器的客户端按钮仍然为灰色不可用，因为尽管我们的数据更新了，但是并没有刷新浏览器，所以不涉及页面返回问题。

图3-2：修改数据库表并点击“刷新”按钮实现无刷新效果

该程序用到了Web.Config和DBHelper.Cs，详见项目3-2。

项目三：UpdatePanel实现触发器更新局部内容

从项目一和项目二我们知道，只要把需要数据更新的控件和触发数据更新的控件都放在UpdatePanel中就可以快速地实现AJAX效果了。但是，假如我们想利用UpdatePanel外的控件来控制数据更新，来实现AJAX效果呢？在此问题基础上，Asp.Net为UpdatePanel控件提供了一个重要属性Triggers，使用Triggers属性可以实现触发器效果。

下面来做个小案例，步骤如下：

1. 新建WEB项目3-3，在页面中添加ScriptManager、UpdatePanel、Label和Button。该文件的HTML关键代码如程序清单3-5所示：

程序清单3-5：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1"runat="server"/>
        <div>
            <asp:UpdatePanel ID="UpdatePanel1"runat="server">
                <ContentTemplate>
                    <asp:Label ID="lblMsg" runat="server"Text="Label"></asp:Label><br />
                    <asp:Button ID="btnDateTime"runat="server"Text="显示日期和时间" />
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </form>
</body>
</html>

后台代码为：

protected void btnDateTime_Click(objectsender, EventArgs e)
    {
        lblMsg.Text= DateTime.Now.ToString();
 }

运行程序，单击按钮会实现无刷新更新，但是如果我们把按钮放在UpdatePanel，效果如何呢？你会发现，单击“显示日期和时间”按钮后，页面被整个刷新，并没有达到无刷新的效果。如图3-3所示：

3.为了实现无刷新效果，只要使用UpdatePanel控件的Triggers属性即可。在HTML代码标签后面添加如下代码：

       <Triggers>
              <asp:AsyncPostBackTrigger  ControlID=＂btnDateTime＂ Event=＂Click＂/>
       </Triggers>

其中ControlID为用来生成该事件的控件ID，EventName用于刷新事件的名称。UpdatePanel另外一个触发器是PostBackTrigger用来实现整个页面的回送，一般不用。现在运行程序，单击按钮，发现控件即使在UpdatePanel外部也实现了无刷新效果。如图3-4所示：

3.3 Timer控件

Timer控件用于间隔一定的时间自动刷新页面或完成特定的任务。它是定时控件，在实际开发中，我们经常使用Timer控件来完成自动刷新功能，比如聊天室聊天内容的即时更新、“世界杯”比赛中的夺冠国家统计、电气考核指标的实时数据等，都可以通过使用Timber控件的定时功能来实现。使用Timer控件还可以打造属于Web的时钟以显示系统时间。

Timer控件仍然主要通过Interval属性和Tick事件来实现其功能，与Winform中的类似。

例如，现在要做一个实时更新的奥运金牌榜排行，就可以通过Timer控件来实现。

本案例可以参考项目三，需要在Web页面添加ScriptManager、UpdatePanel、Timer和GridView控件。

在UpdatePanel控件的标签后，假如代码为：

<Triggers>
    <asp:AsyncPostBackTriggerControlID=　＂Timer1＂ EventTime=＂Tick＂/>
</Triggers>

在Timer_Click事件中写从数据库中获得安金牌、银牌、铜牌从高到低的前10个国家的排名sql语句即可。

其中Interval表示执行Tick任务的间隔时间，单位是毫秒，这样我们一秒钟更新一次数据，你可以根据需要设置Interval具体的值。

3.4 UpdateProgress控件

在现实的网络中，当我们打开某一个网站或链接时，由于种种原因经常要等待页面显示出来，这样的用户体验真的很差。如果能在页面执行较长时间操作的同时，给用户提供一个类似于浏览器状态栏那样的进度条，将会很大地改善用户体验。所以微软在ASP.NETAjax中为我们提供了UpdateProgress控件，它可以轻松的实现这样的功能。

在下面示例中，我们模拟一个缓慢的服务器处理过程，这将使Asp.Net AJAX在服务器端代码执行的过程中显示一个等待信息框。代码如程序清单3-6所示：

程序清单3-6：使用UpdateProgress的等待信息框

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpdateProgress.aspx.cs" Inherits="_Default"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1"runat="server"/>
        <div>
            <asp:UpdatePanel ID="UpdatePanel1"runat="server">
                <ContentTemplate>                   
                    <asp:Button ID="Button1"runat="server"OnClick="Button1_Click"Text="测试UpdateProgess控件" /><br />
                    <asp:Label ID="Label1" runat="server"Text="Label"></asp:Label>
                </ContentTemplate>
            </asp:UpdatePanel>
            <asp:UpdateProgress ID="UpdateProgress1"runat="server"AssociatedUpdatePanelID="UpdatePanel1">
                <ProgressTemplate>
                    <div style="font-weight:bold;border:solid 2px black;left: 200px; width: 194px; color: blue; position:relative;
                        top: 150px; height:20px; background-color: #ffff99;">
                       正在加载数据，请稍候...
                    </div>
                </ProgressTemplate>
            </asp:UpdateProgress>
        </div>
    </form>
</body>
</html>

using System.Data;

using System.Configuration;

using System.Web;

usingSystem.Web.Security;

using System.Web.UI;

usingSystem.Web.UI.WebControls;

usingSystem.Web.UI.WebControls.WebParts;

usingSystem.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{
    protected voidPage_Load(object sender, EventArgs e)
    {
    }
    protected voidButton1_Click(object sender, EventArgs e)
    {
       System.Threading.Thread.Sleep(3000);
        Label1.Text= DateTime.Now.ToLongDateString();
    }
}

注意：如果异步回发只需要很少的时间，UpdateProgress控件显示的时间也就会很短，这样造成一个让人很不舒服的闪烁效果。这时，可能就需要使用UpdateProgress控件的DisplayAfter属性。该属性指定在显示UpdateProgress控件的中的内容之前所需要等待的毫秒数，设置一定的延迟可以避免闪烁效果。

@ 本章总结

1. 本章介绍了Asp.Net AJAX的服务器控件。

2. ScriptManager控件在每一个Asp.Net AJAX页面上都要有，并且只能有一个。

3. 常常把需要更新的内容放在UpdatePanel控件的内容模板中，以实现无刷新效果。

4. UpdatePanel控件的Triggers属性，一般在其UpdateMode属性设置为Conditional时用到。

5. UpdateProgress控件用来在更新过程中给出提示。

6. Timer控件可以用来做时钟显示系统时间，也可以定时完成特定的任务，它主要使用Interval属性和Tick属性来实现。

& 课后练习

1. 以下不属于Asp.Net AJAX核心组件的是（）

A. ScriptManager

B. Timer

C. UpdatePanel

D. Calendar

2. 以下关于ScriptManager控件的描述正确的是（）（选两项）

A. 它是更新面板，需要把更新的部分放在该控件的模版中。

B. 它在每个Asp.Net AJAX页面中都必须有。

C. 它是客户端控件，不需要设置“runat=server”。

D. 它在每个Asp.Net AJAX页面中只能有一个。

3. 以下关于UpdatePanel控件的描述不正确的是（）

A. 它是更新面板，实现无刷新时，常把需要更新的部分放在该控件的模板中。

B. 它的UpdateMode属性，可以设置为Always或Conditional。

C. 当UpdateMode属性设置为Always时，Triggers属性不生效。

D. 当UpdateMode属性设置为Conditional时，Triggers属性不生效。

Ajax之三 Ajax服务器端控件（下）

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料