ขั้นแรกให้สร้างไฟล์ xml ใหม่ชื่อเมนูโดยมีเนื้อหาดังต่อไปนี้:
<?xml version="1.0" encoding="utf-8" ?>
<เมนู>
<menuItem url="~/Default.aspx" title="หน้าแรก" description=""/>
<menuItem url="~/News.aspx" title="ข่าว" description="">
<menuItem url="~/News.aspx" title="ข่าวในประเทศ" description=""/>
<menuItem url="~/News.aspx" title="ข่าวต่างประเทศ" description=""/>
</เมนูรายการ>
</menu> จากนั้นลากและวางตัวควบคุมเมนูบนเพจ ลากและวางตัวควบคุม XmlDataSource ด้วย id XmlDataSource1 และตั้งค่า DataSourceID ของเมนูเป็น XmlDataSource1
กำหนดค่าตัวควบคุม XmlDataSource เพื่อให้ DataFile="~/Menu.xml" XPath="menu/menuItem",
ในที่นี้ xpath ใช้เพื่อเลือกข้อมูล นั่นคือ เพื่อกรองข้อมูล menuItem
ณ จุดนี้ ผูกข้อมูลของตัวควบคุมเมนู และบอกตัวควบคุมเมนูถึงวิธีการแสดงข้อมูลที่กรองจากไฟล์ xml เลือกตัวควบคุมเมนู เลือก DataBindings ในหน้าต่างคุณสมบัติ ในกล่องโต้ตอบป๊อปอัป เลือก menuItem ในรายการที่มุมซ้ายบน คลิกปุ่มเพิ่ม เพื่อเพิ่ม menuItem ลงในรายการทางด้านซ้ายล่าง จากนั้นเลือก menuItem ใน รายการนี้ นี่คือสิทธิ์ รายการจะแสดงคุณสมบัติที่จะผูก ดังนั้น NavigateUrlField="url" TextField="title" กดปุ่ม OK เพื่อกลับไปยังอินเทอร์เฟซการออกแบบ ในเวลานี้ รายการเมนูสองรายการ "หน้าแรก" และ "ข่าว" จะปรากฏขึ้น
รหัส html การออกแบบมีดังนี้:
<%@ ภาษาเพจ = "C#" AutoEventWireup = "true" CodeBehind = "Default.aspx.cs" สืบทอด = "CoAffiliate._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// TH" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml " >
<หัว runat="เซิร์ฟเวอร์">
<title>หน้าที่ไม่มีชื่อ</title>
</หัว>
<ร่างกาย>
<form id="form1" runat="server">
<div>
<asp:Menu ID = "Menu1" runat = "เซิร์ฟเวอร์" DataSourceID = "XmlDataSource1" Orientation = "แนวนอน" StaticEnableDefaultPopOutImage = "False">
<การผูกข้อมูล>
<asp:MenuItemBinding DataMember = "เมนูItem" NavigateUrlField = "url" TextField = "ชื่อ" />
</การเชื่อมโยงข้อมูล>
</asp:เมนู>
<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/Menu.xml" XPath="เมนู/menuItem"></asp:XmlDataSource>
</div>
</แบบฟอร์ม>
</ร่างกาย>
</html>