现在的位置: 首页 > 综合 > 正文

DNN开发中的一些细节(3)

2013年03月29日 ⁄ 综合 ⁄ 共 2005字 ⁄ 字号 评论关闭
今天的问题也许对大多数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中列表的样式了。 

抱歉!评论已关闭.