Hello World in ASP.NET MVC using jQuery_ASP.NET jQuery Cookbook（Second Edition）-QQ阅读女频短篇网

上QQ阅读APP看书，第一时间看更新

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:
```
    <p id="pMessage"> 
    </p>
```

In the <head> element, include the following jQuery code:

<script type="text/javascript">
    $(document).ready(function () {
        var fontStyle = "Arial";
        var fontSize = 28;
        $("#pMessage").css("font-family", fontStyle);
        $("#pMessage").css("font-size", fontSize);
        $("#pMessage").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 the jQuery 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 HTML <p> element with id = "pMessage", which is used to display the Hello World message, can be accessed using its ID with jQuery's #identifier selector—that is, using the #pMessage selector.
Using the .css() property of the jQuery object, the font style, size, and text of the <p> element are manipulated so that the following output is displayed on running the application:

Hello World in ASP.NET MVC using jQuery

Getting ready

How to do it…

How it works…

See also