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
- 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
Labelcontrol 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!!");
});
</script>How it works…
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 thejQueryobject. - The
.ready()function is triggered when the DOM is ready. It is commonly used to execute the required jQuery code on the page. - The
Labelcontrol can be accessed from the jQuery code using ASP.NET'sClientIDproperty and jQuery's#identifierselector. - Using the
.css()property of thejQueryobject, the font style, size, and text of theLabelcontrol 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
