To
access jQuery library and start work with it we need to include the jquery-[version].js file
in the pages that will use. There are two mechanisms to do. First one is, just
add a reference to jQuery file in page with a <script>
tag and the other way is, include it in
what is called a bundle.
Adding
reference with a script tag is simple
process. We just need to add below <script>
tag to the <head> of
our page:
<script
src="~/Scripts/jquery-1.9.1.min.js"></script>
On
the other hand, the bundles require some more work. Bundling is a feature in
ASP.NET which allows us to combine multiple files into single file. Another
benefit is the automatic minification. JavaScript and CSS files should be minified
to reduce the size of resulting file. Single minified file to download means
there is only one optimized HTTP request
for the file to load. This reduces the page loading time. We normally create bundles
for JavaScript, CSS, and images.
To
create a bundle, we use the ScriptBundle
and StyleBundle
classes. These have a method called Include() that
enables us to add files to the bundle. Bundles are added in BundleConfig class
which is located in the App_Start/BundleConfig.cs file. It has a static method called RegisterBundles() that
accepts a parameter of type BundleCollection
for which we add our bundles.
For
example, BundleConfig class includes the below bundle for jQuery library:
@Scripts.Render("~/bundles/jqueryval")
@Styles.Render("~/Content/css")
Once
we have the jQuery library and all our libraries are loaded in the page, we will
be able to start working with it.
We
can use either the jQuery namespace or alias $
(this is a valid JavaScript name). To
work with jQuery, the page must be in state where all HTML elements have been
loaded. We know when this state reached by handling the ready event with
one of the below equivalent syntaxes:
$(document).ready(handler)
Or
$().ready(handler)
Or
$(handler)
Following
is the example of event handler:
$(document).ready(function()
{
//
We can add JavaScript code here
});
Or
$(function()
{
//
We can add JavaScript code here
});
jQuery Selectors
To work with HTML elements, we need to locate them. These are the
target elements. To search the target elements we use selector. Selector is a search string similarly we use
in CSS 3 style rules. Most commonly used selectors are listed below:
For
example, we want to find that what the user has entered in a form field with id
MyName then display it in browser as alert window. We would use following
code to do it:
var
myName = $("#MyName").val();
alert(myName);
What
happen in above example, jQuery is using the DOM to find an HTML element with id MyName. If gets it
then it will use the method val() to read value of the element. Please Note that we have not
specified whether it is a text box or a drop down list or any other type of
form field. jQuery will attempt to find the element using given selector. If
jQuery finds it then it will retrieve its value based on which type of element.
If it will not find any element with the id then the method val()
will not be executed and the value in variable
myName will be undefined. The keyword undefined
means the variable myName hasn’t been
assigned any value.
Event Handling with jQuery
Event
Handling using jQuery is very simple. We only need to know the name of the
event we want to handle and the HTML element for that we want the event to be
handled.
For
example, imagine that we have a page that has a field for the user to enter an
email address and there is a button for the user to submit address entered. We
want to verify that user actually entered something in the field or not. Doing
this verification on client side is not only faster but also saves round trips
to server, just to know whether the information is missing. Also, in case the
user did not enter anything then we can let the user know about it instantly. The
code below accomplishes all:
First
part of the code is very simple, we create an HTML as a text box to enter the email
address and a submit button to submit the page. When the HTML elements are loaded
then we tell jQuery to find the submit button using the selector of element
with id “submitButton”.
If it is found then we use the on() method to attach an anonymous function to the click event. Event
handler function has one parameter which is the event object. When we run the
application and click button on the form then click event handler function will
be executed. The function will get the value from email text box. If text box
will be empty then the statement e.preventDefault()
will prevent the form from being submitted
to server.
No comments:
Post a Comment