C#——通過XML讀取左側菜單實現Extjs菜單動態加載

      項目中使用到了Extjs，使用了Extjs的邊框佈局，分爲top,west,center。

      左側爲菜單部分，最初直接寫在JS文件中，今天看了一下，覺得這樣寫對於以後擴展來說不是特別好，但用什麼去替換呢，想來想去還是用XML文件替換更方便一些，這樣方便擴展，也方便以後添加一個新的菜單。

      其實實現原理很簡單，關鍵是C#對於XML文件的解析操作。

      操作的第一步當然是要創建XML文件並制定規則：

<?xml version="1.0" encoding="utf-8" ?>
<menuroot>
  <menu id="menu1" class="x-hidden" name="菜單一">
    <info src="../images/jq.png" alt="菜單欄目一" id="menu1_jq" href="連接地址1" txt="菜單欄目一"/>
  </menu>
  <menu id="menu2" class="x-hidden" name="菜單二">
    <info src="../images/contract.png" alt="菜單欄目二" id="menu2_myFocus" href="連接地址2" txt="菜單欄目一"/>
    <info src="../images/contract.png" alt="菜單欄目二" id="menu2_list" href="連接地址3" txt="菜單欄目二"/>
  </menu>
</menuroot>

 此處定義了二個菜單，以及3個子欄目。在CS文件中只要按照此規則進行文件的讀取即可。

public StringBuilder initMenu() 
        {
            StringBuilder sb = new StringBuilder();
            StringBuilder sbJs = new StringBuilder();
            string str = "";

            // 讀取配置文件讀取XML文件地址
        string menuFile = System.Web.HttpRuntime.AppDomainAppPath.TrimEnd('//') + System.Web.Configuration.WebConfigurationManager.AppSettings["menufilepath"];
            XmlDocument doc = new XmlDocument();
            doc.Load(menuFile);	// 加載XML文件

            // 讀取子節點
            XmlNodeList nodes = doc.DocumentElement.ChildNodes;
            if (nodes != null)
            {
                foreach (XmlNode node in nodes)
                {
                   // 讀取菜單節點
                   string menuId = node.Attributes["id"].Value.ToString();               // 菜單ID
                   string menuClass = node.Attributes["class"].Value.ToString();         // 菜單樣式
                   string menuName = node.Attributes["name"].Value.ToString();           // 菜單名稱

                   // 菜單欄目
                   XmlNodeList childNodes = node.ChildNodes;

                   // 遍歷節點
                   sb.Append(this.createMenuInfo(menuId, menuClass, childNodes));

                   sbJs.Append(@"
                        var " + menuId + @" = new Ext.Panel({
                            frame: true,
                            title: '" + menuName + @"',
                            collapsible: true,
                            contentEl: '" + menuId + @"',
                            titleCollapse: true
                        });
                    ");

                   str += menuId + ",";
                }

                str = str.Substring(0, str.Length - 1);

                sbJs.Append(@"
                    //添加左邊
                    var west = new Ext.Panel({
                        id: 'action-panel',
                        region: 'west',
                        split: true,
                        collapsible: true,
                        collapseMode: 'mini',
                        header: false,
                        width: 200,
                        minWidth: 200,
                        maxWidth: 200,
                        border: false,
                        baseCls: 'x-plain',
                        items: [" + str + @"]
                    });
                ");
           }

           // 此處於用動態加載一個JS到頁面中
           HtmlGenericControl script = new HtmlGenericControl("script");
           script.Attributes.Add("language", "JavaScript");
           script.Attributes.Add("type", "text/javascript");
           script.InnerHtml = sbJs.ToString();                     // 加載要使用的JS菜單
           this.Page.Header.Controls.Add(script);

            return sb;
        }

 這樣就實現了動態創建過程，重點就是對於XML文件的讀取和XML文件規則的制定。

 上面文件方法中的：System.Web.Configuration.WebConfigurationManager.AppSettings["menufilepath"]此處將文件路徑保存在WebConfig.xml文件裏。

    當然寫了這麼多東西都是爲了在頁面展示，頁面中要給代碼留下來相應的位置，以便加載使用：

<%--初始化左側菜單--%>
    <div id="leftMenu" runat="server">        
    </div>

 這樣後臺只需要調用上面的方法來完成內容的加載：

this.leftMenu.InnerHtml = this.initMenu().ToString();

 

這樣就完成了通過XML文件來動態加載Extjs左側菜單功能。

個人博客：

www.52cfml.com