- ASP.NET jQuery Cookbook（Second Edition）
- Sonal Aneel Allana
- 344字
- 2021-07-16 13:12:09
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
推薦閱讀
- LabVIEW2018中文版 虛擬儀器程序設計自學手冊
- Java完全自學教程
- 編程卓越之道（卷3）：軟件工程化
- Android Development with Kotlin
- Raspberry Pi for Secret Agents（Third Edition）
- Java虛擬機字節碼：從入門到實戰
- Building Mobile Applications Using Kendo UI Mobile and ASP.NET Web API
- CouchDB and PHP Web Development Beginner’s Guide
- C#應用程序設計教程
- Unity 2D Game Development Cookbook
- Yii Project Blueprints
- Mastering Unity 2D Game Development（Second Edition）
- Swift 4從零到精通iOS開發
- Building Serverless Architectures
- Django 3.0應用開發詳解