今天的問題也許對大多數Web開發人員來說是一個很簡單的，但是我覺得還是有必要記錄一下我突破的過程。

DNN開發的魅力在于一個模塊完成了，可以在很多頁面來使用，正如一個類設計好了，可以有構造很多的對象，無非就是在每個對象里塞滿東西！

我將這個模塊比如為一個圖書信息。這個網站上很多網頁都涉及到一個圖書列表的顯示：最熱銷的圖書/最新圖書/最XX的圖書等等，他們其實是一個模塊定義的不同表現形式而已。由于美化界面的需要，這些列表可能有不同的外觀。我們想到的第一個就是CSS。的確CSS幫助我們解決了很多的問題。但是今天還是碰到了一個問題，花了1小時解決了它。:)
今天的問題是：如何在DataList中使用CSS Lists Properties特性，并且能夠在模塊的設置中用戶定制CSS?

（1）在DataList中設置了CssClass屬性為MyList。同時在Portal目錄下Default.css中定義：
.MyList
{}{
????list-style-image:url("http://localhost/MyDNN//images/rt.gif");
????/**//*list-style-type:circle;*/
}
運行沒有反應！
仔細看了服務端生成的HTML源文件，發現MyList的確被賦給了一個Table。DataList沒有服務端解析成一個List的HTML“對象”，而list-style屬性只對<li>標簽標明的List的HTML“對象”有效。

（2）在DataList的ItemTemplate中加入<li>標簽。發現有效：
<asp:DataList?ID="DataList1"?runat="server">
<HeaderTemplate><ul></HeaderTemplate>
????<ItemTemplate>
????<li?class='MyList'>
????????<asp:Label?ID="Label1"?runat="server"?Text='<%#?DataBinder.Eval(Container.DataItem,"Title")?%>'></asp:Label>
????</li>
????</ItemTemplate>
<FooterTemplate></ul></FooterTemplate>
</asp:DataList>

運行一次，搞定了，那個綠色的圖標“rt.gif”出現在每個列表項前了！

（3）對于這個<li>不是run at server，我如何換掉他的外衣？？
我試了一下<li class='<%MyList%>'>并且在.ascx.cs文件中定義一個public string MyList="MyList";
發現編譯錯誤，幾乎我放棄了。可是我看到了可愛的‘#’！我拍了腦門，這里是循環的喲，要加#！！！最后的代碼如下：

<asp:DataList?ID="DataList1"?runat="server">
<HeaderTemplate><ul></HeaderTemplate>
????<ItemTemplate>
????<li?class='<%#MyList%>'>
????????<asp:Label?ID="Label1"?runat="server"?Text='<%#?DataBinder.Eval(Container.DataItem,"Title")?%>'></asp:Label>
????</li>
????</ItemTemplate>
<FooterTemplate></ul></FooterTemplate>
</asp:DataList>

對應的.cs文件部分片段如下：

????????????????????DataList1.DataSource?=?colBookItems;
????????????????????DataList1.DataBind();
????????????????????if?(((string)Settings["BookListCSS"]?!=?null)?&&?((string)Settings["BookListCSS"]?!=?""))
????????????????????{
????????????????????????this.MyList=?(string)Settings["BookListCSS"];
????????????????????}

在Settings.ascx中加入一個設置的輸入框，在保存事件中加入

????????????????objModules.UpdateTabModuleSetting(TabModuleId,?"BookListCSS",?tbBookListCSS.Text);

?這樣就能夠通過設置來制定DataList中列表的樣式了。?

轉載于:https://www.cnblogs.com/PM_2004/archive/2006/04/04/366675.html

總結

以上是生活随笔為你收集整理的DNN开发中的一些细节（3）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。