Microsoft AJAX + CSS + Outside Update Panel 既 使用方法

 
Microsoft AJAX + CSS + Outside Update Panel 既 使用方法
 

   StyleSheet1.css
 
   .lbl1 {
      font-size : large;
   }
 
   .lbl2 {
      font-size : small;
   }
 
   .standard {
      font-size : medium;
   }
 

 

   Default.aspx
 
   <link rel="stylesheet" href="StyleSheet1.css" />
 
   ……
 
   <form id="form1" runat="server">
 
   <asp:ScriptManager ID="ScriptManager1" runat="server" />
 
   <script type="text/javascript" language="javascript">
 
      Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(PageLoadingHandler);
 
      function PageLoadingHandler(sender, args) {
 
         var dataItems = args.get_dataItems();
 
         if (dataItems['Label1'] !== undefined) {
            $get('Label1').innerHTML = dataItems['Label1'];
            $get('Label1').className = dataItems['css_style'];
         }
 
         if (dataItems['Label2'] !== undefined) {
            $get('Label2').innerHTML = dataItems['Label2'];
            $get('Label2').className = dataItems['css_style'];
         }
 
      }
 
   </script>
 
   <div>
 
      <asp:UpdatePanel ID="UpdatePanel1" runat="server">
         <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Button1" />
         </Triggers>
      </asp:UpdatePanel>
 
      <asp:Label ID="Label1" runat="server" Text="Label1" /><br />
      <asp:Label ID="Label2" runat="server" Text="Label2" /><br />
      <asp:HiddenField ID="HiddenField1" runat="server" />
      <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Click" />
 
   </div>
   </form>
 

 

   Default.aspx.vb
 
   Sub Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click
 
      ScriptManager1.RegisterDataItem(Label1, "Label 1 AJAX")
      ScriptManager1.RegisterDataItem(Label2, "Label 2 AJAX")
      ScriptManager1.RegisterHiddenField(HiddenField1, "css_style", "standard")
 
   End Sub