AjaxPanel自定义控件实现页面无刷新数据交互(做了个示例程序, 效果确实比较Cool, 用法非常简单! )(示例代码下载)

lovnet

浏览: 6878839 次
性别:
来自: 武汉

最近访客更多访客>>

u012363178

jx_colin

MauerSu

wangyy

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (7414)

社区版块

存档分类

2013-03 ( 20)
2013-02 ( 53)
2013-01 ( 90)
更多存档...

ASP Ajax Web Apple UI

(一). 简要

AjaxPanel, 一个自定义控件, 只要在页面中将AjaxPanel作为父控件, 则它内部的控件在运行时无刷新.

做了个程序试了一下果然比较Cool ! 下面介绍一下具体配置, 配置也比较简单.

(二). 运行示例图

(三). 配置

1. 把 AjaxPanel 添加到工具箱中. 步骤如下:

2. 在Web.Config文件的: <configuration> 节,添加如下配置:

1<configSections>
2<sectionname="magicAjax"type="MagicAjax.Configuration.MagicAjaxSectionHandler,MagicAjax"/>
3 </configSections>
4 <magicAjaxoutputCompareMode="HashCode"tracing="false">
5 <pageStoremode="NoStore"unloadStoredPage="false"cacheTimeout="5"maxConcurrentPages="5"maxPagesLimitAlert="false"/>
6 </magicAjax>
7 <configSections>

1<system.web>
2<httpModules>
3<addname="MagicAjax"type="MagicAjax.MagicAjaxModule,MagicAjax"/>
4</httpModules>
5 <system.web>

(四). 做了上面几步配置后, 下面就可以使用了, 示例代码也非常简单, 具体如下:

1.前台页面文件 Magicajax.aspx代码如下:

1<body>
2<formid="form1"runat="server">
3<div>
4<ajax:AjaxPanelID="AjaxPanel1"runat="server"Font-Bold="True">
5<asp:PanelID="Panel1"runat="server"Font-Size="XX-Large"Height="45px"Width="273px">
6AjaxPanelexample</asp:Panel>
7<br/>
8<asp:ButtonID="Button1"runat="server"BackColor="#FFC080"Height="26px"OnClick="Button1_Click"
9Text="CreateData"Width="85px"/>
10 
11<asp:ButtonID="Button2"runat="server"BackColor="#FFC080"Height="26px"Text="ClearData"
12Width="73px"/><br/>
13<br/>
14<asp:GridViewID="GridView1"runat="server"BackColor="White"BorderColor="#E7E7FF"
15BorderStyle="None"BorderWidth="1px"CellPadding="3"GridLines="Horizontal">
16<FooterStyleBackColor="#B5C7DE"ForeColor="#4A3C8C"/>
17<RowStyleBackColor="#E7E7FF"ForeColor="#4A3C8C"/>
18<SelectedRowStyleBackColor="#738A9C"Font-Bold="True"ForeColor="#F7F7F7"/>
19<PagerStyleBackColor="#E7E7FF"ForeColor="#4A3C8C"HorizontalAlign="Right"/>
20<HeaderStyleBackColor="#4A3C8C"Font-Bold="True"ForeColor="#F7F7F7"/>
21<AlternatingRowStyleBackColor="#F7F7F7"/>
22</asp:GridView>
23</ajax:AjaxPanel>
24
25</div>
26</form>
27</body>

2.后台页面文件 Magicajax.aspx.cs代码如下:

1publicpartialclass_Default:System.Web.UI.Page
2{
3protectedvoidPage_Load(objectsender,EventArgse)
4{
5
6}
7privateDataTableCreateStructure()
8{
9DataTabledt=newDataTable();
10dt.Columns.Add(newDataColumn("CategoryID",typeof(int)));
11dt.Columns.Add(newDataColumn("CategoryName",typeof(string)));
12dt.Columns.Add(newDataColumn("Price",typeof(int)));
13returndt;
14}
15publicDataSetCreateData()
16{
17DataSetds=newDataSet();
18DataTabledt=this.CreateStructure();
19
20DataRowdrNew=dt.NewRow();
21drNew=dt.NewRow();
22drNew["CategoryID"]=1;
23drNew["CategoryName"]="Apple";
24drNew["Price"]=2;
25dt.Rows.Add(drNew);
26
27drNew=dt.NewRow();
28drNew["CategoryID"]=2;
29drNew["CategoryName"]="Banana";
30drNew["Price"]=3;
31dt.Rows.Add(drNew);
32
33drNew=dt.NewRow();
34drNew["CategoryID"]=3;
35drNew["CategoryName"]="Orange";
36drNew["Price"]=1;
37dt.Rows.Add(drNew);
38
39drNew=dt.NewRow();
40drNew["CategoryID"]=4;
41drNew["CategoryName"]="Radish";
42drNew["Price"]=2;
43dt.Rows.Add(drNew);
44
45drNew=dt.NewRow();
46drNew["CategoryID"]=5;
47drNew["CategoryName"]="Pen";
48drNew["Price"]=3;
49dt.Rows.Add(drNew);
50
51drNew=dt.NewRow();
52drNew["CategoryID"]=6;
53drNew["CategoryName"]="Pencil";
54drNew["Price"]=7;
55dt.Rows.Add(drNew);
56
57drNew=dt.NewRow();
58drNew["CategoryID"]=7;
59drNew["CategoryName"]="Ruler";
60drNew["Price"]=3;
61dt.Rows.Add(drNew);
62
63drNew=dt.NewRow();
64drNew["CategoryID"]=8;
65drNew["CategoryName"]="Eraser";
66drNew["Price"]=5;
67dt.Rows.Add(drNew);
68
69ds.Tables.Add(dt);
70returnds;
71}
72protectedvoidButton1_Click(objectsender,EventArgse)
73{
74this.GridView1.DataSource=this.CreateData();
75this.DataBind();
76}
77}

(五). 示例代码下载

http://www.cnblogs.com/Files/ChengKing/MagicajaxExample.rar

分享到：