Use Adapters?

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

The examples can use either a "basic" or "enhanced" with a template.

FormView Template 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" id="ctl00_ctl00_MainContent_LiveExample_FormView1">
  <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.