Question

我有一个看起来像这样的控件：

<asp:DetailsView ID="dvUsers" runat="server" DataSourceID="odsData" 
                 DataKeyNames="Id">
...
</asp:DetailsView>

最终会创建一个<table>作为最外层的元素。在我的CSS中我有：

table tr {
border-top: 0 ;
border-left: 0 ;
border-right: 0 ;
border-bottom-width: 1px;
}

现在，当我运行网站时，呈现的<table>将具有边框和样式，这是由控件的默认设置引起的，如下所示

<table cellspacing="0" rules="all" border="1" id="ctl00_body_dvUsers" 
       style="border-collapse:collapse;">

这显然会覆盖我的CSS，因为它是内联的，我不想要这个。是否有任何方法可以自动完成所有样式？我想我可以通过在DetailsView上设置很多属性来获得与CSS相同的结果，但我可能有很多控件，最终会将最终输出呈现为table，我必须以相同的方式配置所有这些。

如果某些设计师想要更改所有表的样式，这将导致大量重复的代码和大量工作，因为我必须返回并更改主题文件中每个控件的样式。

有没有办法说“不要弄乱风格，我知道我在做什么！” ？

Answer 1

看看CSS Friendly Control Adapters项目。它提供了一个插件解决方案，用于将DetailsView控件（和其他）从基于表的设计转换为基于div的设计，该设计使用CSS类而不是内联样式。

因此，例如，它会自动转变这种令人头疼的代码：

<table cellspacing="2" CssSelectorClass="PrettyDetailsView" border="0" id="ctl00_ctl00_MainContent_LiveExample_DetailsView1" style="background-color:White;border-style:None;">
  <tr style="color:#F7F6F3;background-color:#5D7B9D;font-weight:bold;">
    <td colspan="2">Author Details</td>
  </tr><tr style="color:#333333;background-color:White;">
    <td style="font-weight:bold;">ID</td><td>998-72-3567</td>
  </tr><tr style="color:#333333;background-color:#F7F6F3;">
    <td style="font-weight:bold;">Last name</td><td>Ringer</td>
  </tr><tr align="center" style="color:Cyan;background-color:#284775;">
    <td colspan="2"><table border="0">
      <tr>
        <td><span>1</span></td><td><a href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$DetailsView1','Page$2')" style="color:Cyan;">2</a></td>
      </tr>
    </table></td>
  </tr>
</table>

和平与宁静：

<div class="PrettyDetailsView" id="ctl00_ctl00_MainContent_LiveExample_DetailsView1">
  <div class="AspNet-DetailsView">
      <div class="AspNet-DetailsView-Header">
        Author Details
      </div>
      <div class="AspNet-DetailsView-Data">
        <ul>
          <li>
            <span class="AspNet-DetailsView-Name">ID</span><span class="AspNet-DetailsView-Value">998-72-3567</span>
          </li>
          <li class="AspNet-DetailsView-Alternate">
            <span class="AspNet-DetailsView-Name">Last name</span><span class="AspNet-DetailsView-Value">Ringer</span>
          </li>
        </ul>
      </div>
      <div class="AspNet-DetailsView-Pagination">
        <span class="AspNet-DetailsView-ActivePage">1</span><a class="AspNet-DetailsView-OtherPage" href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$DetailsView1','Page$2')">2</a>
      </div>
  </div>
</div>

我已经成功使用它一段时间了，强烈推荐它。

Answer 2

如果您想更好地控制您的HTML，请考虑使用repeater control。

Answer 3

我经常使用javascript。例如，下面的代码将删除所有表中的所有内联样式属性：

$(document).ready(function () {

    $('table').filter(function (index) {
        return $(this).removeAttr("style");
    });

});

有没有办法拒绝.NET控件来设置最终HTML元素的样式

3 个答案: