I need some help figuring out the best way to go about adding jquery code to my aspx file. We have a big front end solution in VS2008 using a master page. In the master page we have a ContentPlaceHolder where you can add stuff to the <head>, but the location of the place holder is above the code which declares the local path to jquery. Would I need to move the ContentPlaceHolder to a location below the jquery? If so, couldn't doing that cause some potential issues? I tried adding an additional ContentPlaceHolder under the script declaration tags, but that caused ViewState errors (I think having to do with code behind I added for my page to allow CSS3 for IE).
Here is the relevant code from the master file:
<%# Master Language="C#" AutoEventWireup="True" CodeBehind="Class.Master.cs" Inherits="Company.Project.Masters.Class" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title><%# Page.Title %></title>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<asp:ContentPlaceHolder ID="cphHead" runat="server" >
</asp:ContentPlaceHolder>
<link href="~/inc/style.css" rel="stylesheet" type="text/css" />
<script src='<%# ResolveUrl("~/inc/utils.js") %>' type="text/javascript"></script>
<script type="text/javascript">
//some js stuff here
<style type="text/css">
// some css stuff here
</style>
<script language="javascript" type="text/javascript" src='local/path/to/jquery' ></script>
<script language="javascript" type="text/javascript" src='local/path/to/jquery-ui-1.10.3.custom.min.js") %>'></script>
<script type="text/javascript">
$(document).ready(function() {
//some jquery stuff here
})
});
</script>
</head>
Below is the code I have added to my page's .cs file to allow CSS3 elements to work in IE. This error looks like it is related to the ViewState error
protected void Page_Load(object sender, EventArgs e)
{
HtmlMeta xuac = new HtmlMeta();
xuac.HttpEquiv = "X-UA-Compatible";
xuac.Content = "IE=edge";
Header.Controls.AddAt(0, xuac);
}
When I add a new ContentPlaceHolder in the MasterPage I get the error:
Failed to load viewstate. The control tree into which viewstate is
being loaded must match the control tree that was used to save
viewstate during the previous request. For example, when adding
controls dynamically, the controls added during a post-back must match
the type and position of the controls added during the initial
request.
Coming to all your points one by one.
You can have multiple content place holders in master page and you can refer to them in other pages. You should add a contentplaceholder right after jQuery script. And add content to this placeholder from child pages, it should not create any kind of problem.
Please share the view-state error you are getting on adding extra contentplaceholder. You can explore browser console for more information on view state problems.
Related
I would like my default.aspx to use masterpage but have a different body than the rest of my webpages is this possible? Basically I want my default.aspx to have a background image for the entire page but still use the masterpage because I have menu and things I would like to use on that page as well. Is this possible?
You can define the styles and everything for a particular page in Content Page and not Master Page. In your case, if you want a separate styles and background for default.aspx, you can define those styles in default.aspx page.
inside of default.aspx do
<style>
BODY { background-image: url(....image here ....);}
</style>
I know it is not the nicest pattern but... cmon, masterpages
You can inline it on default.aspx
<style>
body{
/*Background stuff here */
}
</style>
or have an if on your master page
#if(currentpage == "home")
<div id="background">
</div>
#endif
or
#if(currentpage == "home")
<body style="background-stuff-here">
#else
<body>
#endif
Put these lines in you master page head section
<head>
<link type="text/css" rel="stylesheet" href="/styles/common1.css" />
<script type="text/javascript" src="/scripts/common1.js"></script>
<asp:contentplaceholder id="ExtraStylesAndScripts" runat="server" />
</head>
And these lines to you default page
<asp:content contentplaceholderid="ExtraStylesAndScripts" runat="server">
<link type="text/css" rel="stylesheet" href="/styles/extra1.css" />
<link type="text/css" rel="stylesheet" href="/styles/extra2.css" />
<script type="text/javascript" src="/scripts/extra1.js"></script>
<script type="text/javascript" src="/scripts/extra2.js"></script>
</asp:content>
Now you are free to set different page style for different content pages.
You can change background or other appearance in "styles/extra1.css" files.
A very simple solution would be a MultiView and pass in something like an enum object telling the master page what View to display. If you in the future need to add a different design for another page you can just add a View.
I have created a master page, which has the following css:
body { background-image:url(images/back.jpg); }
This image is the one I want to appear on my Index page. When a user clicks the "Next" button, I want to change the image to be a different one.
How can I do this?
you can over-ride the css of master page with new css on other page. The back-ground image for body loaded first will come on back ground the second one will be ignored.
You can use masterpage placeholders to the header
<head>
<link rel="stylesheet" type="text/css" href="master.css">
<asp:contentplaceholder id="Header" runat="server" />
</head>
Then add this code to your NewPage.aspx
<% # Page Language="VB" MasterPageFile="~/Master.master" Title="Content Page 1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Header" Runat="Server">
<link rel="stylesheet" type="text/css" href="newpage.css" />
</asp:Content>
Now you can override the "CSS body" inside newpage.css
If you are loading Another page without page refresh then this will work:
HTML:
<button class="next">Next</button>
jQuery:
$(function() {
$('.next').click(function() {
$(body).css('background-image', 'url(images/back2.jpg)');
});
}):
And if navigating from one page to 2nd gets the page refreshed then
you can simply specify internal css.
I test jQuery and ASP.NET with Webcontrols and in my test load the Side everytime new if I click on the Button. The jQuery Code add a Css Class to a Label.
My aspx:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Main.aspx.cs" Inherits="jQueryAnwendung.Main" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery Anwendung</title>
<script src="Scripte/jquery-1.8.0.min.js" type="text/javascript"></script>
<style type="text/css">
.CssKlasse
{
background:red;
font-size:40px;
}
</style>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#<%= b1.ClientID%>").click(function (event) {
$("#<%= bild1.ClientID %>").slideToggle('slow');
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="b1" runat="server" text="Bild verkleinern/vergrößern"/>
<asp:Image ID="bild1" runat="server" ImageUrl="~/Theme/net.png" Width="50" Height="50" />
</div>
</form>
</body>
</html>
What can I do?
tarasov
inside your handler, prevent the button from behaving normally:
$("#<%= b1.ClientID%>").click(function (event) {
event.preventDefault(); //prevent the control to act in its default way
$("#<%= bild1.ClientID %>").slideToggle('slow');
});
Asp button causes Post back when you click it - page reloads and your script is not executed, you can use HTML button instead or try to disable postback on this button.
if you using asp controls you have 2 ways to handle it
First is change "#b1 and "#l1" to "<%= #b1.ClientID%>" and "<%= #l1.ClientID %>" in your jQuery function
Second is to add attribute ClientIDMode="Static" to your asp:Button and asp:Label
The generated id is more verbose; open your browser and click View source. You will notice it. Copy and paste the ID into your jQuery selector.
Another way is to call b1.clientID inside your .aspx: $("<%= b1.ClientID %>"), which will output the generated clientID at runtime.
Since ASP.NET 4, StaticMode allows you to have complete control over the generated ID. For more information, check it out: http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientid.aspx
I have a master page which containing few CSS links and java scripts.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script src="Scripts/slides.min.jquery.js" type="text/javascript"></script>
<asp:ContentPlaceHolder id="head" runat="server">
<script language="javascript" type="text/javascript">
$(document).ready(
function () {
$("#pikame").PikaChoose();
});
</script>
</asp:ContentPlaceHolder>
`
I want to use this JavaScript and css style files ,in child ASP form page which has inherited from above master page.
<%# Page Title="" Language="C#" asterPageFile="~/MasterPage.master"AutoEventWireup="true" CodeFile="LeadInformation.aspx.cs" Inherits="LeadInformation" %>
<%# MasterType TypeName="MasterPage" %>
Seems this way not working. Please anyone help me to use masterpage CSS and JavaScript in child-page to me. Tx in advanced.
Put your script outside the ContentPlaceHolder tag. Just put it in the head section normally.
The ContentPlaceHolder tag should be empty in the Master Page - its contents will be replaced by the asp:Content tags in the Pages.
You can check if it's being rendered properly by browsing to the page and right-click -> View Source.
<asp:ContentPlaceHolder id="head" runat="server">
is used to provide script,css that are specific to only that child page
so if you want the scripts/css to be applied to the child pages just place it normally in the master page head section and outside head ContentPlaceHolder in master page..
Hope this helps....
First, child pages are not inherited from master pages. It's the same page.
Second, you don't need MasterType directive to access javascript.
So just consider masterpage and child page to be one as it will be one page when it renders to Browser and javascript runs on browser. So you can place your javascript/CSS anywhere in the head section of master page and access it from any of the child page in a same manner as they are on the same page.
here at home I have different projects and libraries for which I've created an helpfile with Sandcastle.
Now Sandcastle provides also the possibility to create a website.
What I would like to do is to create an aspx-page where I can dynamically create a menu and where the existing helpfile-websites can be sollicited. All in one place.
Is it possible to accomplish this? Maybe some control that I can use to view an entire webpage?
Thank you.
EDIT:
Seems I can't get it to work in an ASP-page for whatever reason, but probably because of the way Sandcastle creates the help-pages.
I've now tried it with a WinForm-application with a webbrowser-control and this approach works, so I guess this will be the way I have to go here.
But I do need to say thanks to Alison (and Leon) for their help regarding this issue.
Their solution works for "normal" html-pages, but (unfortunately) not for the ones I have.
For that reason, I've accepted the answer so others could benefit from it.
Updated
Take a look at jQuery load. You can have a div on your page and load the html from an external page into it. The load function can grab individual pieces of HTML from a different page.
On your main page, add this html:
<div id="myexternalpage"></div>
On the different page, add a div tag with an id around the content you want to grab like:
<div id="myexternalcontent">Test</div>
The add the following to your head tag:
<script type="text/javascript">
$(document).ready(function() {
$('#myexternalpage').load('myexternalpage.html #content');
})
</script>
Notice the addition of the "#content" selector to the end of the load function? This will have jQuery load the different page and return only the content in the div with id="content".
Using jQuery load will let you load the content once the page loads and you won't need to use any iFrames. You can use CSS to handle the height/width and handle any overflow.
I've made a quick and dirty test-page:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Test2.aspx.cs" Inherits="Test2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js " ></script>
<script type="text/javascript">
$(document).ready(function () { $('#myexternalpage').load('WebHelp/KoenHoefman/ExhangeRateWebService/Index.html'); })
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="myexternalpage">
</div>
</form>
</body>
</html>
But I get an error on the script line.
Microsoft JScript runtime error: Object expected
Do I have to replace document with something (probably a stupid question but I'm not used to use javascript)?
Update:
Added Leon's code and now it shows something. But when I want to use the page I really want to show (which is located in a subfolder) I get only the items on the index.html. The page that should be loaded into the IFrame of that page isn't shown. Also the pictures that are located in the same folder are not shown.
Error: HTTP 404
Requested URL:
/html/aea04102-3d0d-cf0d-f5f4-5634f5f06aed.htm