هل هناك أي وسيلة لإنكار الضوابط .NET لأسلوب عنصر HTML النهائي

StackOverflow https://stackoverflow.com/questions/814101

  •  03-07-2019
  •  | 
  •  

سؤال

ولدي السيطرة التي تبدو شيئا مثل هذا:

<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 وأود أن تكوين كل هذه بنفس الطريقة.

وهذا من شأنه أن يؤدي في الكثير من التعليمات البرمجية مكررة والكثير من العمل إذا كان بعض مصمم ترغب في تغيير نمط كافة الجداول، منذ أود أن أعود وتغيير أنماط للكل عنصر تحكم في ملف موضوع لي.

هل هناك طريقة للقول "لا تنزعج الفوضى مع الأنماط، وأنا أعرف ما أقوم به!"

هل كانت مفيدة؟

المحلول

ونلقي نظرة على CSS تحكم ودية محولات المشروع. ويوفر حل انخفاض في تحويل السيطرة DetailsView (وغيرها) من القائم على طاولة تصميم وإلى تصميم على أساس شعبة يستخدم الطبقات 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>

ولقد تم استخدامه بنجاح لبعض الوقت الآن، أوصي به.

نصائح أخرى

إذا كنت تريد المزيد من السيطرة على أتش تي أم أل النظر في استخدام <لأ href = "http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.repeater.aspx" يختلط = " نوفولو noreferrer "> مراقبة مكرر .

وأنا غالبا ما تستخدم جافا سكريبت لهذا الغرض. على سبيل المثال، رمز أدناه سيزيل كل سمات أسلوب المضمنة من جميع الجداول:

$(document).ready(function () {

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

});
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top