Hello World in ASP.NET MVC using jQuery
This recipe demonstrates how to write a simple jQuery code to display Hello World in the ASP.NET MVC project.
Getting ready
Use the MyMvcApplication project created in the Bundling jQuery in ASP.NET MVC recipe.
How to do it…
Following are the steps to write simple jQuery code:
- Open the Index view, and add the following markup to the
<body>element:<div id="divMessage"> </div> - In the
<head>element, include the following jQuery code:<script type="text/javascript"> $(document).ready(function () { var fontStyle = "Arial"; var fontSize = 28; $("#divMessage").css("font-family", fontStyle); $("#divMessage").css("font-size", fontSize); $("#divMessage").text("Hello World!!"); }); </script> - Right-click on the Index view, and select View in Browser (Internet Explorer).
How it works…
Following are the steps to print Hello World in ASP.NET MVC using jQuery:
- 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 HTML
<div>element withid = "divMessage",which is used to display the Hello World message, can be accessed using its ID with jQuery's#identifierselector—that is, using the#divMessageselector. - Using the
.css()property of thejQueryobject, the font style, size, and text of the<div>element are manipulated so that the following output is displayed on running the application:
See also
The Bundling jQuery in ASP.NET MVC recipe
