在asp.net mvc項目里,用戶需要開拓幾個活動版面,並以側欄的方式呈現在首頁右側,幾個活動時間不一致,為避免瀏覽者在活動未開放之時進入未開放的服務頁面。因此不僅需要在活動代碼中加入限制功能,也需要在前臺取消不合時宜的頁面的展示。 ...
一、背景
在asp.net mvc項目里,用戶需要開拓幾個活動版面,並以側欄的方式呈現在首頁右側,幾個活動時間不一致,為避免瀏覽者在活動未開放之時進入未開放的服務頁面。因此不僅需要在活動代碼中加入限制功能,也需要在前臺取消不合時宜的頁面的展示。後臺效果圖:
二、問題分析
要想控制頁面開關顯示,就得有存儲開關信息的介質,將在後臺產生的操作記錄下來,併在瀏覽者載入首頁之時能讀取操作記錄並達到控制頁面開關的目的。因此,考慮兩種介質儲存開關記錄信息,一是用資料庫mysql,二是用xml。考慮到這對資料庫的功能大材小用,並且會增加首頁載入時對資料庫資源消耗,所以考慮使用xml文檔來記錄開關記錄才是兩者中較好的選擇。這裡需要我們做一下前期工作,先設計xml的結構:
<?xml version="1.0" encoding="gb2312"?> <Settings> <Setting ID="1"> <title>****</title> <status>true</status> </Setting> </Settings>
說明的是:ID是對應多個紀錄的setting區分標記,title是設置頁面的名字,也就是服務的名字,status表明當前的服務頁面的狀態,有兩個值:true or false。在項目里添加名為Xml的文件夾,並保存設計的XML的命名為ServiceSettings.xml。
三、解決思路或過程
首先,產生開關操作需要頁面上的控制項,這裡使用的checkbox標簽,當然這不是唯一選擇,朋友們可以用其他的標簽來作為輸入控制項的使用。思路是:我觸擊checkbox,對應的js代碼記錄值,並以ajax上傳至後臺action中,後臺的action作出反應。
js代碼:
function BloodController() { $.ajax({ type: "POST", url: "/Admin/Controller", data: {}, dataType: "Json" }); }
html代碼:
<input name="switch-field-1" class="ace ace-switch ace-switch-6" type="checkbox" onclick="Controller()" />
ajax中的data,在這裡不標出。觸發後臺action一次,那麼就會運行action中操作xml的代碼,那麼就會改變xml中記錄的值。
然後,是action中操作xml的實現。思路是:首先要獲取xml在應用程式中的相對位置,然後便是更改xml的值。
public string Xmlpath = HttpRuntime.AppDomainAppPath.ToString() + "/Xml/ServiceSettings.xml"; public ActionResult Controller() { OperateXml sx = new OperateXml(); sx.modifyXml(Xmlpath); return Json(""); }
說明的是:HttpRuntime.AppDomainAppPath.ToString();方法可以獲取當前應用程式所在的根目錄。為了操作多個xml文件,我寫了OperateXml一個類方法,這裡進入對xml的操作細節介紹。
對於xml操作的原理不多說,其實ado.net支持的也很棒,xml文檔的結構類似於html,但它的自由度更高,可標記性也更高。不多說,直接上代碼,註釋里都解釋了:
public void modifyXml(string Path) { XmlDocument xmlDoc = new XmlDocument(); xmlDoc.Load(Path); XmlNodeList nodeList = xmlDoc.SelectSingleNode("Settings").ChildNodes;//獲取bookstore節點的所有子節點 foreach (XmlNode xn in nodeList)//遍歷所有子節點 { XmlElement xe = (XmlElement)xn;//將子節點類型轉換為XmlElement類型 if (xe.GetAttribute("ID") == "1") { XmlNodeList nls = xe.ChildNodes;//繼續獲取xe子節點的所有子節點 foreach (XmlNode xn1 in nls)//遍歷 { XmlElement xe2 = (XmlElement)xn1;//轉換類型 if (xe2.Name == "status")//如果找到 { if (xe2.InnerText != "false") { xe2.InnerText = "false";//則修改 break;//找到退出來就可以了 } else if (xe2.InnerText == "false") { xe2.InnerText = "true";//則修改 break;//找到退出來就可以了 } } } break; } } xmlDoc.Save(Path);//保存。 }
因為代碼註釋里解釋得夠清晰了,這裡不做贅述,需要說明一點是:這裡的status只有兩個值:true or false;在前臺讀出的便是這兩個值,來進行頁面控制的。
接著,就是前臺的讀取xml里的值。思路是:在動態頁面里讀取xml值,然後做判斷,true則顯示頁面,false則不顯示頁面。這裡讀xml代碼貼出,註釋里解釋詳細了。需要說明的是:這裡為了控制多個頁面的顯示,用了List<string>來轉載多個status的值。
public List<string> getAllXml(string Path) { string status = ""; XmlDocument doc = new XmlDocument(); doc.Load(Path); XmlNode xn = doc.SelectSingleNode("Settings"); XmlNodeList xnl = null; xnl = xn.SelectNodes("/Settings/Setting/status"); List<string> list = new List<string>(); foreach (XmlNode xn1 in xnl) { status = xn1.InnerText; list.Add(status); } return list; }
需要說明的是:這裡為了控制多個頁面的顯示,用了List<string>來轉載多個status的值。在前臺頁面里頁面里就這樣實現:
@using TheOne.Tool @{ OperateXml sx = new OperateXml(); List<string> list = new List<string>(); string path = HttpRuntime.AppDomainAppPath.ToString() + "/Xml/QuickServiceSettings.xml"; list = sx.getAllXml(path); string status_Umbrella = list[0].ToString(); //string status_Bottle = list[1].ToString(); //string status_Older = list[2].ToString(); //string status_Blood = list[3].ToString(); } @if (status_Umbrella == "true") { <div class="blog-grids wow fadeInDown" data-wow-duration=".8s" data-wow-delay=".2s"> <div class="blog-grid-left"> <a href="/UmbrellaManage/CreateUmbrellaUser"><img src="/Content/FrontEnd/images/yusan_2.jpg" class="img-responsive" alt=""></a> </div> <div class="blog-grid-right"> <h5><a href="/UmbrellaManage/CreateUmbrellaUser">借用雨傘</a> </h5> </div> <div class="clearfix"> </div> </div> } else if (status_Umbrella == "false") { }
到這裡,使用xml控制頁面開關介紹基本結束。
四、總結
思路中最核心的便是對xml的操作,修改xml和讀取xml。而對於如何實現checkbox狀態切換,這個實現可以使用js來操作,讀出status值,並讓相應的js代碼控制checkbox的狀態是選中還是未選中。實際項目演示地址:點擊 南農工紅會
如果我思路和方法有誤,懇請各位指正,虛心求教。轉載請註明來源與出處,謝謝合作 By 點將台無將