官术网_书友最值得收藏!

首頁 >

ASP.NET jQuery Cookbook（Second Edition）

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

  1. 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).
  2. Add a new Web Form to the project.
  3. Add the jQuery library files to the Scripts folder.
  4. Add a reference to the jQuery library on the web form using any method of your choice.
  5. 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 Label control 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:

  1. In the preceding jQuery code, the $ symbol is used to instantiate the jQuery object.
  2. The .ready() function is triggered when the DOM is ready. It is commonly used to execute the required jQuery code on the page.
  3. The Label control can be accessed from the jQuery code using ASP.NET's ClientID property and jQuery's #identifier selector.
  4. Using the .css() property of the jQuery object, the font style, size, and text of the Label control 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

主站蜘蛛池模板： 区。| 界首市| 铅山县| 海晏县| 历史| 高淳县| 怀化市| 合阳县| 库尔勒市| 泉州市| 衡东县| 乌兰县| 洛浦县| 晋宁县| 类乌齐县| 云梦县| 巴里| 油尖旺区| 鄱阳县| 璧山县| 禹州市| 龙井市| 江川县| 江华| 铁岭县| 浠水县| 上犹县| 金川县| 衡阳县| 板桥市| 泗洪县| 崇仁县| 常宁市| 乐安县| 广丰县| 当阳市| 蒲江县| 旌德县| 凤凰县| 南通市| 诏安县|