#眉標=ASP.NET、UpdatePanel、JSON
#副標=Pure AJAX之道（上）
#大標=ASP.NET AJAX Templates初探
#作者=文／圖	李明儒


==<box>===========
程式1 
protected void Page_Load(object sender, EventArgs e)
{
  if (!Page.IsPostBack)
    Label1.Text = DateTime.Now.ToString("HH:mm:ss");
}
protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = DateTime.Now.ToString("HH:mm:ss");
}
protected void GridView1_SelectedIndexChanged(
  object sender, EventArgs e)
{
    DetailsView1.PageIndex = 
      GridView1.SelectedRow.DataItemIndex;
}
==<end>==============





==<box>===========
程式2：ItemTemplate
<asp:GridView ID="GridView1" runat="server" 
          AutoGenerateColumns="False">
  <Columns>
    <asp:TemplateField HeaderText="Name1">
      <ItemTemplate>
      <asp:Label ID="Label1" runat="server" 
      Text='<%# Eval("Name1") %>'></asp:Label>
      </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Name2">
      <ItemTemplate>
      <asp:Label ID="Label2" runat="server" 
      Text='<%# Bind("Name2") %>'></asp:Label>
      </ItemTemplate>
     </asp:TemplateField>
     <asp:TemplateField HeaderText="Name3">
       <ItemTemplate>
       <asp:Label ID="Label3" runat="server" 
       Text='<%# CvrtStr(Eval("Name3")) %>'>
       </asp:Label>
       </ItemTemplate>
    </asp:TemplateField>
==<end>==============




==<box>===========
程式3 
<asp:ScriptManager ID="ScriptManager1" runat="server">
  <Scripts>
  <asp:ScriptReference Path="~/js/jquery-1.2.6.js" />
  <asp:ScriptReference 
   Path="~/js/MicrosoftAjaxTemplates.debug.js" />
  </Scripts>
</asp:ScriptManager>
<script type="text/javascript">
$(function() {
    var dv = $create(Sys.UI.DataView, {}, {}, {}, 
                     $get("tbTemplate"));
    var people = [
        { Id: "A01", Name: "Jeffrey Lee", 
          Score: 32767, RecTime: new Date() },
        { Id: "A02", Name: "Fox Mulder",
          Score: 6242.25,
          RecTime: 
          Date.parseInvariant("2008-11-05 12:00:50", 
          "yyyy-MM-dd HH:mm:ss") },
        { Id: "A03", Name: "Dana Scully",
          Score: 8391.66, 
          RecTime: new Date(2008, 6, 15) }
        ];
    dv.set_data(people);
    $("#tbTemplate").show();
});        
</script>
<table border="1" cellspacing="0" cellpadding="0" 
 style="font-size: 9pt; width: 300px;">
<thead>
  <tr><th>Id</th><th>Name</th><th>Score</th>
  <th>Record Time</th></tr>
</thead>
<tbody id="tbTemplate" class="sys-template">
  <tr>
      <td style="text-align: center;">{{Id}}</td>
      <td>{{Name}}</td>
      <td style="text-align: right;">
　　　{{Score.format("N2")}}</td>
      <td style="text-align: center;">
      {{RecTime.format("yyyy/MM/dd HH:mm:ss")}}
      </td>
  </tr>
</tbody>            
</table>
==<end>==============