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 = ""; } } |