学习笔记5_ASP.NET AJAX框架

AJAX的全称是Asynchronous JavaScript and XML(异步JavaScript和XML),是多种现有技术的综合应用.

目前在ASP.NET平台上开发AJAX应用主要有两种框架:ASP.NET AJAX和jQuery.

1.AJAX原理

某些情况下不允许使用AJAX框架,需要完全自己写代码实现AJAX.

1.1AJAX的意义

用户:单击页面一个按钮,页面变成空白,等待若干时间,页面重新加载并显示.

同步:用户提交数据到重新加载页面过程是同步进行的,服务器在处理提交数据并返回新页面以前,浏览器端只能处于等待状态.看不到任何结果.
整页提交和整页返回.哪怕只修改了一个小数据.

异步方式与服务器端交互.采用页面局部刷新技术,不必提交和返回整个页面.

在浏览器端使用XMLHttpRequest对象与服务器代码进行交互.XMLHttpRequest对象可以向服务器发送一个HTTP请求(GET或POST),并取得服务器的响应结果.

取得响应后,用JavaScript显示在页面上,从而实现了异步,局部刷新页面的效果.

1.2一个简单的AJAX例子

2.ASP.NET AJAX基本控件

ASP.NET AJAX框架主要包括5个核心控件:ScriptManager控件,ScriptManagerProxy控件,UpdatePanel控件,UpdateProcess控件,Timer控件.

2.1ScriptManager控件

它是一个JavaScript脚本的管理工具,起着容纳,组织,管理JavaScript脚本的作用.在第一个使用ASP.NET AJAX的页面上必须有且只有一个ScriptManager控件,出现在其它

AJAX控件之前.

2.2ScriptManagerProxy控件

...

2.3UpdatePanel控件

(1)创建一个页面SimpleUpdatePanel.aspx

(2)放置一个ScriptManager控件

(3)在后面添加一个UpdatePanel控件

(4)拖动一个Label和Button控件到UpdatePanel控件的<ContentTemplate>中

<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <%--手工添加--%>
            <ContentTemplate>
                <asp:Button ID="Button1" runat="server" Text="获取时间" onclick="Button1_Click" />
                当前时间<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>

(5)在Button中编写Click事件

protected void Button1_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(500);
    Label1.Text = DateTime.Now.ToString();
}

使用UpdatePanel实现无刷新地加载GridView中的数据

(1)创建页面UpdatePanelPage.aspx,放置ScriptManager和UpdatePanel控件.

(2)在ContentTemplate中添加GridView和AspNetPager控件

<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <%-- 手动添加ContentTemplate标签--%>
            <ContentTemplate>
                <asp:GridView ID="GridView1" runat="server">
                </asp:GridView>
                <webdiyer:AspNetPager ID="AspNetPager1" runat="server" OnPageChanged="AspNetPager1_PageChanged">
                </webdiyer:AspNetPager>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>

(3)在Page_Load事件中加载数据,在AspNetPager_PageChanged事件中绑定分页.

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        LoadData();
    }
}

private void LoadData()
{
    NorthwindEntities db = new NorthwindEntities();
    var query = from p in db.Products
                orderby p.ProductID
                select p;

    int count = query.Count();
    AspNetPager1.RecordCount = count;

    //Skip之前要orderby
    var list = query.Skip((AspNetPager1.CurrentPageIndex - 1) * AspNetPager1.PageSize)
        .Take(AspNetPager1.PageSize).ToList();

    GridView1.DataSource = list;
    GridView1.DataBind();
}

protected void AspNetPager1_PageChanged(object sender, EventArgs e)
{
    LoadData();
}

引起页面更新和被更新的控件一般都在同一个UpdatePanel里面,如果引起页面更新和被更新的控件不在同一个UpdatePanel里面,则

引起页面更新的事情发生时,就会变成一个普通的ASP.NET服务器端事件,产生整个页面同步会发.在这种情况下,如果仍然获得AJAX效果,则

需要使用UpdatePanel的触发器.UpdatePanel触发器是指能够触发UpdatePanel进行更新的事件.

(1)在UpdatePanel外添加一个AspNetPager控件,此时代码为:

