- 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
推薦閱讀
- JavaScript全程指南
- Flutter開發實戰詳解
- 密碼學原理與Java實現
- 摩登創客：與智能手機和平板電腦共舞
- 簡單高效LATEX
- Learning AWS Lumberyard Game Development
- Servlet/JSP深入詳解
- Mastering Ubuntu Server
- Blockly創意趣味編程
- Mastering Apache Maven 3
- Hands-On Natural Language Processing with Python
- 深入淺出React和Redux
- 學習OpenCV 4：基于Python的算法實戰
- OpenCV 4計算機視覺項目實戰（原書第2版）
- Python圖形化編程（微課版）