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.