[翻译]No.9354 SharePoint Pages(3)之网站页面
创建网站页面
与母版页相同,Visual Studio不提供网站页面设计器,而SharePoint Designer再次帮助我们制作网站页面。在本节中,我们将使用SharePoint Designer创建SharePoint的网站页面,打开SharePoint Designer连接到SharePoint站点。在左侧栏中选择“网站页面”,右侧会列出所有网站页面。如图10-14所示:
网站允许我们自己创建并定义站点主页。我们可以通过Ribbon上面的“Web部件页”和“页面”按钮来确定创建什么类型的网站页面,我们可以从“页面”按钮创建普通的aspx或html页面,从“Web部件页”按钮上可以创建新的Web部件页。在下面的例子中,我们将创建一个新的Web部件页。如图10-15所示。当您单击“创建Web部件页”,会显示出8个Web部件页模板,这是由SharePoint内置提供的。
现在新建一个名为“CustomWebPart.aspx”并双击文件,查看CustomWebPart.aspx设置页面,如图10-16所示:
现在新建一个名为“CustomWebPart.aspx”并双击文件,查看CustomWebPart.aspx设置页面,如图10-16所示:
选中要编辑的内容页,选择“编辑页面”的链接,转入编辑视图。SharePoint Designer设计视图与Visual Studio编辑器视图相似。如果只是一些小的改动,可以切换至分屏视图,这样既方便选中要编辑的区域,也可以快速查看HTML改动后的效果。在设计视图中点击“Untitled_1”PlaceHolder。如图10-17所示,代码视图中相应的HTML标记就被选中。
选择TitleWebPart元素,将HeaderTitle值改为“新网站页面”。如图10-18所示,使用Ribbon的ASP.NET按钮添加新的asp.net控件和html标记。
我们将添加一些额外的控件并修改标题,然后点击Ribbon上的保存按钮,这样就会将修改的网站页面保存到内容数据库里面。接下来,打开浏览器并导航到SharePoint网站。在左侧导航栏中点击库,在显示的库列表上打开网站页面库,如图10-19所示,我们创建的页面已经在库中了。
点击“CustomWebPart”打开自定义页面,如图10-20所示,新的页面,标题是“新网站页面”。
现在我们已经了解了如何从SharePoint Designer中创建网站页面,接下来我们考虑如何从Visual Studio创建一个网站页面。我们要创建一个拥有两个Web部件区域的网站页面,使得用户可以添加两个Web部件。首先要了解到,我们不可以直接将网站页面添加到Visual Studio的SharePoint项目中,所以我们就需要在默认打开模式在选择[文件]>[新建]>[文件],然后在新建项对话框中选择[Web]>[C#]>[Web窗体]。点击[打开]就创建了一个拥有标准HTML和Web表单的ASP.NET页面,我们要删除整个HTML标记,然后替换成我们所需要的Web部件页所需要的代码。如列表10-2所示,自定义Web部件区域。
在最顶部要添加一个@Page指令。需要设置MasterPageFile属性,将其属性设置为我们需要的母版页。在这个例子中我们使用了默认母版页,设置为“~masterurl/default.master”。我们还需要设置这个Web部件页的继承属性:”Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral,PublicKeyToken=71e9bce111e9429c”。
这是一个非常长的值,WebPartPages是Microsoft.SharePoint程序集的命名空间。版本14.0.0.0则是说明我们正在使用2010版本的Microsoft SharePoint。而在代码行下面有绿色的波浪线,因为Visual Studio并不支持加载SharePoint母版页上下文,这就阻止了我们转换至设计视图,而只能在代码视图中修改页面源代码。
接下来我们需要添加一个@Register指令来注册SharePoint Web控件。设置WebControls前缀为SharePoint。同样设置Microsoft.SharePoint.Utilities,命名空间为Utilities,这其中包含字符串编码和用户信息相关工具,如任务等。还要包含Microsoft.Web.CommandUI,这个程序集位于GAC中,包含SharePoint Ribbon空间。最后我们注册Web布局页继承对象Microsoft.SharePoint.WebPartPages前缀为WebPartPages。
接下来我们继续建设网站的其他部分,在页面的主要部分上我们添加PlaceHolderMain的占位符标记,让Web部件显示在页面的主要区域,在这个标记上方添加<h1>标记,以显示网页标题。然后从工具箱中拖出HTML的Table标记。在Visual Studio的设计视图中就会出现3行3列的表格。而我们只需要一行两列,删除其余部分,接下来从工具箱中拖出Web部分区域控件—WebPartZone,如图10-21所示:
默认Web部件区域的前缀为“asp:”由于我们的设置,则需将前缀改变为WebPartPages。否则SharePoint将无法识别这些WebPartZone控件。现在我们将添加第二个WebPartZone控件放置到表格的第二列。如代码10-2中所示设置相应的WebPartZone控件的属性,你可以保存为MyWebPartPage.aspx页面。
接下来我们要将MyWebPartPage.aspx部署到内容数据库中。首先创建一个新的空SharePoint项目,命名为WebPartPage,在SharePoint自定义想到中选择部署为场解决方案(我们也可以创建沙盒解决方案)。然后在项目WebPartPage上右键单击在菜单中选择“添加”>“添加项”,创建一个新的模块,然后删除其中的Sample.txt,并在模块文件夹上右键单击,在菜单中选择“添加”>“现有项”。然后在添加现有项的对话框中找到MyWebPartPage.aspx页面,选中并点击“添加”按钮。最后依照代码10-3所示,修改Elements.xml文件,以保证我们的页面被部署到网站的网页库中。
正如我们操作母版页所做的那样,我们修改默认的Elements.xml文件,修改Module元素的Url属性,告诉SharePoint将我们的自定义页面部署到网页库中。然后,删除File的元素属性Url的值,以防止部署时创建WebPartPage文件夹,添加Type属性,设置为“GhosttableInLibrary”,以保证自定义页面显示在库视图中。
现在,在解决方案选项卡中,右键单击项目WebPartPage,在菜单中选择部署。然后等待Visual Studio左下角显示部署成功,我们可以打开浏览器并打开站点主页,在左侧导航栏中点击“库“,选择“网站页面“,然后就可以找到我们刚刚部署的页面啦。
在网页上方的Ribbon的“页面“选项卡中点击”在浏览器中打开“。为了测试,我们设置页面为可编辑,这是在Ribbon工具栏上就出现了”编辑页面“的按钮,点击之后,进入编辑模式,就会出现两个可编辑的Web部件区域。现在,用户就可以将可用的Web部件添加这两个Web部件区域中。如图10-22所示就是编辑模式下的自定义Web部件页。