Did you ever wanted to create completely custom menu in SharePoint and use some common way to manage the navigation nodes?

In this post I’ll show you how to build custom navigation with an XML file as a navigation source and treeview as display control.

你是否曾想过在SharePoint中创建完全自定义的菜单，并使用一些常见的方法管理这些导航节点？本文中我将向你展示如何使用XML文件作为导航源，以树视图作为显示控件，创建自定义的导航。

image

And what is the benefit of this approach? 

这种方法有什么好处吗？

image 

Because navigation nodes are defined in XML file, nodes can be managed manually or retrieved automatically. XML file can be retrieved from anywhere or even constructed and manipulated by custom code. One of simpler approaches would be even to have data source available as XML web service.

因为导航节点在XML文件中定义，所以节点可以手动管理或者自动抽取。XML文件可以从任何位置抽取，或者甚至由自定义代码生成和管理。一个更简单的方法之一是将可用数据源作为XML Web Service。

 

image

Another benefit is XML structure. Structure below is just a sample. Structure can be more complex or completely different or contain a lot more information. It's up to you to define which information is in element and what in attributes.

另一个好处是XML架构。下面只是个例子。结构可以更复杂或者完全不同，或者包含更多信息。每个元素有什么信息，属性都是由你来定义。

Maybe you even have an XML schema already defined somewhere and you just reuse it….

也许你已经在某处定义了XML架构，你只是重用它。

Create navigation source  创建导航源

Create sample xml file with nodes that should be displayed in navigation menu.创建一个带有节点的样例XML文件。

Save file as “MyNavSource.xml” on SharePoint. I used Pages library for this post. 保存为MyNavSource.xml到SharePoint上。这里我放在Pages库中。

Create blank aspx file 创建空白ASPX页面

On SharePoint create a blank aspx file and save it as “NavigationPost.aspx”.

在SharePoint上创建空白ASPX文件，保存为NavigationPost.aspx。

 

Add SPXMLDatasource in NavigationPost.aspx 添加SPXMLDatasource到NavigationPost.aspx中

  • Click on a “Data Source Library”. 点击数据源库。
  • Under XML Files create new data source by clicking “Add an XML file…”在XML文件下点击“添加XML文件”创建新数据源。（PS：2010版本点击新建“XML文件连接”，译者注）。
  • Point “Source” to XML file created at the beginning (MyNavSource.xml) 将“源”指向最初创建的XML文件MyNavSource.xml。


  • In Data Source Library click on MyNavSource.xml and then select “Insert Data Source Control”在数据源库中点击MyNavSource.xml，然后选择“插入数据源控件”。（SPD2010版本，点击NavigationPost.aspx页面，在设计视图插入数据源--MyNavSource.xml，译者注）


File NavigationPost.aspx should look like this: 文件NavigationPost.aspx应该是这样的


Add TreeView control 添加树视图控件

  • Select Toolbox 选择工具箱
  • Insert TreeView 插入树视图

 

  • Click on TreeView and set Data Source to SPXmlDataSource1 点击树视图，设置数据源为SPXmlDataSource1。


  • File NavigationPost.aspx should now look like this: 文件NavigationPost.aspx现在是这样的


  • In a browser is should look like this: 在浏览器中应该是这样的


  • Because sample XML file uses attributes name and url edit the DataBindings for TreeView control 因为样例XML文件使用属性name和url，编辑数据绑定到树视图控件。

image

  • For node set binding as set on picture 对于节点，设置绑定如图


  • Preview should look like this: 预览应该是这样的


  • Autoformat the treeview if necessary…如果必要自动格式化树视图。


 

  • In SharePoint Designer click Format, Master Page, Attach Master Page 在SPD中点击格式，母版页，附加到母版页。

image

AspMenu?

It is also possible to use aspmenu control instead of Treeview. That would look like this: 使用aspmenu代替树视图也是可能的，看起来像这样：

image