zoukankan      html  css  js  c++  java
  • 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方法写到指定方法中。
    先写道这里,有空写下一篇。
  • 相关阅读:
    Network Embedding 论文小览
    DLRS(深度学习应用于推荐系统论文汇总--2017年8月整理)
    深度语义匹配模型-DSSM 及其变种
    python 按值排序
    python 日期排序
    推荐领域数据集
    EPS 转 pdf 在线
    梯度下降法的三种形式BGD、SGD以及MBGD
    Daily paper -Science 2006: Experimental Study of Inequality and Unpredictability in an Artificial Cultural Market (探究群体行为对商品销量的影响)
    2017年Nature文章“Millions of online book co-purchases reveal partisan differences in the consumption of science”阅读笔记
  • 原文地址:https://www.cnblogs.com/jillzhang/p/477890.html
Copyright © 2011-2022 走看看