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

FormView Control Example

Example Summary and Logic

The FormView control is similar to the DetailsView. Rather than using field tags like <asp:BoundField>, the FormView specifies its data using template tags like <ItemTemplate>.

Normally (i.e., when no adapter is used) the FormView renders a <table> to lay out the header, footer, paging and item data areas.

An adapter can be used to replace this <table> with a few nested <div> tags whose appearance and position is easily styled with CSS.

Working Example

Author Details
Abraham Bennet
6223 Bateman St.
Berkeley, CA
94705
415 658-9932
12345678910...

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

<div class="PrettyFormView">
  <div class="AspNet-FormView">
    <div class="AspNet-FormView-Header">
      Author Details
    </div>
    <div class="AspNet-FormView-Data">
      
                <div class="Sample-Contact">
                    <div class="Sample-Name">
                        Abraham Bennet
                    </div>
                    <div class="Sample-Address">
                        6223 Bateman St.<br />
                        Berkeley, CA<br />
                        94705
                    </div>
                    <div class="Sample-Phone">
                        415 658-9932
                    </div>
                </div>
            
    </div>
    <div class="AspNet-FormView-Pagination">
      <span class="AspNet-FormView-ActivePage">1</span><a class="AspNet-FormView-OtherPage" href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$FormView1','Page$2')">2</a><a class="AspNet-FormView-OtherPage" href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$FormView1','Page$3')">3</a><a class="AspNet-FormView-OtherPage" href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$FormView1','Page$4')">4</a><a class="AspNet-FormView-OtherPage" href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$FormView1','Page$5')">5</a><a class="AspNet-FormView-OtherPage" href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$FormView1','Page$6')">6</a><a class="AspNet-FormView-OtherPage" href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$FormView1','Page$7')">7</a><a class="AspNet-FormView-OtherPage" href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$FormView1','Page$8')">8</a><a class="AspNet-FormView-OtherPage" href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$FormView1','Page$9')">9</a><a class="AspNet-FormView-OtherPage" href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$FormView1','Page$10')">10</a><a class="AspNet-FormView-OtherPage" href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$FormView1','Page$11')">...</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.