I’ve been learning a few things–mainly quirks–since I finally got Visual Studio installed on my machine at work. To fill up the lack of Visual Studio, I coded mockups in HTML and started going through my ASP.NET reference book. It’s always interesting when there’s “coincidental timing.” In this case, I had read about the strange way that ASP.NET will rename HTML ids and how this can be frustrating when trying to integrate JavaScript with the page. The next morning, I ran into this very same problem.

The book lists multiple ways JavaScript can be integrated into ASP.NET pages, but as it was more of an overview, it didn’t go into very much detail of integrating external JS files into an ASP.NET page. While StackOverflow solutions suggested using htmlControlServerSideId.ClientID to obtain the client id with which you can access your HTML element by, it was really only viable in .aspx pages because they get compiled into HTML code. In other words, the ASP.NET compiler wouldn’t touch JS files to make the necessary conversions.

I am a bit lucky in my problem, but I expect this issue to be an ongoing one and I’ll run into it later in the future. The basis of my JS method is to validate an uploaded file is of the correct extension type (e.g., “.txt”). I needed access to the input file server control (<asp:FileUpload />) to get the FileName attribute. In plain HTML/jQuery, that’s the val() of the input field.

I used the CustomValidator control (<asp:CustomValidator ClientValidationFunction="validate">) along with a RequiredFieldValidator control (<asp:RequiredFieldValidator>) for this particular input field. The RequiredFieldValidator will ensure that the field is not empty while the CustomValidator will ensure that the file extension is what is expected. There is also a back-end check in case JS is turned off client-side.

The validate() function looked something like:

function validate (oSrc, args) {
	args.IsValid = false;
	if ($('#fileUpload').val()) {
		// Get and check extension
		if (extensionIsValid) {
			args.IsValid = true;
		}
	}
}

The oSrc and args arguments are what ASP.NET provides when it calls validate(). ASP.NET will check the value of args.IsValid to determine if the data is good to be submitted or not.

All of this was working in my original implementation. Then, I got it into my head that I was tired of writing the html, head, script, and link tags, so I moved it all into a master page. This broke my script because ASP.NET started injecting ContentPlaceHolder_ prefixes on my element ids. I knew it was a bad idea to “cheat” and just use the output from view source, so I searched around for something more viable.

As I mentioned above, using the ClientID property wasn’t a viable option. Luckily, since all I needed was the value, the args argument has a Value property containing the text I needed to validate. This way, I bypassed the need to find the ID of the input field I wanted to check for and my code is also a little more general-use (e.g., another field also needed the file extension check).

My final code was something like:

function validate (oSrc, args) {
	args.IsValid = false;
	if (args.Value != null) {
		// Get and check extension
		if (extensionIsValid) {
			args.IsValid = true;
		}
	}
}

Side note: I opted to use != null because JS’s falsey values are a little too comprehensive for my comfort–I’ve made trouble for myself when I forget and 0 is a valid value I want, for example. Although in this case it is a string, I feel more comfortable checking that it’s not null.