Sure, no problem:
The following code is a section of my primary form: I find it better to put all of my form elements in a list, this way I can align or place them in precise position as if they were in a table:
<fieldset id="contact">
<legend class="category">Contact Information</legend>
<ul>
<li>
<p runat="server" id="dupEmailError">
<i>Email Address Already Registered:</i>
Forget your login? Recover your username or reset password
</p>
<p class="default" runat="server" id="emailError">
<i>Invalid Email Address:</i>
Max lenght 20, cannot start with dash or underscore:
</p>
<asp:TextBox ID="txtEmail" runat="server" TabIndex="7" MaxLength="50"></asp:TextBox>
<label runat="server" id="lblEmail" for="txtEmail">* Email</label>
</li>
<li>
<p class="default" runat="server" id="emailConfirmError">
<i>Please Confirm Email:</i>
Both email address entered must match.
</p>
<asp:TextBox ID="txtConfirmEmail" runat="server" TabIndex="8" MaxLength="50"></asp:TextBox>
<label runat="server" id="lblConfirmEmail" for="txtConfirmEmail">* Confirm Email</label>
</li>
</ul>
</fieldset>
Originally the idea was, when the page loads, the error is hidden, not by CSS but on the Server, because I did not have JQuery at the time: All I did was:
[highlight=“C#”]
protected void Page_Load(object sender, EventArgs e)
{
//hide all error message on page load
}
If you look at the code: I am using HTML tags but adding the Server Attribute which allows me to hide the error messages:
Runat=“Server”
Why did I do this? Because ASP.NET labels are a bunch of <span> tags.
[highlight="C#"]
<p runat="server" id="dupEmailError">
<i>Email Address Already Registered:</i>
Forget your login? Recover your username or reset password
</p>
<p class="default" runat="server" id="emailError">
<i>Invalid Email Address:</i>
Max lenght 20, cannot start with dash or underscore:
</p>
<p class="default" runat="server" id="emailConfirmError">
<i>Please Confirm Email:</i>
Both email address entered must match.
</p>
Something like this:
[highlight=“C#”]
<asp:Label ID=“Label1” runat=“server” Text=“Whats your name”></asp:Label>
[I][B]
Will look like this after it is rendered by the server:[/B][/I]
<span>What is your name</span>
I decided to use paragraph tags and control them from the server by adding the server attribute and an ID.
Another thing I did for the sake of [I][B]performance[/B][/I] is to remove the ID of any tags that is not used immediately by the server:
[B][I]Something like this:[/I][/B]
[highlight="C#"]
<asp:Label ID="lblThisIsMyId" runat="server" Text="Whats your name"></asp:Label>
Will look like this:
<span>Whats your name"></span>
This may not same like much but it reduces ViewState and provides a more cleaner HTML. Especially for pages where there are hundreds of tags with ID.
Now how does this affect JQuery? It doesn’t, however it does affect my approach and design.
The problems I had is that when ASP.NET is using a specific tag, then I have to work around it so that JQuery has access to the same tags.
Example: I can no-longer hide the ID’s. But the biggest hurdle is with the error messages. If the server is hiding the error messages on Load, then JQuery cannot access those tags. So instead of hiding the error messages on the server,
I simply had to add the CSS dynamically by the server. But to do this I still need an ID on the p tags because that’s the only way the server can interact with them (I do not know another way).
So the code looks like this:
[highlight=“C#”]
userNameError.Attributes[“class”] = (Validated.IsValidUsername ? “default” : “error”);
txtUserName.CssClass = (Validated.IsValidUsername ? “” : “alert”);
lblUserName.ID = (Validated.IsValidUsername ? “” : “lblUserName”);
[I]
This line removes the ID if the tag is not in use of if there are no error messages:[/I]
[highlight="C#"]
lblUserName.ID = (Validated.IsValidUsername ? "" : "lblUserName");
The result of all of this is that I have a cleaner more usable HTML.
I am not saying ASP.NET does not work with JQuery, I am saying ASP.NET is not like PHP where tags can love each other side by side. ASP.NET needs an ID for everything and if those ID are doing other things, you may need to add JQuery directly to the tags or add a class.
Lastly, the plan to switch to ASP.NET MVC which is more cleaner, I am a purist I hate a page fill with bunch of span tags. I also cannot stand anything dynamic generated (html). With MVC you write your own HTML, so nothing is really generated. You have control of what tags goes where.
Thanks again!