In this tutorial we will learn how to use JQuery with master pages in ASP.NET 4.0. Typically when you are working with an ASP.NET page, referencing external JavaScript libraries is easy. However, things get a little tricky when you begin working with master pages. Master pages do some weird things behind the scenes, that you will need to understand in order to be able to use JQuery on your pages effectively.

To begin, create a new ASP.NET Empty Web Site in Visual Studio. First, we will need to add a reference to JQuery. If you don’t have JQuery you can download it at
http://jquery.com/. Once you have it, you are ready to add it to your project. To do this:

1. Right click the project in your solution explorer.
2. Select ‘Add Existing Item…’.
3. Navigate to your JQuery file and select it.
4. Click add.

Now that we have the library local to our project, we will create a new master page to reference this from. To add a new master page:

1. Right click the project in your solution explorer.
2. Select ‘Add New Item…’.
3. Select a master page and name it ‘MasterPage.master’.
4. Click add.

Typically, when a reference or script is added to an ASP.NET page it is added in the head section. We will be adding our JQuery reference here, however we must be careful about our positioning. The master page also generated two ContentPlaceHolder sections. One in the head section appropriately named ‘head’, and the other in the body section named ‘ContentPlaceHolder1′. When we write scripts on our other web pages that will be using JQuery, we must ensure that the JQuery reference comes before the script using it. In this case, we will want to drag and drop the JQuery file into our head section, right about the ‘head’ content place holder. My new head section looks like the following:

<head runat="server">
    <title></title>
    <!-- We add all of our external references for our pages here -->
    <script src="jquery-1.6.js" type="text/javascript"></script>

    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>

Next, we need to add a new ASP.NET page to our project using our master page. To do this:

1. Right click the project in your solution explorer.
2. Select ‘Add New Item…’.
3. Select a new ASP.NET page and name it ‘Default.aspx’.
4. Click the ‘Select master page’ check box.
5. Click add.
6. Select ‘MasterPage.master’ and click OK.

Cool, we now have a new page using our master page. This page contains two Content sections that correspond to the ContentPlaceHolder sections of our master page. In this case, we will add some test code to our ‘head’ content section which will use some JQuery. It is important to note that this will work here only because we have configured our master page to have a reference to JQuery before our scripts on this page are read.

To this page, go ahead and add a new button with a Text property of ‘Click Me’, and an OnClientClick property of ‘ButtonClick()’. Next, add the following code to the ‘head’ content section:

<script type="text/javascript">
    function ButtonClick() {
        alert($('#ContentPlaceHolder1_Button1').val());
    }
</script>

This is a simple script that will grab our button by its ID and display the value it holds. It is important to note that Microsoft’s naming standards come into play here when you place controls inside of content place holders. If you were to look at the generated HTML of the page, you would notice that our ‘Button1′ control has an ID of ‘ContentPlaceHolder1_Button1′. This is because the content place holder it is in is added to the beginning of the control, separated by an underscore.

To test this out, load up the web site and click the button. You should see an alert box that displays the message ‘Click Me’ which corresponds to the text in our button. This demonstrates how to set up your master pages to work easily with JQuery. I hope that this helps, happy coding!

Reasons why you must trust ASPHostPortal.com

Every provider will tell you how they treat their support, uptime, expertise, guarantees, etc., are. Take a close look. What they’re really offering you is nothing close to what ASPHostPortal does. You will be treated with respect and provided the courtesy and service you would expect from a world-class web hosting business.


You’ll have highly trained, skilled professional technical support people ready, willing, and wanting to help you 24 hours a day. Your web hosting account servers are monitored from three monitoring points, with two alert points, every minute, 24 hours a day, 7 days a week, 365 days a year. The followings are the list of other added- benefits you can find when hosting with us:

- DELL Hardware
Dell hardware is engineered to keep critical enterprise applications running around the clock with clustered solutions fully tested and certified by Dell and other leading operating system and application providers.
- Recovery Systems
Recovery becomes easy and seamless with our fully managed backup services. We monitor your server to ensure your data is properly backed up and recoverable so when the time comes, you can easily repair or recover your data.
- Control Panel
We provide one of the most comprehensive customer control panels available. Providing maximum control and ease of use, our Control Panel serves as the central management point for your ASPHostPortal account. You’ll use a flexible, powerful hosting control panel that will give you direct control over your web hosting account. Our control panel and systems configuration is fully automated and this means your settings are configured automatically and instantly.
- Excellent Expertise in Technology
The reason we can provide you with a great amount of power, flexibility, and simplicity at such a discounted price is due to incredible efficiencies within our business. We have not just been providing hosting for many clients for years, we have also been researching, developing, and innovating every aspect of our operations, systems, procedures, strategy, management, and teams. Our operations are based on a continual improvement program where we review thousands of systems, operational and management metrics in real-time, to fine-tune every aspect of our operation and activities. We continually train and retrain all people in our teams. We provide all people in our teams with the time, space, and inspiration to research, understand, and explore the Internet in search of greater knowledge. We do this while providing you with the best hosting services for the lowest possible price.
- Data Center
ASPHostPortal modular Tier-3 data center was specifically designed to be a world-class web hosting facility totally dedicated to uncompromised performance and security
- Monitoring Services
From the moment your server is connected to our network it is monitored for connectivity, disk, memory and CPU utilization – as well as hardware failures. Our engineers are alerted to potential issues before they become critical.
- Network
ASPHostPortal has architected its network like no other hosting company. Every facet of our network infrastructure scales to gigabit speeds with no single point of failure.
- Security
Network security and the security of your server are ASPHostPortal’s top priorities. Our security team is constantly monitoring the entire network for unusual or suspicious behavior so that when it is detected we can address the issue before our network or your server is affected.
- Support Services
Engineers staff our data center 24 hours a day, 7 days a week, 365 days a year to manage the network infrastructure and oversee top-of-the-line servers that host our clients’ critical sites and services.