jQuery Function With HTML Control

This article briefly talks about jQuery function calling from a HTML control.

Step 1

Create a simple website in the 4.0 Framework.

Step 2

In the Default.aspx page add the following scripts:



This script file can be found under the "Scripts" Folder in the project Solution Explorer.

Step 3

Once you have added a reference to the jQuery file, now to bind the "click" event of the HTML Button control.

Note: This is very important to see that this button is not a server control, so it would be worth watching how we are doing a postback using jQuery .

Step 4

The following code binds the click event before the DOM loads or any other process happens:

<script type="text/javascript">

//Section1: Before the page gets load itself jQuery binds the click //event successfully.

$(document).ready(function () {

$('#btnCallFunction').bind('click', function () {

showMessage();

});

});

//Section 2: This is the function while shows the message

function showMessage() {

alert('Called by Button')

}

</script>

In .aspx page

<input type="button" value="Call Function" id="btnCallFunction" />

Step 5

In jQuery, the control is accessed using '#controlid'.. since the $('#btnCallFunction').bind statement binds the click event and tells the compiler that once the button is clicked the specified function/method will be called.

So in a few steps with the help of jQuery, a HTML control can access the code behind methods without writing a single line of code in the .aspx.cs file.

In the next article I will demonstrate DataAccess with the same control using JQueryPOST.

I hope you liked the article. Thanks.