Number of View: 19526
VN:F [1.9.13_1145]
Rating: 0.0/10 (0 votes cast)

Em tentativas frustradas de se conseguir componentes que no ajudem a programar em .NET gerando um HTML válido no W3C eu encontrei o CSS Control Adapter Toolkit. Ele não gera um HTML 100% validado mas tenta chegar perto disso.

Ele gera um HTML mais compatível com os padrões, utilizando CSS para várias coisas, ao invés de tabelas. O mais legal é que ele é extensível, ou seja, você pode criar um Adapter para algum controle e renderizá-lo da forma que achar melhor. Por exemplo, se você acha que o HTML gerado pelo GridView não está do jeito que você quer, você pode criar um Adapter e gerar o HTML que você especificar.

Segue o link da ferramenta: CSS Control Adapter Toolkit

Código gerado com o CSS Control Adapter Toolkit:

<div class="PrettyDetailsView" id
="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>
          <li>
            <span class="AspNet-DetailsView-Name">
First name
</span>
            <span class="AspNet-DetailsView-Value">
Albert
</span>

          </li>
          <li class="AspNet-DetailsView-Alternate">
            <span class="AspNet-DetailsView-Name">
Phone
</span>
            <span class="AspNet-DetailsView-Value">
801 826-0752
</span>

          </li>
          <li>
            <span class="AspNet-DetailsView-Name">
Street
</span>
            <span class="AspNet-DetailsView-Value">
67 Seventh Av.
</span>

          </li>
          <li class="AspNet-DetailsView-Alternate">
            <span class="AspNet-DetailsView-Name">City</span>
            <span class="AspNet-DetailsView-Value">
Salt Lake City
</span>

          </li>
          <li>
            <span class="AspNet-DetailsView-Name">State</span>
            <span class="AspNet-DetailsView-Value">UT</span>

          </li>
          <li class="AspNet-DetailsView-Alternate">
            <span class="AspNet-DetailsView-Name">ZIP code</span>
             <span class="AspNet-DetailsView-Value">84152</span>

          </li>
          <li>
            <span class="AspNet-DetailsView-Name">Contract</span>
            <span class="AspNet-DetailsView-Value">true</span>

          </li>
          <li class="AspNet-DetailsView-Alternate">
            <span class="AspNet-DetailsView-Name">
     <a href="javascript:__doPostBack('View1','Edit$0')">
     Edit</a></span>

          </li>
        </ul>
      </div>
      <div class="AspNet-DetailsView-Pagination">

        <span class="AspNet-DetailsView-ActivePage">1</span>
       <a class="AspNet-DetailsView-OtherPage" 
       href="javascript:__doPostBack('$DetailsView1','Page$2')">2</a>

      </div>

  </div>
</div>
Código gerado sem com o CSS Control Adapter Toolkit:

  <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 style="color:#333333;background-color:White;">
      <td style="font-weight:bold;">First name</td><td>Albert</td>

    </tr><tr style="color:#333333;background-color:#F7F6F3;">
      <td style="font-weight:bold;">Phone</td><td>801 826-0752</td>

    </tr><tr style="color:#333333;background-color:White;">
      <td style="font-weight:bold;">Street</td><td>67 Seventh Av.</td>

    </tr><tr style="color:#333333;background-color:#F7F6F3;">
      <td style="font-weight:bold;">City</td><td>Salt Lake City</td>

    </tr><tr style="color:#333333;background-color:White;">
      <td style="font-weight:bold;">State</td><td>UT</td>

    </tr><tr style="color:#333333;background-color:#F7F6F3;">
      <td style="font-weight:bold;">ZIP code</td><td>84152</td>

    </tr><tr style="color:#333333;background-color:White;">
      <td style="font-weight:bold;">Contract</td><td>true</td>

    </tr><tr style="color:Blue;background-color:#F7F6F3;">
      <td colspan="2">
     <a href="javascript:__doPostBack('$LiveExample$DetailsView1','Edit$0')" 
     style="color:Blue;">Edit</a></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('$DetailsView1','Page$2')" 
          style="color:Cyan;">2</a></td>

        </tr>
      </table></td>
    </tr>
  </table>

</div>



Posted from Vila Velha, Espírito Santo, Brazil.

VN:F [1.9.13_1145]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.13_1145]
Rating: 0 (from 0 votes)