学习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表单加上οnchange= "javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$DropDownList1\',\'\')', 0)"如下语句。这样就可以触发该控件的事件了。
2）atlas:ControlEventTrigger：估计是截取控件事件，将js方法写到指定方法中。
先写道这里，有空写下一篇。
1075
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
