Microsoft AJAX + JavaScript Template

 
Microsoft AJAX + JavaScript Template
 

   Default.aspx (Front Page)
 
   <form id="form1" runat="server">
   <asp:ScriptManager ID="ScriptManager1" runat="server" />
   <!– 必須先執行 Script Manager –>
   <script type="text/javascript" language="javascript" src="JScript1.js"></script>
 
   <div>
 
      <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
         <ContentTemplate>
 
            UpdatePanel Column1
            <asp:Button ID="Button1" Text="Submit" runat="server" OnClick="ABC" />
            <asp:HiddenField ID="C1" runat="server" /><br />
 
            UpdatePanel Column2
            <asp:Button ID="Button2" Text="Submit" runat="server" OnClick="ABC2" />
            <asp:HiddenField ID="C2" runat="server" /><br />
 
            UpdatePanel Column3
            <asp:Button ID="Button3" Text="Submit" runat="server" OnClick="ABC3" />
            <asp:HiddenField ID="C3" runat="server" /><br />
 
            Clear All
            <asp:Button ID="Button4" Text="Submit" runat="server" OnClick="ABC4" />
            <asp:HiddenField ID="C4" runat="server" /><br />
 
         </ContentTemplate>
      </asp:UpdatePanel>
 
      <br /><br /><br /><br />
 
      <asp:Table ID="Table1" runat="server" BorderWidth="1" CellPadding="0" CellSpacing="0">
 
         <asp:TableHeaderRow>
            <asp:TableHeaderCell>Column1</asp:TableHeaderCell>
            <asp:TableHeaderCell>Column2</asp:TableHeaderCell>
            <asp:TableHeaderCell>Column3</asp:TableHeaderCell>
         </asp:TableHeaderRow>
 
         <asp:TableRow>
            <asp:TableCell><asp:Label ID="Label1" runat="server" /></asp:TableCell>
            <asp:TableCell><asp:Label ID="Label3" runat="server" /></asp:TableCell>
            <asp:TableCell><asp:Label ID="Label5" runat="server" /></asp:TableCell>
         </asp:TableRow>
 
         <asp:TableRow>
            <asp:TableCell><asp:Label ID="Label2" runat="server" /></asp:TableCell>
            <asp:TableCell><asp:Label ID="Label4" runat="server" /></asp:TableCell>
            <asp:TableCell><asp:Label ID="Label6" runat="server" /></asp:TableCell>
         </asp:TableRow>
 
      </asp:Table>
 
   </div>
   </form>
 

 

   Default.aspx.vb (Code Behind)
 
   Protected Sub ABC(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click
      If (ScriptManager1.IsInAsyncPostBack) Then
         ScriptManager1.RegisterDataItem(Label1, "Label1")
         ScriptManager1.RegisterDataItem(Label2, "Label2")
         ScriptManager1.RegisterDataItem(C1, "C1")
      End If
   End Sub
 
   Protected Sub ABC2(ByVal sender As Object, ByVal e As EventArgs) Handles Button2.Click
      If (ScriptManager1.IsInAsyncPostBack) Then
         ScriptManager1.RegisterDataItem(Label3, "Label3")
         ScriptManager1.RegisterDataItem(Label4, "Label4")
         ScriptManager1.RegisterDataItem(C2, "C2")
      End If
   End Sub
 
   Protected Sub ABC3(ByVal sender As Object, ByVal e As EventArgs) Handles Button3.Click
      If (ScriptManager1.IsInAsyncPostBack) Then
         ScriptManager1.RegisterDataItem(Label5, "Label5")
         ScriptManager1.RegisterDataItem(Label6, "Label6")
         ScriptManager1.RegisterDataItem(C3, "C3")
      End If
   End Sub
 
   Protected Sub ABC4(ByVal sender As Object, ByVal e As EventArgs) Handles Button4.Click
      If (ScriptManager1.IsInAsyncPostBack) Then
         ScriptManager1.RegisterDataItem(C4, "C4")
      End If
   End Sub
 

 

   JScript1.js (JavaScript Include File)
 
   Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(PageLoadHandler);
 
   function PageLoadHandler(sender, args) {
 
      var dataItems = args.get_dataItems();
 
      if (dataItems['C1'] == "C1") {
 
         $get('Label1').innerHTML = dataItems['Label1'];
         $get('Label2').innerHTML = dataItems['Label2'];
 
      } else if (dataItems['C2'] == "C2") {
 
         $get('Label3').innerHTML = dataItems['Label3'];
         $get('Label4').innerHTML = dataItems['Label4'];
 
      } else if (dataItems['C3'] == "C3") {
 
         $get('Label5').innerHTML = dataItems['Label5'];
         $get('Label6').innerHTML = dataItems['Label6'];
 
      } else if (dataItems['C4'] == "C4") {
 
         $get('Label1').innerHTML = "";
         $get('Label2').innerHTML = "";
         $get('Label3').innerHTML = "";
         $get('Label4').innerHTML = "";
         $get('Label5').innerHTML = "";
         $get('Label6').innerHTML = "";
 
      }
 
   }