XML應用--實作圖片選擇功能

今天包仔介紹用XML檔存取方式實作一個簡易的圖片選擇。
首先製作一份用來存取的XML檔案，結構如下：

PicDetail.xml

接著製作一ASPX網頁如下：
XmlTest.aspx

〈div〉
〈table border="1" cellpadding="0" cellspacing="0" style="width: 512px; height: 100px"〉
〈tr〉
〈td style="width: 55px; height: 5px;" align="right" valign="middle"〉
〈asp:Label ID="Label1" runat="server" Text="選擇圖片" Width="78px"〉
〈/asp:Label〉
〈/td〉
〈td style="width: 313px; height: 5px"〉
〈asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"〉 〈/asp:DropDownList〉
〈/td〉
〈/tr〉
〈tr〉
〈td style="height: 48px;" align="center" colspan="2" valign="middle"〉
〈asp:Image ID="Image1" runat="server" /〉
〈/td〉
〈/tr〉
〈/table〉
〈/div〉
〈asp:XmlDataSource ID="XmlDataSource1" runat="server"〉
〈/asp:XmlDataSource〉

XmlTest.aspx.cs

using System;using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Xml;
using System.Xml.XPath;

public partial class XmlTest : System.Web.UI.Page
{
const string MenuXml = "PicDetail.xml";
XPathDocument XmlD;
XPathNodeIterator iTerator;
XPathNavigator Nav;
XPathExpression expr;

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
MenuReader();
}
}

private void MenuReader()
{
this.DropDownList1.Items.Clear();
XmlD = new XPathDocument(Server.MapPath("~/"+ MenuXml));
Nav = XmlD.CreateNavigator();
expr = Nav.Compile("/Pics/Pic[@Text]");
iTerator = Nav.Select(expr);
ShowNodeDetail(iTerator);
}

//抓取節點屬性
void ShowNodeDetail(XPathNodeIterator iterators)
{
this.DropDownList1.Items.Clear();

try
{
while (iterators.MoveNext())
{
XPathNavigator nav2 = iterators.Current.Clone();
this.DropDownList1.Items.Add(new ListItem(nav2.GetAttribute("Text", ""), nav2.GetAttribute("ImgUrl","")));
}

this.DropDownList1.Items.Insert(0, new ListItem("--請選擇--", ""));
}
catch (Exception ex)
{ throw ex; }
}

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
if (this.DropDownList1.SelectedValue != "")
{
string ImgUrl = this.DropDownList1.SelectedValue;
this.Image1.ImageUrl = "~/images/" + ImgUrl;
}
}
}

操作畫面如下：