I have two pages, a master page and child page. How can I set javascript on child page?
I want implement textchange function on child page using javascript.
Master Page :
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Site" %>
<!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></title>
<asp:ContentPlaceHolder ID="ContentPlaceHolderHead" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolderMain" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Child page :
<%# Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebForm1" %>
<asp:Content ID="ContentHead" ContentPlaceHolderID="**ContentPlaceHolderHead**" runat="server" >
<script language="javascript" type="text/javascript">
// You can write a javascript code HERE...
</script>
</asp:Content>
<asp:Content ID="ContentMain" ContentPlaceHolderID="ContentPlaceHolderMain" runat="server" >
<!-- Content -->
</asp:Content>
In other way, you can add a javascript file in the code-behind file of child page.
protected void Page_Load(object sender, EventArgs e)
{
HtmlGenericControl somejs = new HtmlGenericControl("script");
somejs.Attributes.Add("type", "text/javascript");
somejs.Attributes.Add("src", ResolveClientUrl("~/Content/js/something.js"));
this.Page.Header.Controls.Add(somejs);
}
Just Add scrip inside a contentplaceholder and make sure you set the master page file of your child page eg: MasterPageFile="~/Mymaster.Master".
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script type="text/javascript" language="javascript">
//Your Script HERE
</script>
//YOUR HTML TAG HERE
</Content>
Regards
You could user ClientScriptManager.RegisterStartupScript in your child page.
Related
This question already has answers here:
Content controls have to be top-level controls in a content page or a nested master page that references a master page
(2 answers)
Closed 6 years ago.
I have added a masterpage to my project, and now when i try to inherit this masterpage to one page, I get this error:
'Content controls have to be top-level controls in a content page or a nested master page that references a master page.'
master_page.Master:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="master_page.master.cs"Inherits="KitchenCounter.master_pages.MasterPage"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:Content runat="server" ContentPlaceHolderID="MainContent">
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</asp:Content>
</head>
<body>
<asp:Content runat="server" ContentPlaceHolderID="MainContent">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
<div class="menuBar">
<ul>
<li class="hvr-bounce-to-bottom active"><a>Home</a></li>
<li class="hvr-bounce-to-bottom">Account</li>
<li class="hvr-bounce-to-bottom">Recipes</li>
<li class="hvr-bounce-to-bottom">Contact</li>
</ul>
</div>
</asp:ContentPlaceHolder>
</asp:Content>
</body>
</html>
Index.aspx:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="KitchenCounter.pages.Index" MasterPageFile="~/kitchencounter/master_pages/master_page.Master"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Kitchen Counter | Home</title>
<link rel="stylesheet" href="kitchencounter/css/main.css" />
</head>
<body>
</body>
</html>
Any ideas where to start with this? Any help is appreciated.
The idea behind a master page with content pages is that your master page contains items that should appear on every (or most) page in your site, with placeholders left where a content page will fill in information specific to that page. With that premise in mind, there are a few things to change:
You put the content controls in the master page; they need to go in the content page, which in your case is Index.aspx.
Additionally, your content page should only contain as its top-level controls tags - you use the ContentPlaceHolderId attribute to match the content inside the tags on your content page to the places where the content belongs on the Master page.
Finally, your markup for your navigation bar needs to be outside of the control on your Master page. The control is just that - a placeholder; nothing goes inside of it.
So try this:
master_page.Master:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="master_page.master.cs"Inherits="KitchenCounter.master_pages.MasterPage"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div class="menuBar">
<ul>
<li class="hvr-bounce-to-bottom active"><a>Home</a></li>
<li class="hvr-bounce-to-bottom">Account</li>
<li class="hvr-bounce-to-bottom">Recipes</li>
<li class="hvr-bounce-to-bottom">Contact</li>
</ul>
</div>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</body>
</html>
Index.aspx:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="KitchenCounter.pages.Index" MasterPageFile="~/kitchencounter/master_pages/master_page.Master"%>
<asp:Content runat="server" ContentPlaceHolderID="head">
<title>Kitchen Counter | Home</title>
<link rel="stylesheet" href="kitchencounter/css/main.css" />
</asp:Content>
<asp:Content runat="server" ContentPlaceHolderID="MainContent">
The text that is specific for your Index page goes here.
</asp:Content>
I have a masterpage in ASP.NET Web forms. I created a ContentPlaceHolder between the form tags on the master page. Then I added a web form (named Page.aspx) to the project with the aforementioned masterpage. I added a Content control to the Page.aspx. Then I wanted to add a GridView in Content tags on Page.aspx. But it gives me the following warning: " ASP.NET runtime error: Only Content controls are allowed directly in a content page that contains Content controls.". How can I fix problem? Sorry for my English.
You probably need to wrap them in these tags:
<ContentTemplate></ContentTemplate>
Master Page
<%# Master Language="C#" AutoEventWireup="true" CodeFile="Master.master.cs"
Inherits="Master_Page" %>
<!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">
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<form id="form1" runat="server">
</form>
</html>
Page.aspx
<%# Page Language="C#" MasterPageFile="~/Master.master" AutoEventWireup="true"
CodeFile="Page.aspx.cs" Inherits="Faculty_Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
<asp:Panel ID="Panel2" runat="server" Height="449px">
<asp:GridView ID="GridView1" runat="server" >
</asp:GridView>
</asp:Panel>
</asp:Content>
Just make a try out of this,It may help
I want to use nested master page so i create the following master page :
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="test.master.cs" Inherits="DocumentFlowUI.test" MasterPageFile="~/MasterPage2.master" %>
<!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></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
<asp:Button ID="Button1" runat="server" Text="Button" />
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
and i create the following page to use that master page :
<%# Page Title="" Language="C#" MasterPageFile="~/test.Master" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="DocumentFlowUI.WebForm4" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</asp:Content>
I get the following error :
Content controls have to be top-level controls in a content page or a
nested master page that references a master page
The HTML-code in your nested masterpage must be wrapped with an asp:content-tag with a contentplaceholderid from the "master" masterpage.
Just to demonstrate Erik's point:
Parent masterpage:
<asp:ContentPlaceHolder ID="head" runat="server" />
Child masterpage:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<asp:ContentPlaceHolder ID="head" runat="server" />
</asp:Content>
Page:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<!-- content -->
</asp:Content>
I am currently referencing this website for AD role management.
The C# code is working fine, but when I pasted the code inside my webpage along with the masterpage, the page gave me an error which says:
Content controls have to be top-level controls in a content page or a nested master page that references a master page.
May I know how should I set my masterpage in this case?
.ASPX page without masterpage:
<%# Page Language="C#" %>
<%# Import Namespace="System.Web.Security" %>
<%# Import Namespace="System.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
string[] rolesArray;
MembershipUserCollection users;
string[] usersInRole;
public void Page_Load()
{
....
}
public void AddUsers_OnClick(object sender, EventArgs args)
{
....
}
public void UsersInRoleGrid_RemoveFromRole(object sender, GridViewCommandEventArgs args)
{
....
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Sample: Role Membership</title>
</head>
<body>
<form runat="server" id="PageForm">
<font face="helvetica" size="6" color="#455c75"><strong>Role Membership</strong></font><font face="helvetica" size="5" color="#455c75"><strong> Management</strong></font>
<br /><asp:Label ID="Msg" ForeColor="maroon" runat="server" /><br />
<table cellpadding="3" border="0">
...
</table>
</form>
Masterpage:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MainPage.master.cs" Inherits="MainPage" %>
<!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>SOD</title>
<link href="Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
...
</body>
</html>
EDIT:
I tried inserting MasterPageFile="~/MainPage.master" into the first tag, which start my .aspx page with <%# Page Language="C#" MasterPageFile="~/MainPage.master"%>, giving me the error mentioned above.
The Masterpage contains HTML code and content areas. The pages that use the masterpage must, MUST, have all code in an <asp:Content> tag. You can't have any sort of code outside of the Content tag.
You need to place your code inside an <asp:Content ID="content1" ContentPlaceHolderID="Content_pageBody" Runat="Server"></content> tag. This tag should map to your master page, where ContentPlaceHolderID = the place holder name in your master page
net c# web application and page that using master page
i used jquery-ui-timepicker-addon.js for textbox it's not working in content place holder
but it's working in page without master page
maserpage
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="QcPipe_webAp.Site1" %>
<!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></title>
<script src="Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
content
<%# Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true"
CodeBehind="WebForm1.aspx.cs" Inherits="QcPipe_webAp.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<script type="text/javascript">
$('#TextBox1').timepicker();
</script>
</asp:Content>
$('#<%= TextBox1.ClientID %>').timepicker({
});
ClientID of the control - is the real unique ID for the control generated during the page render.