What's the best way to perform JavaScript validation on an ASP.Net page using Masterpage?
I am doing Javascript validation on an ASP.Net page that is inside the master page. The control IDs change, so I can't use the original control IDs for validation. I looked on the net and got a suggestion to build a dynamic script and add it to the page using RegisterStartupScript. I don't like this solution because it is not supported.
What are some ways I can do JavaScript validation on this page and order the customer IDs?
Another solution just asked me to go ahead and use the final client IDs that show up in the browser. This works and I would prefer it to create the script at runtime. What do you think?
source to share
It is perfectly acceptable to reference the ClientID using inline code (for example, <%%> tags). The above example doesn't really work; you need to access the DOM ...
<script language="javascript" type="text/javascript">
var control = document.getElementById('<%= control.ClientID %>');
</script>
source to share
IMO, copying the final ClientID values ββdisplayed in the browser is causing problems. If you change the ID of the control in your code and forget to change it in your javascript, you may not notice until the validation mysteriously stops working. By creating it dynamically, you will at least benefit from compile-time errors.
When I need to access the client id of a control in javascript, I placed a script block at the top of the page:
<script>
var SomeControl = <%= Control1.ClientID %>;
var AnotherControl = <%= Control2.ClientID %>;
// etc, etc.
</script>
Unfortunately, it still seems like an ugly hack. Future versions of ASP.NET will presumably address this scenario.
source to share
The best solution depends on your specific situation. The easiest and most convenient way to handle validation in Asp.Net formats is to use the built-in validation elements. They take the ID of the control you want to validate and then provide client-side (javascript) and server-side validation on that control. They handle auto-connect and javascript generation for you.
If they don't work for some reason and you want to write your own validation functions in javascript, you will need to use something similar to Brant's solution above. As Brant mentioned using
<%= Control1.ClientID%>
source to share
Another non-executor technique is using jQuery.
Place a custom css class in every control you want to find. If it's a text box, it might look like this:
< asp:TextBox id="NameTextBox" runat="server" cssClass="NameTextBox" >
This should get to 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 a textbox using: $(".NameTextBox").val()
This is not as efficient, finding controls by their ID is faster, but if the page is not too large, this will work fine.
source to share
There are two things with js code that need to be satisfied: 1. Edit the JS code in a convenient JS editor. (For example VS) 2. Solid reuse of your control copies.
There is a general approach to ensuring these two things: separate
- common code independent of customer IDs
- which depends on specific identifiers.
Shared code can be saved as a .js file or as a web resource if you rarely schedule it. ID dependent code can be organized like in Brant's answer, for example
<script>
var <%=c1.ClientID %> = new SomeJsClass(<%=c1.ClientID %>);
var <%=c2.ClientID %> = document.getElementById('<%=c1.ClientID %>');
</script>
The code that handles these vars can be in a separate .js file.
source to share
There are two ways to use it:
in the main device:
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);
source to share