What's the best way to do javascript validation on ASP.Net page with Masterpage?

Question

I am implementing Javascript Validation on an ASP.Net page that is inside a Master Page. The control IDs are changing, so I can't use the original control IDs for validation. I looked on the Net and got the suggestion to build the script dynamically, and add it to the page using RegisterStartupScript. I don't like that solution because it is not maintainable.

What are the ways I can perform javascript validation on this page and arrange for the client IDs?

Another solution just asked me to go ahead and use the final clientIDs that appear in the browser. That is workable and I'd prefer it to creating the script on runtime. What's your opinion?

Answer 1

IMO, copying the final ClientID values that appear in the browser is trouble waiting to happen. If you change a control ID in your code and forget to change it in your javascript, you might not notice until the validation mysteriously stops working. By building it dynamically you'll at least get the benefit of compile-time errors.

When I need to access a control's client ID in javascript I put a script block at the top of the page thusly:

<script>
    var SomeControl = <%= Control1.ClientID %>;
    var AnotherControl = <%= Control2.ClientID %>;
    // etc, etc.
</script>

Unfortunately it still feels like an ugly hack. Future versions of ASP.NET will supposedly address this scenario.

Answer 2

The best solution depends upon your exact situation. The easiest and most maintainable way to handle validation in Asp.Net forms is using the built-in validation controls. These take the id of the control you want to validate and then provide both client side (javascript) and server side validation on that control. They handle the automatic wiring up and javascript creation for you.

If these don't work for some reason and you want to write your own validation functions in javascript then you would need to use something similar to Brant's solution above. As Brant mentioned using the

<%= Control1.ClientID%>

in your javascript is superior to copying the final rendered control ID from the browser source because the final ID of the control changes based upon a number of factors including the ID of the control and the ID of any parent controls that it may be nested underneath (user controls, grids, repeaters, etc). The .ClientID will output the final rendered ID of the control for each circumstance. This technique may seem like a dirty hack, but it is actually a pretty clean approach for handling the ID rewriting that is built into the framework to prevent naming collisions. This is a standard technique used on many websites.

Answer 3

It's perfectly acceptable to refer the ClientID via inline code (e.g. <% %> tags). The example given won't really work, though; you need to access the DOM...

<script language="javascript" type="text/javascript">
  var control = document.getElementById('<%= control.ClientID %>');
</script>

Answer 4

Here are 2 ways I use:

in the master:
Page.ClientScript.RegisterClientScriptInclude("somescript", ResolveUrl("some.js"));

programmically:
HtmlGenericControl JScript1 = new HtmlGenericControl("script");
JScript1.Attributes.Add("type", "text/javascript");
JScript1.Attributes.Add("src", ResolveUrl("some.js"));
this.Page.Header.Controls.Add(JScript1);

Answer 5

Another method, tho not as performant, is to use JQuery.

Put a custom css class in each control you want to find. If it is a text box, it might look like this:

< asp:TextBox id="NameTextBox" runat="server" cssClass="NameTextBox" >

This should hit the browser like this:

< input id="something_NameTextBox" type="text" class="NameTextBox" >

Then, using JQuery, you can find the control like this:

$(".NameTextBox")

You can get the value of the textbox like this: $(".NameTextBox").val()

This isn't as performant, finding controls by their ID is faster, but if the page isn't too large this will work fine.

Answer 6

There're two things with js code that need to satisfy with: 1. Edit JS code in convinient JS editor. (VS for example) 2. Safe multiple your control instances coexisting.

There's a general approach to provide these two things: separate

• common code, that is independent from client IDs
• code that depends on concrete IDs.

Common code could be stored as .js file or as web-resource if planned to change rarely. IDs dependent code could be arranged as in Brant's answer, like

   <script>
       var <%=c1.ClientID %> = new SomeJsClass(<%=c1.ClientID %>);
       var <%=c2.ClientID %> = document.getElementById('<%=c1.ClientID %>');
   </script>

Code that handles these vars may be located in separate .js file.