创建和使用Ajax WebPart示例指南

2008.9.22

配置Ajax for ASP.net

以前做练习的时候整理的，发上来供需要的朋友参考。

需要具备的软件或其他资料

1） ASPAJAXExtSetup.msi软件ajax组建库

2） ReturnOfSmartPartv1_3 Install

Ajax for Asp.net的扩展组件库，由Jan Tielens开发

3） Ajax的发布工具以及控件库AjaxControlToolkit

步骤：

1） ASPAJAXExtSetup.msi

2）安装ReturnOfSmartPartv1_3

3）安装Ajax控件

AjaxControlToolkit\TemplateVSI\bin目录下，执行AjaxControlExtender.vsi

4）拷贝AjaxControlToolkit\AjaxControlToolkit\bin\Debug\ AjaxControlToolkit.dll到

C:\WINDOWS\assembly目录

注意查看其公匙标记和版本

5）配置8000网站Web.config文件

参考shyang_web.config参考文件：

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>

...

</sectionGroup>

</configSections>

</PageParserPaths>

</SafeMode>

...

</SafeControls>

...

</SharePoint>

...

<system.web>

...

...

</httpHandlers>

...

...

</httpModules>

...

...

</assemblies>

...

</compilation>

...

</controls>

</pages>

...

</system.web>

...

<system.web.extensions>

<!--

-->

<!--

<profileService enabled="true"

readAccessProperties="propertyname1,propertyname2"

writeAccessProperties="propertyname1,propertyname2" />

-->

</webServices>

<!--

-->

</scripting>

</system.web.extensions>

<system.webServer>

</modules>

</handlers>

</system.webServer>

</configuration>

注意修改AjaxcontrolToolkit和ReturnOfSmartPart的版本号和公匙标记

然后进入vs cmd下，执行IIS重启命令iisreset

6）登陆http://win2k3server:8000/，如果能够正常登陆，则说明web.config配置成功

7）导入工具箱

建立一个ASP.NET AJAX-Enabled Web Site，在工具箱上，右键点击，“添加选项卡”，输入AjaxControlToolkit，然后右键点击该项，选择“添加项”，需要等待较长时间，然后“浏览”，浏览到刚才的Dll文件，添加即可，工具箱上会出现Ajax控件。

示例1：简单的Ajax webpart，简单的时钟

打开VS 2005，新建项目：

添加一个Ajax timer，并修改Interval

保存

双击button

加入如下内容：

protected void Button1_Click(object sender, EventArgs e)

{

Button1.Text = "Hello World!";

}

protected void Timer1_Tick1(object sender, EventArgs e)

{

TextBox1.Text = DateTime.Now.ToString();

}

（注意：上述代码不要直接拷贝到里面去，双击对应的控件，然后将内容添加进去）

全部保存

拷贝刚才建好的Web控件

到目录：C:\Inetpub\wwwroot\wss\VirtualDirectories\8000\usercontrols（注意usercontrols目录是特定的，需要手工建立）

打开：http://win2k3server:8000/

到自己定义的库下：“编辑网页”

点“添加Web部件”：

确定：

推出编辑模式：

示例2：无刷新换页的Ajax webpart

新建一个“网站”

文件|新建|网站

语言要选择visual C#

解决方案浏览器中，右键点击最顶层节点，添加新项

“添加”，然后进入设计页面，此时页面是空白的

在“工具箱”|AJAX Extentions选项卡中，拖进一个UpdatePanel

然后在“数据”选项卡中，拖进一个GridView

确定，在配置数据源里面点击“新建连接。。。”

1）服务器名：

2）使用SQL Server身份验证

用户名：（输入连接SQL的用户）

密码：（输入连接SQL用户的密码）

选中保存密码

3）选择或输入一个数据库名

在下拉列表中选择“AdventureWorks”

测试连接，应该能够连接成功，如下：

选择刚才建立的连接

下一步：

去掉选中“是否将连接保存到应用程序配置文件中”，表示放在服务器上的web。Config文件中，而不是应用程序的web。Config文件中。

