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.
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).Add a new Web Form to the project.
Add the jQuery library files to the Scripts folder.
Add a reference to the jQuery library on the web form using any method of your choice.
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>
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!!"); }); </script>
Following are the steps to print Hello World!! in a web project using jQuery:
In the preceding jQuery code, the
$
symbol is used to instantiate thejQuery
object.The
.ready()
function is triggered when the DOM is ready. It is commonly used to execute the required jQuery code on the page.The
Label
control can be accessed from the jQuery code using ASP.NET'sClientID
property and jQuery's#identifier
selector.Using the
.css()
property of thejQuery
object, the font style, size, and text of theLabel
control are manipulated so that the following output is displayed on running the application: