The CSS rules for the Forms API, however, were attached directly to the
form element. In other words, you can simply add a
form element to your MWF page:
<form> <h1>Sign-up</h1> <label> <span>Username</span> <input type="text" name="username" /> </label> <input class="primary" type="submit" value="Sign-up"/> </form>
And the MWF Forms API will apply styling directly to this element. This is desired behavior in most cases. However, the ASP.NET Web Forms model, in an effort to simulate a stateful Windows Form, requires wrapping many Server Controls in a
form element like so:
<form runat="server"> <!-- Placing this button outside of the form element causes an exception --> <asp:Button runat="server" ID="btnAddItem" Text="Add Item" OnClick="OnClickAddItem" /> </form>
On top of this, the default Web Forms templates in Visual Studio encourage wrapping the entire page in an all-encompassing
form element by dropping the following into the MasterPage:
<body> <form runat="server"> <!-- Page Contents --> </form> </body>
However, because the MWF CSS expects that only the traditional form elements will be within a
form element on the page, the wrapping
form element causes a number of styling errors.
This is a problem that is not likely to go away because it would require adding an API-breaking change to MWF to merely suit the needs of the (arguably misguided) ASP.NET Web Forms model.
Introducing MWF ASP.NET Web Forms
There are two main solutions to this problem:
- Hack the CSS to fix any styling errors
- Restructure your page to only use the
formelement when necessary
The good news here is that I’ve created a repository that covers both of these solutions. More specifically, the repository includes:
- Override stylesheets to correct the styling errors
- General guidelines for restructuring ASP.NET Web Forms pages
Instructions for installing and applying the styles are listed in the README. Let me know what you think!