Atlas入门-将普通控件升级为Atlas控件/使用listView显示数据库数据[视频]

该两例均参考与Dflying的学习指南!!谨表感谢!!!

在本级视频中，我想做两个演示，
1： 将普通控件升级为Atlas控件；
2：使用listView显示数据库数据

视频下载 




下面是全部代码

升级普通控件 全部代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="Default5" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
    <script type="text/xml-script">
        <page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
            <components>
                <label id="Label1">
                    <bindings>
                        <binding dataContext="DropDownList1" dataPath="selectedValue" property="text" direction="InOut" />
                    </bindings>
                </label>
                <select id="DropDownList1"/>
            </components> 
            </page>   
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        在本级视频中，我想做两个演示，<br />
        1： 将普通控件升级为Atlas控件；<br />
        2：使用listView显示数据库数据<br />
        <atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True">
        </atlas:ScriptManager>
        <br />
        <asp:DropDownList ID="DropDownList1" runat="server">
            <asp:ListItem>aaaaaaa</asp:ListItem>
            <asp:ListItem>bbbbbbb</asp:ListItem>
            <asp:ListItem>ccccccc</asp:ListItem>
            <asp:ListItem>ddddddddd</asp:ListItem>
        </asp:DropDownList>&nbsp;<br />
        <br />
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br />
        <br />
        我没刚才把delect的自动回传开启了的，所以页面会刷新，事实上这样做是不需要的！<br />
        <br />
        下面我再看演示二： 先看下效果，因为这个演示的很多都是代码，所以我预先写好了<br />
        <br />
        看完了，如果有什么问题请去我的博客http://www.cnblogs.com/thcjp</div>
    </form>
</body>
</html>

下面是演示二的代码

listView读取数据库数据 -- service.cs 代码
using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Data;
using System.Data.SqlClient;
using System.ComponentModel;
/**//// <summary>
/// dt 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class dt : Microsoft.Web.Services.DataService {


    [DataObjectMethod(DataObjectMethodType.Select)]

    public DataTable GetListData()
    {
        System.Threading.Thread.Sleep(2000);

        //下面是我们度取数据库数据并返回一个DataTable，好了回头去看
        SqlConnection con = new SqlConnection("Data Source=.;Initial Catalog=pubs;Persist Security Info=True;User ID=sa;Password=980123");
        SqlDataAdapter sda = new SqlDataAdapter();
        sda.SelectCommand = new SqlCommand("select city,state,zip from authors", con);
        DataSet ds = new DataSet();
        sda.Fill(ds, "MyListData");
        DataTable dtt = ds.Tables["MyListData"];

        return dtt;
    }
    
}

listView读取显示数据库数据的前台代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
    <script type="text/xml-script">
        <page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
            <components>
                //申明一个数据连接控件
                <dataSource id="listSource" autoLoad="true" serviceURL="dt.asmx" />
                //申明数据呈现控件listView，
                <listView id="myList" itemTemplateParentElementId="myList_itemTemplateParent">
                //将数据连接和呈现控件结合起来
                <bindings>
                    <binding dataContext="listSource" dataPath="data" property="data"/>
                </bindings>
                //说明头模板
                <layoutTemplate>
                    <template layoutElement="myList_layoutTemplate"/>
                </layoutTemplate>
                //指定项模板
                <itemTemplate>
                    <template layoutElement="myList_itemTemplate">
                        <label id="lblzip">
                            <bindings>
                                <binding dataPath="zip" property="text"/>
                            </bindings>
                        </label>
                        <label id="lblcity">
                            <bindings>
                                <binding dataPath="city" property="text"/>
                            </bindings>
                        </label>
                        <label id="lblstate">
                            <bindings>
                                <binding dataPath="state" property="text"/>
                            </bindings>
                        </label>
                    </template>
                </itemTemplate>
                //指定分隔符模板
                <separatorTemplate>
                    <template layoutElement="myList_separatorTemplate"/>
                </separatorTemplate>
                //指定无数据时显示的模板
                <emptyTemplate>
                    <template layoutElement="myList_emptyTemplate"/>
                </emptyTemplate>
                </listView>
            </components>
        </page>
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <atlas:ScriptManager ID="ScriptManager1" runat="server">
        </atlas:ScriptManager>
    <div id="myList"></div>
    <div style="display:none">
    <table id="myList_layoutTemplate" border="1" cellpadding="3">
        <thead>
            <tr>
                <td>邮编</td>
                <td>城市</td>
                <td>标示</td>
            </tr>
        </thead>
        <tbody id="myList_itemTemplateParent">
            <tr id="myList_itemTemplate">
                <td><span id="lblzip" /></td>
                <td><span id="lblcity"/></td>
                <td><span id="lblstate" /></td>
            </tr>
            <tr id="myList_separatorTemplate">
                <td colspan="3"><hr/></td>
            </tr>
        </tbody>    
    </table>
    <div id="myList_emptyTemplate">
    没数据
    </div>
    </div>
    </form>
</body>
</html>