Use Adapters?

The adapters are currently turned on. Do you want to keep them enabled?

more about the adapters

Theme Chooser

The examples can use either a "basic" or "enhanced" theme or no theme at all.

more about CSS & themes

DetailsView Control Example

Example Summary and Logic

The DetailsView control is used to display one or more fields from a single data record. The unadapted version of the DetailsView control renders these fields as rows in an HTML <table>. An adapter can be used to render an unordered list (<ul> and <li> tags) instead.

The unadapted DetailsView uses table cells (<td> tags) to separate each field's descriptive (header) text from its value. The adapted control uses <span> tags instead. By styling these <ul>, <li> and <span> tags with CSS you can customize nearly every aspect of the DetailsView's appearance.

Working Example

Author Details
  • ID998-72-3567
  • Last nameRinger
  • First nameAlbert
  • Phone801 826-0752
  • Street67 Seventh Av.
  • CitySalt Lake City
  • StateUT
  • ZIP code84152
  • Contracttrue
  • Edit
12

HTML Snippets

Snippet of HTML when using the adapters

ASP.NET 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<div class="PrettyDetailsView">
  <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('ctl00$ctl00$MainContent$LiveExample$DetailsView1','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('ctl00$ctl00$MainContent$LiveExample$DetailsView1','Page$2')">2</a>
    </div>
  </div>
</div>

Snippet of HTML when not using the adapters

To see this snippet, please:
  1. Turn off the CSS Friendly adapters or
  2. Run this web application with full trust.