Java Script with Dot Net
Published January 11, 2011 | Categories: Web Development
There are many times when you want to execute some javascript within your Dot Net page to give it that smooth client side processing without reloading the page. One example would be when you have a contact or registration page that needs to be edited before emailing or saving the page data. You could accomplish this with some Dot Net validation controls, or by registering your javascript within your code behind.
If you already have some javascript that edits input fields and displays a popup box or does whatever it is you need it to do and you want to leverage the existing work then you can also execute it from your Dot Net control. You still want to edit the fields in your code behind in case the user has javascript turned off. Yes there are still people that do this. You can catch the click event with a custom validator in the code behind for this purpose and use an OnClientClick to execute the javascript edits. Hopefully the javascript edit are executed the vast majority of the time and the code behind edits will have no impact.
Look at the example below. Lets say you have some javascript called 'validate' that validates the fields on the form. This is the work that you want to leverage in your new project. Placing this within your <head> tag would appear as so:
function validate(theForm) {
javascript edits here
on err return false
else return true
}
Now let's look at your submit button. In this example it is an image button.
<asp:ImageButton imageUrl="/images/buttons/submit.gif" AlternateText="Submit" OnClientClick="return validate(registrationForm)" width="92" height="24" tabindex="12" runat="server" > </asp:ImageButton>
Notice the OnClientClickattribute. This will execute your javascript validation. Your javascript validation should return a true or false depending on whether validation passed. The return is captured in the OnClientClick attribute and if it is false, control will not be passed to the code behind. This will keep the Click event from firing and editing your data from within your code behind.
Now let's suppose javascript is turned off. We need to edit the page from the code behind. So lets set up a custom validator below the image button as so:
<asp:customvalidator id="registerPage" onServerValidate="CheckPage" ErrorMessage="" Runat="server" ValidationGroup="Page"></asp:customvalidator>
We will capture the Click event in our code behind with the following code: Execute the custom validator, that will execute your code behind validation.
Sub btnSubmit_Click(ByVal sender AsObject, ByVal e AsSystem.Web.UI.ImageClickEventArgs) Handles btnSubmit.Click
registerPage.Validate()
If (Page.IsValid) Then
ProcessForm()
End if
End Sub
Below is the validation routine referenced by the custom validator.
these should be the same edits as your javascript
End Sub
By using the OnClientClick attribute to execute the javascript edits, we can then capture the Click event when javascript is turned off and execute the code behind edits. It should not matter if the javascript passes validation and then the code behind validation is executed because these edits should also pass validation.
That is one way to execute client side validation and leverage some pre-existing javascript code.
Happy coding!
Recent Posts
