Real control over markup

When you're working with data-bound controls and you want control over the generated markup, you end up using templated data-bound controls such as the FormView or ListView controls, or the TemplateField of a GridView control.

But even when you're using these templated controls, sometimes you don't have real control over the generated markup. For example, if you have an Image control inside the ItemTemplate like the following code:

 <asp:Image runat="server"
  ID="ThumbnailImage"
  ImageUrl='<%# Eval("FileName", "images/{0}")>%'>
</asp:Image>

The generated markup will contain an additional style element that you haven't defined in your Web server control, like the following:

 <img id="PhotoListView_ctrl0_ThumbnailImage" 
  src="images/image1.jpg" style="border-width:0px;" />

This happens because a Web control is not necessarily completely customizable. If you really need complete control over your final generated markup, i.e, you just want to show what you have defined, you can use HTML server controls. An HTML server control is an HTML element with a runat="server" attribute. In the last example, you could replace the Image control, with the <img> HTML element like the following:

 <img runat="server"
  id="ThumbnailImage"
  src='<%# Eval("FileName", "images/{0}")>%' />

The end result is the same, however behind-the-scenes the generated markup does not contain anything extra, only what you have defined, as the following:

 <img id="PhotoListView_ctrl0_ThumbnailImage" 
  src="images/image1.jpg" />