Menu
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?
762
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!
149
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.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