<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:GridView ID="GridView1" runat="server">
                </asp:GridView>
            </ContentTemplate>
            <Triggers>
                <%--异步回传触发器--%>
                <asp:AsyncPostBackTrigger ControlID="AspNetPager1" EventName="PageChanged" />
            </Triggers>
        </asp:UpdatePanel>
        <%--没有在UpdatePanel里面--%>
        <webdiyer:AspNetPager ID="AspNetPager1" runat="server" OnPageChanged="AspNetPager1_PageChanged">
        </webdiyer:AspNetPager>
        <a href="index.htm">返回首页</a>
    </div>
    </form>
</body>

(2)选中UpdatePanel控件,从中找到Triggers属性.添加,选中AsyncPostBackTriggers异步回传触发器.然后从ControlID下拉列表中选择AspNetPager

控件,从EventName中选择PageChanged事件.

此时有个不明白的地方是:AspNetPager的页数指示不会根据你的选择而发生变化,虽然GridView中数据发生变化.比如你选择了第4页,AspNetPager的页码还是

选中的第1页.

如图所示,AspNetPager的页码始终没发生改变.我怀疑是不是因为AspNetPager没在UpdatePanel,所以它没有更新数据.

2.4UpdateProcess控件

类似于一个进度条,通常与UpdatePanel配合使用,当UpdatePanel更新数据时,UpdateProcess中的内容就会显示出来,当UpdatePanel更新完毕时,

UpdateProgress控件中的内容会自动隐藏.

(1)添加UpdateProgress控件,添加<ProgressTemplate>模板

<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdateProgress ID="UpdateProgress1" runat="server">
            <%--手工添加ProgressTemplate--%>
            <ProgressTemplate>
                数据正在加载ing...
            </ProgressTemplate>
        </asp:UpdateProgress>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:GridView ID="GridView1" runat="server">
                </asp:GridView>
                <webdiyer:AspNetPager ID="AspNetPager1" runat="server" OnPageChanged="AspNetPager1_PageChanged">
                </webdiyer:AspNetPager>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>

为了使加载提示更加明显,在LoadData()方法中添加一句话,使线程休眠一段时间.

System.Threading.Thread.Sleep(1000);

2.5Timer控件

实现定时向服务器发送请求并触发服务器端事件,通常用于执行周期性的任务.

(1)添加UpdatePanel控件,并在外面添加一个Timer控件,将Timer控件的Tick事件添加到UpdatePanel的触发器里.

在Timer的Tick事件中设置显示当前时间.

<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
        </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Timer ID="Timer1" runat="server" Interval="1000" ontick="Timer1_Tick">
        </asp:Timer>
    </div>
    </form>
</body>

3.ASP.NET AJAX控件工具箱简介

3.1下载和安装

不知道下载包里面的AjaxControlToolkit.resources.dll文件怎么使用.在选项卡里面添加的时候,只选择了AjaxControlToolkit.dll

3.2应用举例

独立控件和扩展控件两类.

(1)首先需要放置一个ToolkitScriptManager控件,和使用基本AJAX控件一样.

(2)拖拽一个Accordion控件到页面上,为了使Accordion控件有更好的外观效果,需要为其指定多个CSS样式.

如CssClass,HeaderCssClass,HeaderSelectedCssClass等

(3)在Accordion控件中添加多个面板.下面是3个面板.添加每个面板的Header和Content内容.

<body>
    <form id="form1" runat="server">
    <div>
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <asp:Accordion ID="Accordion1" runat="server" CssClass="accordion" HeaderCssClass="accordionHeader"
            HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent">
            <Panes>
                <asp:AccordionPane ID="AccordionPane1" runat="server">
                    <Header>
                        Pane 1</Header>
                    <Content>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue
                        massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero,
                        sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus
                        a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                        ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
                    </Content>
                </asp:AccordionPane>
                <asp:AccordionPane ID="AccordionPane2" runat="server">
                    <Header>
                        Pane 2</Header>
                    <Content>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue
                        massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero,
                        sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus
                        a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                        ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
                    </Content>
                </asp:AccordionPane>
                <asp:AccordionPane ID="AccordionPane3" runat="server">
                    <Header>
                        Pane 3</Header>
                    <Content>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue
                        massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero,
                        sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus
                        a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                        ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
                    </Content>
                </asp:AccordionPane>
            </Panes>
        </asp:Accordion>
    </div>
    </form>
</body>

4.总结

介绍了AJAX开发的相关技术,包括AJAX原理,ASP.NET AJAX基本控件和ASP.NET AJAX Control Toolkit.其中对后者进行了简单介绍.说明了Accordion控件和CalendarExtender控件的简单使用.

下载