(一) . 简要
ajaxpanel, 一个自定义控件, 只要在页面中将ajaxpanel作为父控件, 则它内部的控件在运行时无刷新.
做了个程序试了一下果然比较cool ! 下面介绍一下具体配置, 配置也比较简单.
(二). 运行示例图
(三). 配置
1. 把 ajaxpanel 添加到工具箱中. 步骤如下:
2. 在web.config文件的: <configuration> 节,添加如下配置:
1 <configsections>
2 <section name=”magicajax” type=”magicajax.configuration.magicajaxsectionhandler, magicajax”/>
3 </configsections>
4 <magicajax outputcomparemode=”hashcode” tracing=”false”>
5 <pagestore mode=”nostore” unloadstoredpage=”false” cachetimeout=”5″ maxconcurrentpages=”5″ maxpageslimitalert=”false”/>
6 </magicajax>
7 <configsections>
2 <section name=”magicajax” type=”magicajax.configuration.magicajaxsectionhandler, magicajax”/>
3 </configsections>
4 <magicajax outputcomparemode=”hashcode” tracing=”false”>
5 <pagestore mode=”nostore” unloadstoredpage=”false” cachetimeout=”5″ maxconcurrentpages=”5″ maxpageslimitalert=”false”/>
6 </magicajax>
7 <configsections>
1 <system.web>
2 <httpmodules>
3 <add name=”magicajax” type=”magicajax.magicajaxmodule, magicajax”/>
4 </httpmodules>
5 <system.web>
2 <httpmodules>
3 <add name=”magicajax” type=”magicajax.magicajaxmodule, magicajax”/>
4 </httpmodules>
5 <system.web>
(四). 做了上面几步配置后, 下面就可以使用了, 示例代码也非常简单, 具体如下:
1.前台页面文件 magicajax.aspx 代码如下:
1 <body>
2 <form id=“form1“ runat=“server“>
3 <div>
4 <ajax:ajaxpanel id=“ajaxpanel1“ runat=“server“ font–bold=“true“>
5 <asp:panel id=“panel1“ runat=“server“ font–size=“xx-large“ height=“45px“ width=“273px“>
6 ajaxpanel example</asp:panel>
7 <br />
8 <asp:button id=“button1“ runat=“server“ backcolor=“#ffc080“ height=“26px“ onclick=“button1_click“
9 text=“createdata“ width=“85px“ />
10
11 <asp:button id=“button2“ runat=“server“ backcolor=“#ffc080“ height=“26px“ text=“cleardata“
12 width=“73px“ /><br />
13 <br />
14 <asp:gridview id=“gridview1“ runat=“server“ backcolor=“white“ bordercolor=“#e7e7ff“
15 borderstyle=“none“ borderwidth=“1px“ cellpadding=“3“ gridlines=“horizontal“>
16 <footerstyle backcolor=“#b5c7de“ forecolor=“#4a3c8c“ />
17 <rowstyle backcolor=“#e7e7ff“ forecolor=“#4a3c8c“ />
18 <selectedrowstyle backcolor=“#738a9c“ font–bold=“true“ forecolor=“#f7f7f7“ />
19 <pagerstyle backcolor=“#e7e7ff“ forecolor=“#4a3c8c“ horizontalalign=“right“ />
20 <headerstyle backcolor=“#4a3c8c“ font–bold=“true“ forecolor=“#f7f7f7“ />
21 <alternatingrowstyle backcolor=“#f7f7f7“ />
22 </asp:gridview>
23 </ajax:ajaxpanel>
24
25 </div>
26 </form>
27 </body>
2 <form id=“form1“ runat=“server“>
3 <div>
4 <ajax:ajaxpanel id=“ajaxpanel1“ runat=“server“ font–bold=“true“>
5 <asp:panel id=“panel1“ runat=“server“ font–size=“xx-large“ height=“45px“ width=“273px“>
6 ajaxpanel example</asp:panel>
7 <br />
8 <asp:button id=“button1“ runat=“server“ backcolor=“#ffc080“ height=“26px“ onclick=“button1_click“
9 text=“createdata“ width=“85px“ />
10
11 <asp:button id=“button2“ runat=“server“ backcolor=“#ffc080“ height=“26px“ text=“cleardata“
12 width=“73px“ /><br />
13 <br />
14 <asp:gridview id=“gridview1“ runat=“server“ backcolor=“white“ bordercolor=“#e7e7ff“
15 borderstyle=“none“ borderwidth=“1px“ cellpadding=“3“ gridlines=“horizontal“>
16 <footerstyle backcolor=“#b5c7de“ forecolor=“#4a3c8c“ />
17 <rowstyle backcolor=“#e7e7ff“ forecolor=“#4a3c8c“ />
18 <selectedrowstyle backcolor=“#738a9c“ font–bold=“true“ forecolor=“#f7f7f7“ />
19 <pagerstyle backcolor=“#e7e7ff“ forecolor=“#4a3c8c“ horizontalalign=“right“ />
20 <headerstyle backcolor=“#4a3c8c“ font–bold=“true“ forecolor=“#f7f7f7“ />
21 <alternatingrowstyle backcolor=“#f7f7f7“ />
22 </asp:gridview>
23 </ajax:ajaxpanel>
24
25 </div>
26 </form>
27 </body>
2.后台页面文件 magicajax.aspx.cs 代码如下:
1 public partial class _default : system.web.ui.page
2 {
3 protected void page_load(object sender, eventargs e)
4 {
5
6 }
7 private datatable createstructure()
8 {
9 datatable dt = new datatable();
10 dt.columns.add(new datacolumn(“categoryid“, typeof(int)));
11 dt.columns.add(new datacolumn(“categoryname“, typeof(string)));
12 dt.columns.add(new datacolumn(“price“, typeof(int)));
13 return dt;
14 }
15 public dataset createdata()
16 {
17 dataset ds = new dataset();
18 datatable dt = this.createstructure();
19
20 datarow drnew = dt.newrow();
21 drnew = dt.newrow();
22 drnew[“categoryid“] = 1;
23 drnew[“categoryname“] = “apple“;
24 drnew[“price“] = 2;
25 dt.rows.add(drnew);
26
27 drnew = dt.newrow();
28 drnew[“categoryid“] = 2;
29 drnew[“categoryname“] = “banana“;
30 drnew[“price“] = 3;
31 dt.rows.add(drnew);
32
33 drnew = dt.newrow();
34 drnew[“categoryid“] = 3;
35 drnew[“categoryname“] = “orange“;
36 drnew[“price“] = 1;
37 dt.rows.add(drnew);
38
39 drnew = dt.newrow();
40 drnew[“categoryid“] = 4;
41 drnew[“categoryname“] = “radish“;
42 drnew[“price“] = 2;
43 dt.rows.add(drnew);
44
45 drnew = dt.newrow();
46 drnew[“categoryid“] = 5;
47 drnew[“categoryname“] = “pen“;
48 drnew[“price“] = 3;
49 dt.rows.add(drnew);
50
51 drnew = dt.newrow();
52 drnew[“categoryid“] = 6;
53 drnew[“categoryname“] = “pencil“;
54 drnew[“price“] = 7;
55 dt.rows.add(drnew);
56
57 drnew = dt.newrow();
58 drnew[“categoryid“] = 7;
59 drnew[“categoryname“] = “ruler“;
60 drnew[“price“] = 3;
61 dt.rows.add(drnew);
62
63 drnew = dt.newrow();
64 drnew[“categoryid“] = 8;
65 drnew[“categoryname“] = “eraser“;
66 drnew[“price“] = 5;
67 dt.rows.add(drnew);
68
69 ds.tables.add( dt );
70 return ds;
71 }
72 protected void button1_click(object sender, eventargs e)
73 {
74 this.gridview1.datasource = this.createdata();
75 this.databind();
76 }
77 }
2 {
3 protected void page_load(object sender, eventargs e)
4 {
5
6 }
7 private datatable createstructure()
8 {
9 datatable dt = new datatable();
10 dt.columns.add(new datacolumn(“categoryid“, typeof(int)));
11 dt.columns.add(new datacolumn(“categoryname“, typeof(string)));
12 dt.columns.add(new datacolumn(“price“, typeof(int)));
13 return dt;
14 }
15 public dataset createdata()
16 {
17 dataset ds = new dataset();
18 datatable dt = this.createstructure();
19
20 datarow drnew = dt.newrow();
21 drnew = dt.newrow();
22 drnew[“categoryid“] = 1;
23 drnew[“categoryname“] = “apple“;
24 drnew[“price“] = 2;
25 dt.rows.add(drnew);
26
27 drnew = dt.newrow();
28 drnew[“categoryid“] = 2;
29 drnew[“categoryname“] = “banana“;
30 drnew[“price“] = 3;
31 dt.rows.add(drnew);
32
33 drnew = dt.newrow();
34 drnew[“categoryid“] = 3;
35 drnew[“categoryname“] = “orange“;
36 drnew[“price“] = 1;
37 dt.rows.add(drnew);
38
39 drnew = dt.newrow();
40 drnew[“categoryid“] = 4;
41 drnew[“categoryname“] = “radish“;
42 drnew[“price“] = 2;
43 dt.rows.add(drnew);
44
45 drnew = dt.newrow();
46 drnew[“categoryid“] = 5;
47 drnew[“categoryname“] = “pen“;
48 drnew[“price“] = 3;
49 dt.rows.add(drnew);
50
51 drnew = dt.newrow();
52 drnew[“categoryid“] = 6;
53 drnew[“categoryname“] = “pencil“;
54 drnew[“price“] = 7;
55 dt.rows.add(drnew);
56
57 drnew = dt.newrow();
58 drnew[“categoryid“] = 7;
59 drnew[“categoryname“] = “ruler“;
60 drnew[“price“] = 3;
61 dt.rows.add(drnew);
62
63 drnew = dt.newrow();
64 drnew[“categoryid“] = 8;
65 drnew[“categoryname“] = “eraser“;
66 drnew[“price“] = 5;
67 dt.rows.add(drnew);
68
69 ds.tables.add( dt );
70 return ds;
71 }
72 protected void button1_click(object sender, eventargs e)
73 {
74 this.gridview1.datasource = this.createdata();
75 this.databind();
76 }
77 }