Fixing the FormView

The FormView control has a number of issues which prevents it from being accessible by default:

• It is wrapped in a table
• Fields are split through the use of <br /> tags
• Buttons require JavaScript to function
• Input fields do not have a label for them

Fortunately we can address all of those issues, and ensure our FormView is accessible to all users.

Removing the table

Select the FormView, and in the properties pane, set the RenderOuterTable property to False.

Alternatively, if you prefer to work in code view, simply add a RenderOuterTable attribute to the asp:FormView tag and set its property to False:

RenderOuterTable="False"

Removing the <br/> tags

For this, you will want to use source view, and work with the code. Remember that a FormView has 3 different templates - ItemTempate, EditItemTemplate and InsertItemTemplate. You will need to modify each template your FormView will use.

Once in source view, remove the <br /> elements. You should also remove the   tag from between the buttons. If you wish to maintain a similar style, then wrap each section previously separated by a <br/> inside a <div> tag. You can set ids and apply classes to these <div>s and style them using CSS.

Fixing the buttons

By default, a FormView uses ASP.NET LinkButtons to submit data. LinkButtons are rendered in HTML as hyperlinks, but use JavaScript to post the form. Some browsers do not permit JavaScript. The simplest way to fix this error is again to use source view.

Fortunately, Buttons and LinkButtons are pretty much the same in terms of properties and actions, so we can simply change a LinkButton to a Button by removing the word 'Link' from the control's tag. e.g: <asp:LinkButton becomes <asp:Button

The alternative is to remove the LinkButton entirely, and replace it with a standard Button. If we take this approach, we need to set the values of both the CommandName and CausesValidation properties to match those of the LinkButton we have removed. We should also change the button text to match the action it will perform.

Adding a label for the input fields

Each of the input fields in a FormView uses plain text before the TextBox to state what their contents should be. Good practise says we should use a Label, so the text can be formally associated with the TextBox. With the exception of any non-editable fields (which will simply be plain text anyway), add an ASP Label before the input, set the text appropriately, and ensure the AssociatedControlID property is set to that of the TextBox. Each field will now look similar to the one below:

<asp:Label ID="PhoneNumberLabel" runat="server" Text="Phone number" AssociatedControlID="PhoneNumberTextBox"></asp:Label>
<asp:TextBox ID="PhoneNumberTextBox" runat="server" Text='<%# Bind("PhoneNumber") %>' />

---