- 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
推薦閱讀
- UI圖標創意設計
- 精通JavaScript+jQuery：100%動態網頁設計密碼
- AngularJS Testing Cookbook
- MATLAB應用與實驗教程
- jQuery從入門到精通 （軟件開發視頻大講堂）
- Microsoft Dynamics GP 2013 Reporting, Second Edition
- Mastering Rust
- Python編程：從入門到實踐
- Java EE 8 Application Development
- Selenium Testing Tools Cookbook（Second Edition）
- Learning Material Design
- 微課學人工智能Python編程
- 平面設計經典案例教程：CorelDRAW X6
- INSTANT JQuery Flot Visual Data Analysis
- Mapping with ArcGIS Pro