In the first part of ASP.NET for web designers series you could have seen some basics of styling ASP.NET web applications. In this article we'll take a look at ASP.NET data controls and how they work.
The series include:
- Introduction
- Data controls (this article)
- Navigation
- Working with Themes
- Working with Master pages
- Validation
- Checklist
- Sample application
When working with data, developers will use one of the controls shown in the image below.
Server controls used to show tabular data are GridView, DataList,
Repeater and ListView. GridView is a control that is easy
to bind with the data, but gives you less control over the code. The
basic GridView definition looks like this:
<asp:GridView ID="GridView1" runat="server"></asp:GridView>
However, it will automatically generate a table when bound to a data source.
This control renders to <table> element but if you add a pager
to GridView, for example, you will end up with nested tables:
<table cellspacing="0" rules="all" border="1" id="Table1" style="border-collapse: collapse;">
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>
<td colspan="2">
<table border="0">
<tr>
<td>
<span>1</span>
</td>
<td>
<a href="javascript: __doPostBack('GridView1','Page$2')">2</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
So, if using this control you will style it as a normal HTML table element.
Some developers prefer GridView over other data
controls because they enable easier development and less coding,
but they loose some control over their code and rendering. To have a better control over your code, DataList, Repeater and ListView controls are better
choices. They are very similar in the
terms of rendering. They do not render to any control by default (except DataList) they
are rather just placeholders for HTML structure.
Let's have a look at very simple example of creating unordered list with repeater.
<asp:Repeater ID="rptSampleRepeater" runat="server">
<HeaderTemplate>
<ul class="someClassName">
</HeaderTemplate>
<ItemTemplate>
<li><%#Eval("Value") %></li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
Repeater has five templates that are used to create a HTML structure.
HeaderTemplate and FooterTemplate are used to render opening and
closing parent tag and occurs before and after the ItemTemplate. In our
small example it is <UL>. ItemTemplate is used to render data,
once per data row. In the example above, it's <LI>. The code
inside the list item will render the data pulled from the server. The
result is unordered list as you would create it in HTML. This way both
designers and developer can have a full control over their code.
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
There is also AlternatingItemTemplate that can be used to style
every second row differently. The last template is SepartorTemplate
that renders its content between rows, i.e. between each ItemTemplate.
ListView control behaves in similar way and have many more features (like associated pager control),
but styling would be very similar to Repeater control.
DataList control differs from Repeater and ListView. You also format HTML through use of different templates but the key difference is in RepeatColumns property. If set to a value greater than one, records will be repeated horizontally. This feature might be useful in some cases, for example on e-commerce sites.
Conclusion
Developers and designers have many choices to render the data. Which one will be used depends on specific cases, but the important thing is to know how each of this controls behave and how to style their outputs. There is one more important thing to keep in mind. Data controls have many properties (attributes) that will affect styling. Normally you wouldn't use any of them but rather define styles through CSS. You can use one property, though - CssClass. That is equivalent to HMTL class attribute.
For more information on data controls please take a look at following articles:
Janko is a UI designer, software engineer, blogger, speaker and artist. You can read more about him and warp speed blog here.