Есть ли способ запретить элементы управления .NET для стилизации конечного элемента HTML

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, так как он встроенный, и я не хочу этого. Есть ли способ поворота всего стиля, который выполняется автоматически? Я думаю, что я мог бы получить тот же результат, что и мой CSS, установив много атрибутов на DetailsView, но у меня могло бы быть много элементов управления, которые в конечном итоге отобразили бы окончательный результат как table, и мне пришлось бы настроить все эти параметры одинаково.

Это приведет к большому количеству дублированного кода и большой работе, если какой-то дизайнер захочет изменить стиль всех таблиц, поскольку мне придется вернуться и изменить стили для каждого элемента управления в моем файле Theme.

Есть ли способ сказать: "Не связывайтесь со стилями, я знаю, что делаю!"

Answer 1

Посмотрите на проект Адаптеры дружественного управления CSS . Он предоставляет встроенное решение для преобразования элемента управления 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, рассмотрите возможность использования элемента управления повторителем .

Answer 3

Я часто использую JavaScript для этого. Например, приведенный ниже код удалит все атрибуты встроенного стиля из всех таблиц:

$(document).ready(function () {

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

});