Book Image

ASP.NET jQuery Cookbook - Second Edition

By : Sonal Aneel Allana
Book Image

ASP.NET jQuery Cookbook - Second Edition

By: Sonal Aneel Allana

Overview of this book

jQuery is a lightweight JavaScript library that has changed the landscape of client scripting in web applications. Developed by John Resig in 2006, it has taken the web by storm because of its cross-browser compatibility and the ability to get more done with less code. It has gained popularity with ASP.NET developers and is now distributed with Visual Studio and the NuGet package manager. ASP.NET jQuery Cookbook explores the wide range of utilities that the jQuery library provides. It teaches you the nitty-gritty of plugging in these features in ASP.NET web applications. It covers every aspect of interfacing the library, right from downloading and including jQuery on web pages to selecting controls, handling events, and creating animations. This book also walks you through DOM traversal and manipulation in ASP.NET and then through visual effects and graphics in ASP.NET sites. It explores advanced features such as posting AJAX requests and writing plugins. It will provide you with all the information you need to use this library confidently with ASP.NET.
Table of Contents (15 chapters)
ASP.NET jQuery Cookbook Second Edition
About the Author
About the Reviewer

Hello World in a web project using jQuery

Until now, all recipes have demonstrated different ways to add the jQuery library to web pages. This is the first step in making the page jQuery-ready. In this recipe, let's move on to the next step: writing the jQuery code inside a script block to manipulate controls in a web form. We will display a simple Hello World message on the web page by manipulating a Label control on a web form.

Getting ready

  1. Create a Web Application project by going to File | New | Project | ASP.NET Web Application. Select the Empty template. Name the project HelloWorld (or any other suitable name).

  2. Add a new Web Form to the project.

  3. Add the jQuery library files to the Scripts folder.

  4. Add a reference to the jQuery library on the web form using any method of your choice.

  5. Open the web form in the Design mode and drag and drop a Label control by navigating to the Toolbox | Standard controls. Change the properties of the Label control as follows:

    <asp:Label ID="lblMessage" runat="server" Text=""></asp:Label>

How to do it…

If a jQuery reference is added to the <head> element, then include the following <script> block in the <head> element. Otherwise, include the <form> element, preferably before the <form> tag is closed:

<script type="text/javascript">
   $(document).ready(function () {
      var fontStyle = "Arial";
      var fontSize = 28;
      $("#<%=lblMessage.ClientID%>").css("font-family", fontStyle);
      $("#<%=lblMessage.ClientID%>").css("font-size", fontSize);
      $("#<%=lblMessage.ClientID%>").text("Hello World!!");

How it works…

Following are the steps to print Hello World!! in a web project using jQuery:

  1. In the preceding jQuery code, the $ symbol is used to instantiate the jQuery object.

  2. The .ready() function is triggered when the DOM is ready. It is commonly used to execute the required jQuery code on the page.

  3. The Label control can be accessed from the jQuery code using ASP.NET's ClientID property and jQuery's #identifier selector.

  4. Using the .css() property of the jQuery object, the font style, size, and text of the Label control are manipulated so that the following output is displayed on running the application:

See also

The Hello World in ASP.NET MVC using jQuery recipe