下一步

会弹出一个用户验证框，输入数据库正确的用户和密码，然后确定，然后出现如下界面：

选择“指定自定义SQL语句或存储过程”

下一步：

在sql语句中输入：

Select FirstName, LastName, JobTitle From HumanResources.vEmployee

下一步：

点击“测试查询”，出现验证框，输入正确的数据库用户和密码，然后窗格中显示刚才Select出来的数据。

点击“完成”。

回到Vs界面：

选中“起用分页”和“启用排序”

保存页面

拷贝AjaxPageExample.ascx和AjaxPageExample.ascx.cs到目录

C:\Inetpub\wwwroot\wss\VirtualDirectories\8000\usercontrols下面

登陆http://win2k3server:8000/，并进入自己定义的网站，进入“编辑模式”

点击左侧的“添加web部件”

选择杂项里面的AjaxSmartPart，然后“添加”：

点“open the tool pane”

标题填写“PageExample”

完成WEB Part的添加，如下：

示例3：Ajax 日历

新建一个“网站”

文件|新建|网站

选择Ajax Control toolkit Web Site

存放在C:\Work\AjaxCalendarExample目录下

语言要选择visual C#

解决方案浏览器中，右键点击最顶层节点，添加新项

添加一个UpdatePanel，一个TextBox和一个CalendarExtender

其中CalendarExtender的TargetControlID属性为：TextBox1

保存

拷贝目录C:\Work\AjaxCalendarExample下面的

AjaxCalendarExample.ascx和AjaxCalendarExample.ascx.cs文件到目录

C:\Inetpub\wwwroot\wss\VirtualDirectories\8000\usercontrols下面

登陆http://win2k3server:8000/，并进入自己定义的网站，进入“编辑模式”

可以保留我们刚才添加的WebPart，在右栏添加WebPart，属性如下：

退出编辑模式，验证添加是否成功：

如右侧，点击文本框时，已经能够成功显示Calendar

完成

示例4：文本内容在页面中发送

打来练习文件C:\Work\ConnectionsDemo1，拷贝

DemoConsumer.ascx

DemoConsumer.ascx.cs

DemoProvider.ascx

DemoProvider.ascx.cs

到目录：C:\Inetpub\wwwroot\wss\VirtualDirectories\8000\usercontrols

如前面练习一样分别添加Provider和Consumer WebPart，添加好后的界面如下：

在左侧Provider页面上，编辑|连接|Send test data to|Consumer，如下

或者在右侧Consumer页面上，编辑|连接|Receives test data from|Provider，如下

退出编辑模式：

在左侧文本框中输入信息，然后点“Send data”，右边Counsumer栏里即可接收到信息

该练习的目的在于掌握代码中使用的连接发送的代码，如Provider中

public string ProviderMenuLabel

{

// Text to display in the connections menu in SharePoint.

get { return "Send test data to"; }

}

public object GetProviderData()

{

// Build a new AJAXConnectionData object and return it.

// Parameters:

// - value to send

// - control which triggers the connection

// - event of the control which will trigger the connection

return new SmartPart.AJAXConnectionData(

TextBox1.Text, Button1, "Click");

}

示例5：无刷新联动

打来练习文件C:\Work\ConnectionsDemo1，拷贝

CategoryGrid.ascx

CategoryGrid.ascx.cs

SubCategoryGrid.ascx

SubCategoryGrid.ascx.cs

ProductGrid.ascx

ProductGrid.ascx.cs

到目录：C:\Inetpub\wwwroot\wss\VirtualDirectories\8000\usercontrols

如前面练习一样分别添加三个WebPart，并建立连接关系，添加好后的界面如下：

如果添加过程出现问题，则有可能是数据库连接出现问题，那么需要用Vs2005

打开该网站（项目），修改数据库连接后再重新拷贝

需要理解代码

练习完成

posted on 2009-12-21 16:47 重金属阅读(618) 评论(0) 编辑收藏举报