本文深入探讨了Atlas框架在实现网页无刷新更新方面的应用，详细介绍了如何利用Atlas的ScriptManager、UpdateProgress、UpdatePanel等组件，结合UpdateTrigger触发器，实现局部页面的动态更新，提升用户体验。
学习atlas有一段时间了，培训讲座也听了些，但是具体没有使用过，准备写一个atlas学习系列，从简单的开始，逐一学习总结一下atlas的
用法，本文介绍如何使用atlas来支持简单的无刷新效果。主要目的是体会一下atlas的强大功能。用的也是atlas官方demo，大家可以在它网站
上下载，自己只是简单重复的实践了一把。
1.母页
1
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>2
3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">4
5
<html xmlns="http://www.w3.org/1999/xhtml" >6
<head runat="server">7
<title>无标题页</title>8
</head>9
<body>10
<form id="form1" runat="server">11
<div>任务列表</div>12
<div>13
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server"> 14
</asp:contentplaceholder>15
</div>16
</form>17
</body>18
</html>19
2.页面
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Title="Untitled Page" %><asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"><atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" ></atlas:ScriptManager><div> <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"> <asp:ListItem Value="true">Compeleted</asp:ListItem> <asp:ListItem Value="false">Active</asp:ListItem> </asp:DropDownList> <atlas:UpdateProgress ID="UpdateProcess1" runat="server"> <ProgressTemplate>updateing
</ProgressTemplate> </atlas:UpdateProgress></div><div>任务列表-Grid形式</div><div> <atlas:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Block" Mode="Always"> <ContentTemplate> <asp:GridView ID="GridView1" runat="server" DataSourceID="ObjectDataSource2" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" CellPadding="4" DataKeyNames="ID" ForeColor="#333333" GridLines="None" Width="422px"> <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> <Columns> <asp:CommandField ShowDeleteButton="True" ShowEditButton="True" /> <asp:BoundField DataField="ProjectName" HeaderText="ProjectName" SortExpression="ProjectName" /> <asp:CheckBoxField DataField="Compeleted" HeaderText="Compeleted" SortExpression="Compeleted" /> </Columns> <RowStyle BackColor="#EFF3FB" /> <EditRowStyle BackColor="#2461BF" /> <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" /> <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" /> <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> <AlternatingRowStyle BackColor="White" /> </asp:GridView> </ContentTemplate> </atlas:UpdatePanel> <asp:ObjectDataSource ID="ObjectDataSource2" runat="server" DeleteMethod="Delete" InsertMethod="Insert" OldValuesParameterFormatString="original_{0}" SelectMethod="GetDataTable" TypeName="SimpleDemo1DataSet1TableAdapters.SimpleDemo1TableAdapter" UpdateMethod="Update" EnableCaching="True" SqlCacheDependency="AtlasDemoDb:SimpleDemo1"> <DeleteParameters> <asp:Parameter Name="Original_ID" Type="Int32" /> </DeleteParameters> <UpdateParameters> <asp:Parameter Name="ProjectName" Type="String" /> <asp:Parameter Name="Compeleted" Type="Boolean" /> <asp:Parameter Name="Original_ID" Type="Int32" /> </UpdateParameters> <SelectParameters> <asp:ControlParameter ControlID="DropDownList1" Name="IsCompleted" PropertyName="SelectedValue" Type="Boolean" /> </SelectParameters> <InsertParameters> <asp:Parameter Name="ProjectName" Type="String" /> <asp:Parameter Name="Compeleted" Type="Boolean" /> </InsertParameters> </asp:ObjectDataSource> </div><div><atlas:UpdatePanel ID="UpdatePanel2" runat="server" Mode="Conditional"><ContentTemplate> <asp:DetailsView ID="DetailsView1" runat="server" Height="50px" Width="423px" AutoGenerateRows="False" BackColor="White" BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px" CellPadding="3" DataKeyNames="ID" DataSourceID="ObjectDataSource2" GridLines="Horizontal" DefaultMode="Insert"> <FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" /> <EditRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" /> <PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" HorizontalAlign="Right" /> <Fields> <asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" ReadOnly="True" SortExpression="ID" /> <asp:BoundField DataField="ProjectName" HeaderText="ProjectName" SortExpression="ProjectName" /> <asp:CheckBoxField DataField="Compeleted" HeaderText="Compeleted" SortExpression="Compeleted" /> <asp:CommandField ShowInsertButton="True" /> </Fields> <HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" /> <AlternatingRowStyle BackColor="#F7F7F7" /> <RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" /> </asp:DetailsView> </ContentTemplate> <Triggers><atlas:ControlValueTrigger ControlID="DropDownList1" PropertyName="SelectedValue" /></Triggers> </atlas:UpdatePanel></div></asp:Content>1.atlas:ScriptManager :我揣摩加上这个标签，页面就注册了一下调用服务器端ajax代码的js，从原文件中也可以看出，在相应位置，产生如下代码为：
<script src="/AtlasSimpleDemo1/WebResource.axd?d=3gMGO8vzpNXUSzrvQy_2DWGsjQkw1bBJAFDl2m1MpwDm2AZlxbopKEnT5eJLSEwvAiV62wgEk-T92L62_VXqXS2eRY-oB8mtk5RkTqZ5wSM1&t=632870166220000000" type="text/javascript"></script>
<script src="atlasglob.axd" type="text/javascript"></script>
2.atlas:UpdateProgress , ProgressTemplate
生成一个div标签，以后更改div的visiable。
3。atlas:UpdatePanel
a. ContentTemplate 我估计加上这种标签，相当于将该标签下的控件变成ajax控件，即交互都通过xmlhttp来实现。
b.Triggers 这个标签用来处理页面事件。分为两类
1）atlas:ControlValueTrigger : 控件值触发，比如设置控件为DropDownList1,源代码中就在DropDownList1控件生成的Select表单加上onchange= "javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$DropDownList1\',\'\')', 0)"如下语句。这样就可以触发该控件的事件了。
2）atlas:ControlEventTrigger：估计是截取控件事件，将js方法写到指定方法中。
先写道这里，有空写下一篇。
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
