1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UpdatePanel.aspx.cs" Inherits="ZeeControls2Demo.WebLayout.Advanced.UpdatePanel" Theme="Default"%>
2
3 <%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
4 Namespace="System.Web.UI" TagPrefix="asp" %>
5
6 <%@ Register Assembly="ZettaCube.ZeeControls" Namespace="ZettaCube.ZeeControls" TagPrefix="cc1" %>
7
8 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
9
10 <html xmlns="http://www.w3.org/1999/xhtml" >
11 <head runat="server">
12 <title>Customized Update Panel</title>
13 <script type="text/javascript" src="../../common.js"></script>
14 </head>
15 <body>
16 <form id="form1" runat="server">
17 <div>
18 <asp:ScriptManager ID="ScriptManager1" runat="server">
19 </asp:ScriptManager>
20 <cc1:WebLayout ID="WebLayout1" runat="server" FitParent="FitWindow"
21 Height="665px" Width="810px" Orientation="Horizontal">
22 <Panels>
23 <cc1:WebLayoutPanel runat="server" PreferredSize="200">
24 <Content>
25 <strong>Customized Update Panel</strong> <span style="font-size: 8pt">(# not available in WebLayoutLite)</span> <br /><br />
26 <span style="color: #006699">WebLayoutUpdatePanel<br />
27 </span>
28 <br />
29 A WebLayout can contain WebLayoutPanels and WebLayoutUpdatePanels.
30 WebLayoutUpdatePanel extends UpdatePanel in Microsoft ASP.NET AJAX.<br />
31 <br />
32 A simple postback will cause the entire page to refresh, and result in flickering.<br />
33 <asp:Button ID="btnPostback" runat="server" Text="Simple Postback" />
34 </Content>
35 </cc1:WebLayoutPanel>
36 <cc1:WebLayoutUpdatePanel runat="server" UpdateMode="Conditional" PreferredSize="150">
37 <Content>
38 This is the first WebLayoutUpdatePanel on this page. It can be refreshed via AJAX postback.<br />
39 <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="AJAX Postback" /><br />
40 <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br />
41 <br />
42 The panel below is the second WebLayoutUpdatePanel on this page. It contains a
43 nested splitter container (with a blue border).
44 </Content>
45 </cc1:WebLayoutUpdatePanel>
46 <cc1:WebLayoutUpdatePanel runat="server" Filled="True" UpdateMode="Conditional" ><Content>
47 <cc1:WebLayout id="WebLayout2" runat="server" width="200px" height="200px" FitParent="FitParentContainer" BorderColor="Blue" BorderStyle="Solid" BorderWidth="2px"><Panels>
48 <cc1:WebLayoutPanel runat="server" Filled="True" >
49 <Content>
50 The nested container (with a blue border) is contained within a WebLayoutUpdatePanel
51 of its parent container. So adding/removing/re-arranging panels in the nested container
52 will not cause the entire page to refresh.<br />
53 <br />
54 Click the following button to add/remove a third panel to the nested container.
55 <br />
56 <span style="font-size: 8pt">(Note that this does not simply show/hide the panel at the client side, but actually
57 adds/removes the panel at the server side.)</span><br />
58 <br />
59 <asp:Button ID="btnToggle" runat="server" OnClick="btnToggle_Click" Text="Toggle 3rd panel" />
60 <br />
61 <br />
62 </Content>
63 </cc1:WebLayoutPanel>
64 <cc1:WebLayoutUpdatePanel runat="server" UpdateMode="Conditional" PreferredSize="200">
65 <Content>
66 This is the thrid WebLayoutUpdatePanel on this page. It can, of course, be refreshed
67 via AJAX postback.<br />
68 <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="AJAX Postback" /><br />
69 <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
70 </Content>
71 </cc1:WebLayoutUpdatePanel>
72 </Panels>
73 </cc1:WebLayout>
74 </Content>
75 </cc1:WebLayoutUpdatePanel>
76 </Panels>
77 </cc1:WebLayout>
78 </div>
79 </form>
80 </body>
81 </html>
82
1 using System;
2 using System.Data;
3 using System.Configuration;
4 using System.Collections;
5 using System.Web;
6 using System.Web.Security;
7 using System.Web.UI;
8 using System.Web.UI.WebControls;
9 using System.Web.UI.WebControls.WebParts;
10 using System.Web.UI.HtmlControls;
11
12 using ZettaCube.ZeeControls;
13
14 namespace ZeeControls2Demo.WebLayout.Advanced
15 {
16 public partial class UpdatePanel : System.Web.UI.Page
17 {
18 // Whether the 3rd panel should be shown is stored in viewstate
19 private bool ShowThirdPanel
20 {
21 get
22 {
23 if (ViewState["ShowThirdPanel"] != null)
24 {
25 return (ViewState["ShowThirdPanel"].ToString().ToLower() == "true");
26 }
27 else
28 {
29 return false;
30 }
31
32 }
33 set
34 {
35 ViewState["ShowThirdPanel"] = (value ? "true" : "false");
36 }
37
38 }
39
40 private bool ThirdPanelCreated
41 {
42 get
43 {
44 return (WebLayout2.Panels.Count >= 3);
45 }
46 }
47
48 protected void Page_Load(object sender, EventArgs e)
49 {
50 if (ShowThirdPanel)
51 {
52 CreateThirdPanel();
53 }
54
55 Label1.Text = "Last refreshed at " + System.DateTime.Now.ToLongTimeString();
56 Label2.Text = "Last refreshed at " + System.DateTime.Now.ToLongTimeString();
57 }
58
59 protected void Button1_Click(object sender, EventArgs e)
60 {
61 Label1.Text += "<br/>Above button clicked at " + System.DateTime.Now.ToLongTimeString();
62 }
63
64 protected void Button2_Click(object sender, EventArgs e)
65 {
66 Label2.Text += "<br/>Above button clicked at " + System.DateTime.Now.ToLongTimeString();
67 }
68
69 private void CreateThirdPanel()
70 {
71 if (!ThirdPanelCreated)
72 {
73 // Create the Breakpoints tabbed panel
74 WebLayoutPanel thirdPanel = new WebLayoutPanel();
75
76 // Add some content to the panel
77 Label l = new Label();
78 l.Text = "Here's the new panel. Created at " + System.DateTime.Now.ToLongTimeString();
79 l.BackColor = System.Drawing.Color.FromArgb(0xcc, 0xcc, 0xff);
80 thirdPanel.Controls.Add(l);
81
82 // Add the panel to the splitter container
83 WebLayout2.Panels.Add(thirdPanel);
84 }
85 }
86
87 private void RemoveThirdPanel()
88 {
89 if (ThirdPanelCreated)
90 {
91 WebLayout2.Panels.RemoveAt(2);
92 }
93 }
94
95 protected void btnToggle_Click(object sender, EventArgs e)
96 {
97 ShowThirdPanel = !ShowThirdPanel;
98
99 if (ShowThirdPanel)
100 {
101 CreateThirdPanel();
102 }
103 else
104 {
105 RemoveThirdPanel();
106 }
107 }
108 }
109 }
110
1 body
2 {
3 font-family: Tahoma, Geneva;
4 font-size: 10pt;
5 }
6
7 .ZCWDMainContent, .ZCWDPanelContent
8 {
9 padding: 3px;
10 }
11
12 .ZCWDPanelTitleBar
13 {
14 padding-left: 3px;
15 }
16
17 .ZCWSPanel
18 {
19 padding: 3px;
20 }
21
22 .title
23 {
24 display: block;
25 font-weight:bold;
26 line-height: 24px;
27 }
28
29 .indent
30 {
31 padding: 10px;
32 padding-left: 30px;
33 }
34
35 .blah
36 {
37 color: Gray;
38 }
39
40 .tableRowHeader
41 {
42 color: #666666;
43 }
44
45 .tableColumnHeader
46 {
47 color: #666666;
48 }
49
1 <%--
2 Default skin template. The following skins are provided as examples only.
3
4 1. Named control skin. The SkinId should be uniquely defined because
5 duplicate SkinId's per control type are not allowed in the same theme.
6
7 <asp:GridView runat="server" SkinId="gridviewSkin" BackColor="White" >
8 <AlternatingRowStyle BackColor="Blue" />
9 </asp:GridView>
10
11 2. Default skin. The SkinId is not defined. Only one default
12 control skin per control type is allowed in the same theme.
13
14 <asp:Image runat="server" ImageUrl="~/images/image1.jpg" />
15 --%>