atlas学习系列一(简单体验)

学习atlas有一段时间了,培训讲座也听了些,但是具体没有使用过,准备写一个atlas学习系列,从简单的开始,逐一学习总结一下atlas的 用法,本文介绍如何使用atlas来支持简单的无刷新效果。主要目的是体会一下atlas的强大功能。用的也是atlas官方demo,大家可以在它网站 上下载,自己只是简单重复的实践了一把。

1.母页


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 >

从页面代码中可以看出,主要涉及到atlas四个方面:
1.atlas:ScriptManager :我揣摩加上这个标签,页面就注册了一下调用服务器端ajax代码的js,从原文件中也可以看出,在相应位置,产生如下代码为:
<script src="/AtlasSimpleDemo1/WebResource.axd?d=3gMGO8vzpNXUSzrvQy_2DWGsjQkw1bBJAFDl2m1MpwDm2AZlxbopKEnT5eJLSEwvAiV62wgEk-T92L62_VXqXS2eRY-oB8mtk5RkTqZ5wSM1&amp;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方法写到指定方法中。
先写道这里,有空写下一篇。

你可能感兴趣的:(学习)