How to add jQuery UI code to ASP.NET Web Forms pages?

Question

When you select New > Web Forms in an ASP.NET Web Forms project, you get a page with this code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DuckbilledPlatypus.aspx.cs" 
Inherits="DuckbilledPlatypus" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

    </div>
    </form>
</body>
</html>

Adding jQuery code is no doubt done the same way as is typical (such as, in Razor / Web Pages apps/sites) namely reference the necessary jQuery and jQueryUI *.js and *.css files, and then add the jQuery in a script element.

However, the provided forms/pages ("About" and "Contact") have this sort of code:

<%@ Page Title="About" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" 
CodeFile="About.aspx.cs" Inherits="About" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <h2><%: Title %>.</h2>
    <h3>Your application description page.</h3>
    <p>Use this area to provide additional information.</p>
</asp:Content>

How is jQuery/jQueryUI code added to such? Can the *.js and *.css references, as well as the script section, simply be added within the asp:Content encapsulation?

Humpy · Accepted Answer · 2013-10-28 19:12:01Z

This is how I do mine..

<script src="Scripts/jquery-ui-1.10.3.min.js"></script>
<script src="Plugins/jquery.cookie.js"></script>
<link href="Content/themes/Smoothness/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
<script>
    /**
      *This script creates a cookie that expires every 7 days. If you don't have this cookie
      *then the popup shows. If the cookie isn't expired, the popup doesn't show. 
     **/
    $(document).ready(function () {
        if ($.cookie('modal_shown') == null) {
            $.cookie('modal_shown', 'yes', { expires: 7, path: '/' });
            $('#popup').dialog({
                modal: true,
                buttons: {
                    Ok: function () {
                        $(this).dialog("close");
                    }
                }
            });
        }
    });
</script>
<div id="popup" style="display: none" title="New Release!">
    <span class="ui-icon-alert" style="float: left; margin: 0 7px 50px 0;"></span>
    <p><b>Issues Resolved</b></p>
    <ul>
        <li>New thing 1</li>
        <li>New thing 2</li>
        <li>New thing 3</li>
    </ul>
</div>
<h2><%: Title %>.</h2>
<h3>Your application description page.</h3>
<p>Use this area to provide additional information.</p>

This is the one using the master page.

For the Web Form not using a master page, you will do it like..

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DuckbilledPlatypus.aspx.cs" 
Inherits="DuckbilledPlatypus" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="Scripts/jquery-2.0.2.min.js"></script>
    <script src="Scripts/jquery-ui-1.10.3.min.js"></script>
    <script src="Plugins/jquery.cookie.js"></script>
    <link href="Content/themes/Smoothness/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
    <script>
        /**
          *This script creates a cookie that expires every 7 days. If you don't have this cookie
          *then the popup shows. If the cookie isn't expired, the popup doesn't show. 
         **/
        $(document).ready(function () {
            if ($.cookie('modal_shown') == null) {
                $.cookie('modal_shown', 'yes', { expires: 7, path: '/' });
                $('#popup').dialog({
                    modal: true,
                    buttons: {
                        Ok: function () {
                            $(this).dialog("close");
                        }
                    }
                });
            }
        });
    </script>
    <div id="popup" style="display: none" title="New Release!">
        <span class="ui-icon-alert" style="float: left; margin: 0 7px 50px 0;"></span>
        <p><b>Issues Resolved</b></p>
        <ul>
            <li>New thing 1</li>
            <li>New thing 2</li>
            <li>New thing 3</li>
        </ul>
    </div>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

    </div>
    </form>
</body>
</html>

As you can tell, you would just put it within the tag. I hope this helps!

Is much better put the script at the botton on the page, It's a good practice.

Jason P · Accepted Answer · 2013-10-28 19:03:58Z

1

Your second snippet is using a master page. You could add the script references within the asp:content tags, but it would probably be better/simpler to add the references to the master page instead.

answered Oct 28, 2013 at 19:03

Jason P

27k3 gold badges34 silver badges45 bronze badges

2 Comments

B. Clay Shannon-B. Crow Raven Over a year ago

Even if I'm only using jQuery/jQueryUI on the one page?

Jason P Over a year ago

If you're really only using it on the one page, then you could reference the scripts in the content tags on that page. Be aware that including references to jquery more than once on a page can cause issues, so if you decide later to add it to the master page, it may stop working on this page until you remove the references from this page.

Collectives™ on Stack Overflow

How to add jQuery UI code to ASP.NET Web Forms pages?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related