Atlas笔记2：数据绑定

好文章，做为自己收藏。

对于简单类型的结果，直接现实就可以，对于结果集，就得像DataGrid一样的绑定了。

atlas网站上的那个例子讲得比较明白了，根据他的那个离子，稍微改一下，测试一下效果。

这个测试是看看绑定DataTable和一个类的集合的，使用ListView绑定。

这是webservice，返回DataTable，TC[]，string[]类型的数据。TC类是一个简单的测试类。

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class WebServiceT3 : System.Web.Services.WebService {

    public WebServiceT3 () 
    {
    }

    [WebMethod]
    public DataTable GetDataTable(string s) 
    {
        DataTable dt = new DataTable("dt");
        dt.Columns.Add("Id");
        dt.Columns.Add("Name");
        for (int i = 0; i < 12; i++)
        {
            DataRow row = dt.NewRow();
            row["Id"] = i;
            row["Name"] = "name" + i.ToString();
            dt.Rows.Add(row);
        }
        return dt;
    }
    [WebMethod]
    public TC[] GetTCs(string t)
    {
        TC[] tcs = new TC[1];
        TC t1 = new TC();
        t1.Id = 1;
        t1.Name = "name1";
        tcs[0] = t1;
        return tcs;
    }
    [WebMethod]
    public string[] ListTest(string m)
    {
        string[] list = {
                "Cat",
                "Dog",
                "Cow",
                "Parrot",
            };
        return list;
    }
}

public class TC
{
    private int _id;
    public int Id
    {
        get { return this._id; }
        set { this._id = value; }
    }
    private string _name;
    public string Name
    {
        get { return this._name; }
        set { this._name= value; }
    }

}

然后建立aspx测试页面。
1：建立一个aspx页面，然后添加上atlas引用
<atlas:ScriptManager ID="sm1" runat="server">
        <Services>
            <atlas:ServiceReference Path="WebServiceT3.asmx" />
        </Services>
    </atlas:ScriptManager>
2：建立一个绑定数据的模版。
      可以和建立 服务器控件DataGrid 的模版列作一下对比，意义差不多。

     <div>
            <input id="Button1" type="button" value="search" onclick="return Button1_onclick()" />
            <input id="Text1" type="text" /></div>
        <div id="content">
            <div class="left">
                <div id="searchResults">
                </div>
                <div style="display: none;">
                    <div id="searchResults_layoutTemplate">
                        <ul id="searchResults_itemTemplateParent">
                            <li id="searchResults_itemTemplate">
                               <span id="searchResults_Id"></span>
                               <span>----</span>
                               <span id="searchResults_Name"></span>
                           </li>
                       </ul>
                    </div>
                </div>
            </div>
        </div>

   先是建立一个现实的区域searchResults，然后新建立一个不现实的模版区域。
   模版的几个层次：layoutTemplete--〉itemTempleteParent--〉itemTemplete。也可以在建立其他的模版，比如emptyTemplete等等。结合着DataGrid的模版列，应该还比较好理解。
  再里面就是具体的显示控件的定义了，就像searchResultId就是用来显示id列的。
  
  3：现在开始建立核心的xml-script代码，也是最复杂的一块。
   

<script type="text/xml-script">
  <page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
    <components>
      <textBox id="Text1" targetElement="Text1">
        <behaviors>
          <autoComplete serviceURL="WebServiceT3.asmx" serviceMethod="ListTest" minimumPrefixLength="1" completionList="Text1__autocomplete" />
        </behaviors>
      </textBox>
      <listView id="searchResults" targetElement="searchResults"  itemTemplateParentElementId="searchResults_itemTemplateParent" cssClass="listView"  alternatingItemCssClass="alternatingItem" itemCssClass="item">
        <layoutTemplate>
          <template layoutElement="searchResults_layoutTemplate" />
        </layoutTemplate>
        <itemTemplate>
          <template layoutElement="searchResults_itemTemplate">
            <label targetElement="searchResults_Name">
              <bindings>
                <binding dataPath="Name" property="text" />
              </bindings>
            </label>
            <label targetElement="searchResults_Id">
              <bindings>
                <binding dataPath="Id" property="text" />
              </bindings>
            </label>
          </template>
        </itemTemplate>
      </listView>
    </components>
    <references>
    </references>
  </page>
</script>

  这段代码看起来就头大，慢慢来分析。
  components里面有好几种类型：datasource，ListView之类的，application。这里主要使用的是第二个，定义listview组件。（datasource可以定义数据源，比如      <dataSource id="sqlDataSource" serviceURL="SqlDataService.asmx" propertyChanged="onChange"/>；application定义一些事件
           <application>
                    <load>
                        <invokeMethod target="sqlDataSource" method="select"/>
                    </load>
                </application>
     这里的method定义的是标注了[DataObjectMethod(DataObjectMethodType.Select)]属性的这样的方法。）

  最上边的一段是给textbox控件定一个的一个自动完成功能的逻辑：使用WebSerivceT3的一个ListTest方法获取数据。获取的是一个string[]类型的结果。
  下边的ListView定义的是绑定数据的逻辑，开始先定义了绑定使用的目标控件：targetElement="searchResults"  itemTemplateParentElementId="searchResults_itemTemplateParent"，下边的也是，定义了这些模版使用的控件，一直到最终显示的控件。

  看看最终显示控件的数据绑定定义：
  <label targetElement="searchResults_Name">
              <bindings>
                <binding dataPath="Name" property="text" />
              </bindings>
    </label>

    binding节点定义的就是绑定的逻辑：帮定Name列，在Text属性上显示结果。
    因为这是集合绑定，如果不是集合绑定的话，还需要制定dataContext，也就是数据集合的名称（DataSource名称）。还有其他不少属性，在后边的atlas控件中再介绍。
  
 3：按钮的js代码

    <script language="javascript" type="text/javascript">
// <!CDATA[

function Button1_onclick()
{
      //WebServiceT3.GetDataTable("",onSearchComplete);//also work
   WebServiceT3.GetTCs("",onSearchComplete);
}
 function onSearchComplete(results)
 {
    var searchResults = document.getElementById("searchResults");
    searchResults.control.set_data(results);//区分大小写，set_Data就会出错。
 }

// ]]>
    </script>

   几个问题：
  1：上边的定义可以绑定DataTable，也可以绑定TC[]那么样的结果集。
  2：除了ListView，还有其他诸如ItemVie等显示方式。核心的思路一样，模版的定义样式不太一样而已。

总结：
xml-script可能功能强大（还能定义按钮的事件等），但书写起来太过繁琐。