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.
Related
I have a a page that belongs to a master page. Inside the page I have 3 controls that are inside of UpdatePanels. On a postback, those three controls lose their style sheets.
I have tried...
Setting the script manager's EnablePartialRendering property to true
Putting the style sheets at the top of the ASPX file
Putting the style sheets in the header tag of the master file
Putting a ContentPlaceHolderID on the main page and master page, with the style sheets on the ContentPlaceHolderID on the page
No matter what I do the controls lose their style sheet on postback. Any idea why?
In the head tag on the master page:
<asp:ContentPlaceHolder ID="HeaderContentPlaceHolder" runat="server"/>
On the page file, at the top:
<asp:Content ID="Content2" ContentPlaceHolderID="HeaderContentPlaceHolder" Runat="Server">
<link rel="stylesheet" href="../../Content/bootstrap-multiselect.css" />
<script type="text/javascript" src="../../Scripts/bootstrap-multiselect.js"></script>
</asp:Content>
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.
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.
To manage the page title on my pages, I have a master page with a ContentPlaceHolder in the header.
<head runat="server">
<asp:ContentPlaceHolder runat="server" ID="headContent">
</asp:ContentPlaceHolder>
</head>
On each of my pages, I add the meta tags and page title as follow:
<asp:content id="Header" contentplaceholderid="headContent" runat="server">
<meta name="keywords" content="keyword1, keyword2" />
<meta name="description" content="page description" />
<%Page.Title = "My page title";%>
</asp:content>
I cannot modify the code on the pages by placing the Page.Title in the OnInit method of the page.
I need access to the page title in the codebehind of the master page, but I always get an empty title when I use Page.Title.
By using <%Page.Title = "My page title";%> you implicitly tell the ASP.NET to execute this embedded code block during the page's render phase.
What does it mean? You won't be able to get this value before the page's render phase. Assuming you're trying to get this value a little bit earlier than during the render. That's why you get the empty string.
The workaround could be in setting your Title property of the <%# Page directive in the beginning of your page e.g.:
<%# Page Title="My Title Goes Here" Language="C#" ... %>
By setting this you'll be able to access the Page.Title property from your master page a little bit earlier than the page's rendering occurs.
Just use
<title>My page title</title>
Can someone tell me how to get the name of the child page being called in a Master page scenario. For example, if I have the following masterpage:
<%# Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>
<!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">
</head>
<body>
<asp:ContentPlaceHolder ID="cphMainContent" runat="server">
</asp:ContentPlaceHolder>
</body>
</html>
And I create a page called Test.aspx which inherits this masterpage, how can I, from the masterpage, know that Test.aspx has been requested (since this masterpage can be inherited by more then 1 aspx page)?
Going with your comments, I see a couple of options:
1) In your login page, on a non-postback, check the Referrer - this will be the page that sent you to the login page (Request.UrlReferrer), store that in session for the postback of their login details, and then send the user back.
2) Use the standard features of ASP.NET to handle login/redirections (which basically use the same system as 1).
This is a similar question to what you're asking, but I would pay attention to the accepted answer, trying to figure out the child page from the master page is probably not a good design idea.
I would notify in the other direction. Add properties to your master page then set them from the content pages.
In your master:
public partial class PortalMaster : System.Web.UI.MasterPage
{
public string PageSection { get; set; }
}
In your .aspx add this directive:
<%# MasterType VirtualPath="PortalMaster.master" %>
Then in your .aspx.cs set the property value like so:
Master.PageSection = "about";
Just use the "Page" member of the masterpage
From the codebehind in the MasterPage, the Page.AppRelativeVirtualPath property will tell you the path.