创建你第一个SharePoint 2010 应用程序----完整推荐总结

创建你第一个SharePoint 2010 应用程序

本文中,你会学到:
1. 创建解决方案,使用服务器端对象模型和可视Web Part部件读取和写入列表数据。
2. 使用Visual Studio 2010 创建并部署解决方案。
3. 使用Chart Web Part呈现列表数据。
4. 在一个Web部件页面集成解决方案中的不同可视Web部件。

最终效果:


准备:

首先要创建两个必要的列表Customer Sales和Total Sales。第一个列表储存关于公司和FY10季度销售信息。它包含一个Company栏(单行文本,由Title栏修改而生)和四个栏Q1,Q2,Q3,Q4(单行文本),像这样:

第二个列表由两个栏组成。Year(单行文本)和Sales(数字)。像这样:

创建应用程序:

总共分成四个步骤。首先开发一个增加记录到Customer Sales列表的功能。
创建一个空白解决方案,提供项目框架。
1. 打开Visual Studio 2010.
2. 点击文件--新建项目。
3. 导航到其他项目类型,选择Visual Studio 解决方案。
4. 点击空白解决方案,命名MyFirstSPSolution。
添加记录到Sales列表
主要界面是一个可视Web部件。
1. 右击解决方案,选择添加--新建项目。
2. 选择空白SharePoint项目,命名CustomerSalesWebPart,点击确定。部署为场解决方案。
3. 右键单击项目,选择添加--新建项--可视Web部件,命名CustSalesVWP。
4. 右键单击CustSalesVWP.ascx,选择视图查看器。
5. 创建如下界面,包含6个标签、5个文本框、2个链接按钮。
代码应该是这样的:
6. 右击CustSalesVWP.ascx,点击查看代码,切换到代码视图。
7. 添加引用 using Microsoft.SharePoint;
8. 最终代码应该是这样的:
9. 部署解决方案。
10. 在SharePoint站点,创建新Web部件页。点击所有网站内容--创建--页面--Web部件页。命名Sales Dashboard。
11. 添加Web部件,在Custom类中找到CustSalesVWP。点击添加。
测试这个可视Web部件,确保能正常工作。添加新纪录到Customer Sales列表,并前去验证。

点击Add以后,查看列表:

点击Clear,数据清空:

查看Customer Sales数据

接下来我们要创建一个只读的Web部件,简单加载并显示Customer Sales列表中的数据。在ASP.NET应用程序中,数据网格是非常有效的方式。这次我们就用这个功能加载和刷新数据。
1. 文件--新建--项目。
2. 选择空白SharePoint项目,命名CustomerSalesList。点击添加到解决方案。
3. 部署为场解决方案。点击完成。
4. 右击项目,选择添加--新建项。
5. 选中可视Web部件,命名SalesVWP,点击添加。
6. 右击SalesVWP.ascx,选择视图查看器。
7. 拖曳2个标签,一个datagrid,一个链接按钮和一个Update Panel。最后的代码应该是这样的:
界面是这样的:

8. 右击项目,添加--类,命名CustomerSales。添加部分代码:
9. 右击SalesVWP.ascx,选择查看代码。
10. 添加部分代码,最后是这样的:
11. 右击这个项目,选择生成解决方案,成功后部署解决方案。
12. 在之前的页面点击网站操作--编辑页面--添加Web部件。
13. 选中Custom类中的SalesVWP Web部件。点击添加。
14. 你可以看到:

点击Load后,看到:

查看Total Sales

创建一个综合销售量的Web部件。
1. 右击解决方案,添加--新建项目。
2. 选中空白SharePoint项目,命名TotalSalesVisualWebPart,点击确定,部署为场解决方案。
3. 右击项目,添加--新建项,选择可视Web部件,命名TotalSalesVWP,点击添加。
4. 拖曳2个标签、一个datagrid和一个链接按钮。最后代码视图是这样的:
5. 右击项目,添加--类,命名SalesTotals。
6. 右击项目,选择查看代码。
7. 添加代码,最后是这样的:
8. 右击此项目,选择生成。成功后部署解决方案。
9. 在相同页面添加Web部件。
10. 在Custom类中找到TotalSalesVWP,点击添加。
11. 你会看到:

点击Load后:

添加一个Chart 图表 Web Part 部件

以图表的视图呈现Total Sales列表的数据。
1. 编辑之前的页面。
2. 添加Web部件。在业务数据类中,选中Chart 图表 Web Part 部件,点击添加。
3. 点击编辑此Web部件,自定义您的图表。
4. 第一步选择柱形图。

5. 接收第二步的默认。
6. 第三步,选中显示图表标题。命名FY 10 Sales。点击自动预览查看图表布局。点击完成。

7. 右击Web部件下拉箭头,选择连接到数据。
8. 选择连接到列表,点击下一步。
9. 选择TotalSales列表,点击下一步。

10. 你会看到一个表格布局,点击下一步。

11. 这一步你可以设置自定义改变图标外观,这里接收默认,X字段选择Sales,点击完成。

在页面上你会看到:

最后完成的整个页面是这样的:

posted @ 2014-06-22 10:40  crazygolf  阅读(204)  评论(0编辑  收藏  举报