Adding jQuery to an ASP.NET Master Page
Master Pages are used to achieve a uniform look and feel in the website. They maintain a consistent layout across all the content pages. Including jQuery in the Master Page ensures that all the content pages using that Master Page will also have the library included by default. This recipe will demonstrate how this can be done.
Note
A Master Page is an ASP.NET file with the .Master extension. It has a @Master directive at the top of the layout instead of the @Page directive in an ordinary .aspx page.
Getting ready
- Create a new ASP.NET Web Application project using the Empty template by following the steps listed in the Adding jQuery to an empty ASP.NET web project using a script block recipe. Name the project
WebApplicationWithMaster(or any other suitable name). - Follow the steps in the previous recipe to add the jQuery library (the uncompressed and compressed formats) to the Scripts folder.
- In the Solution Explorer tab, right-click on the project, and go to Add | New Item.... This will launch a dialog box, as shown in the following screenshot. From the dialog box, select Web Forms Master Page. Name the Master Page
Default.Master, and click on Add:
- To add a web form—that is, a content page—to the project, right-click on the project in the Solution Explorer tab again, and navigate to Add | New Item.... From the dialog box, this time select Web Form with Master Page, as shown in the following screenshot. Name the web form
Default.aspx, and click on Add:
- This will launch a dialog box so that you can select the Master Page. From the dialog box, as shown in the following screenshot, select the Master Page to be associated with the content page, and click on OK:
How to do it…
To incorporate jQuery in an ASP.NET Master Page, follow these steps:
- Open the
Default.MasterMaster Page in the Source mode, and add a reference to the jQuery library using either the<script>block (refer to the Adding jQuery to an empty ASP.NET web project using a script block recipe) or theScriptManagercontrol (refer to the Adding jQuery to an empty ASP.NET web project using the ScriptManager control recipe), as shown in the following screenshot:
Note
When using the
<script>block, thejQueryreference should preferably be placed in the<head>element.When using the
ScriptManagercontrol, the control should preferably be placed in the<form>element before theContentPlaceHolderin which the jQuery code will be added later to the content pages. TheGlobal.asaxfile should also be updated in order to add the requiredScriptResourceDefinition, as described in the Adding jQuery to an empty ASP.NET web project using the ScriptManager control recipe. - The required jQuery code can now be added to the
ContentPlaceHolder(withID = "ContentPlaceHolder1") in theDefault.aspxweb form.
How it works…
On running the application, when the Default.aspx content page is loaded, the HTML markup from the Master page adds the reference to the jQuery library. This makes the content page jQuery-ready so that any jQuery code can be executed.
To check whether the jQuery reference has been added to the page, run the project and launch Default.aspx in the browser. Right-click on the page in the browser window and select View Source. The jQuery reference will be seen on the page, as shown in the following screenshot:
See also
The Adding jQuery to an empty ASP.NET web project using the ScriptManager control recipe
