Using jQuery to call a fire and forget C# WebMethod

Recently I ran across a need to log some information about a user performing a certain action but I did not want to wait for a success or failure response from the server. I just wanted to fire off the request and forget about it. I will outline some basics on how you can achieve this. The code provided is using jQuery, C# and .NET. First lets write the code for the logging on our server side.

Now for the above to work there are a few conditions that must be met.

1. We have to decorate the function with a [WebMethod(true)] attribute.
2. We have to make it a static function.
3. This function MUST be written within a .aspx file. (cannot be in a .ascx control or a master page and it cannot be within a standalone class.)
4. Here I have added the code to my Default.aspx page code behind.

As for what this function does, well that's quite simple. We are creating a UsersActionLog.DateTime.txt file if none exists and appending to the file if it does. The file has the users session id, browser name and version along with what time this call was made. Now since we don't want to take too many cycles or cause exceptions we wrap it all up in a try catch block but ignore any exceptions that occur. You can of course change this behavior to suit your needs.

Now that we have the code behind we need a way to trigger it. So lets write some jQuery that will call into this method and then forget about the response.

In jquery we will create the path to where the web method resides. This is the full path with protocol host and page path all included. If you notice we are doing a short form if statement that allows his script to work even if we are debugging the application locally (So you will need to replace AppName with the name of your website). The script fires each time the users clicks on an html element with id="someElem".

And that's all it takes!

Validate asp:HiddenField Value with asp.net validators

One of the things I ran across while developing an asp.net 2.0 Website was having to validate a hidden field with a required and a regular expression validator due to a requirement that my client requested.

At first I thought I was missing some property when I started to debug the website. I would get the error

Control 'hiddenField' referenced by the ControlToValidate property of 'hiddenFieldValidator' cannot be validated.

So after some further research I found that Microsoft has decided that you should never need to validate a hidden field, and hence the problem and error above.

Now there are obviously different ways to solve for this but for my purposes the simplest was to create an inherited HiddenField control which would allow the validation.

I got the solution from a stack overflow post here and modified it ever so slightly to get it working for me.

First thing that you will need is to add a new class under the App_Code folder of the Website. If you do not see this folder, don't despair it is quite simple to add. Just right click on the website in solution explorer and go down to Add -> Add ASP.NET Folder -> App_Code. Now you should have the folder and you are ready for the next step. If you already have other classes within that folder it should be simple to add a new class the add the following code with it.

Great! now that you have a new control you need to register it within the website to be able to use it within your asp.net website. Open your web.config file and locate the "pages" section. Then add a new register tag for your control like so

Notice that the namespace is the same as what we declared in our class earlier and that the assembly it is generated in resides within App_Code. Now save and build your website so that the assemblies are ready and next you can start using your new control! You can use it anywhere in your Website with the following markup

Now when I compile and build the website it is able to run the validation against the hidden control and all the behaviors are as expected.

Accessibility Compliance for input type password

Creating a placeholder text using label for a password input

Recently I have been working on some ADA compliance within my job and needed to find a solution that was simple and worked across IE7,8,9 Firefox, Chrome and Safari. So I did some research and came up with the following working solution.

Lets first create some html elements which we will use on the webpage.

Next lets add some css to position the label over the input.

Now we need to add some jquery to get the magic to happen.

Once you have all this in place fire up the site and enjoy an accessibility compliant placeholder for password input.