I've a specific requirement of rendering Javascript onto a master page of an asp.net site. There are two specific requirements of it:
1) The position - It should be rendered at the very end of the page just before BODY tag
2) Control - Render it only when requested.
I solved #2 by creating a web-part which will render the javascript only when its placed on the page. But I could not achieve #1 since the web part doesn't give me control over where to render the javascript inside body tag.
Did anyone solve this problem before?
Please advice.
Thanks
Sachit
Try using ClientScript.RegisterStartupScript, it injects the script right above the </body> tag.
RenderControl is the last method to return in MasterPage Event Lifecycle that you can override. My guess would be to put it there.
If you are using Master Page, then why not put a content place holder just before the end body tag? The content pages should render their JavaScript in that particular place holder.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<asp:ContentPlaceHolder ID="headerContent" runat="server"/>
</head>
<body>
<form id="mainForm" runat="server">
<asp:ContentPlaceHolder ID="mainContent" runat="server" />
<asp:ContentPlaceHolder ID="footerContent" runat="server" />
</form>
<asp:ContentPlaceHolder ID="footerJsContent" runat="server"/>
</body>
</html>
Content pages should render their JavaScript inside the footerJsContent place holder.
Related
I have an array of objects that are loaded server side in the C# code from a text file I am attempting to pass this array to one of the content pages. It worked without issue when I did not use a master page but once I added the master page it no longer works.
Here is the aspx.cs page:
// Convert list of objects to a json array
string jsonString = JsonConvert.SerializeObject(clownIncidents);
cs.RegisterArrayDeclaration("markers", jsonString);
When I try to access it on the content page it says markers is undefined:
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
<div id="map" ></div>
<script src ="jss/Maps.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?
key=MYKEYcallback=initMap"></script>
</asp:Content>
Lastly here is the JavaScript referenced in the content page:
function initMap() {
alert(markers);
}
This occurs because the JavaScript code generated from cs.RegisterArrayDeclaration("markers", jsonString); appears in the HTML after your script in the content page. So, when your script runs, the variable markers is not yet defined.
To overcome this you need to add a new <asp:ContentPlaceHolder> in your Master page, which must be after the <form runat="server"> element and use that ContentPlaceHolder to have your JavaScript.
For example, your Master page will be:
<form runat="server">
<%-- Here is your Master page --%>
</form>
<asp:ContentPlaceHolder ID="ScriptContentPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
And then, in your .aspx content page, you can have your script like this (add the following snippet in the end of your .aspx page):
<asp:Content ID="Content2" ContentPlaceHolderID="ScriptContentPlaceHolder" runat="server">
<div id="map" ></div>
<script src ="jss/Maps.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?
key=MYKEYcallback=initMap"></script>
</asp:Content>
I'm sorry if the title of this question is quite vague...
I have a Web Application composed by a MasterPage in wich I include all my css and js files and any other page will be loaded into the content of the MasterPage.
In a page I call another page via javascript with this call:
<script type=text/javascript>window.open('ApriOrdine.aspx?ID=B300&MODE=UPD',null,'scrollbars=1')</script>
the page ApriOrdine.aspx contains 2 UserControls. I have a problem with css rules, I cannot set the padding using css rules written in css external files.
This is the whole code of my ApriOrdine.aspx:
<%# Page Title="Orders" Language="C#" AutoEventWireup="true" CodeBehind="ApriOrdine.aspx.cs" Inherits="WebApplication1.ApriOrdine" EnableEventValidation="false" %>
<%# Register TagPrefix="UC" TagName="UserControlCom" Src="~/Commessa.ascx" %>
<%# Register TagPrefix="UC" TagName="UserControlCli" Src="~/Cliente.ascx" %>
<head runat="server">
<link href="css/css.css" rel="stylesheet">
</head>
<body>
<form runat="server">
<div class="ApriOrdine">
<div>
<UC:UserControlCom runat="server" ID="ucCommessa" />
</div>
<div>
<UC:UserControlCli runat="server" ID="ucCliente" />
</div>
</div>
</form>
</body>
As you can see, the css.css file it's included behind head tags.
The problem in that if I write this css rule in my css.css like this it doesn't works.
.ApriOrdine
{
padding:50px;
}
Instead, if I assign the padding using style attributes to the div it works perfectly...
<div class="ApriOrdine" style = "padding:50px;">
EDIT
this is my complete source code
and this is the css
So, what is wrong here? Please help me, thanks!
If you need some more details please ask me!
The only reason i see is that your reference to the css is not good.
I don't know the structure of your project but i guess the master page is not at the same place as your .aspx page. So if you copy and paste the reference from the master page it's not working in the .aspx page cause the structure is not the same.
An other thing you could do is once the page is loaded, open the source code of the page and look at the reference generated in the page and make sure the path is good.
Hope this help.
So here I want to put some JavaScript for my carousel from Twitter bootstrap, the problem is, it seems having no effect no matter where I put it, I already made sure the id matches. Here's the code (note: I'm using master page)
$(‘.carousel‘).carousel
({
interval: 1000
})
I put it in <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content> which I believe is the head, but it still not working, any advice on how to do this?
Assuming your master page has something like this in it:
<head>
<asp:ContentPlaceHolder ID="head" runat="server" />
</head>
Then any page which is based on this master page you can indeed put anything inside <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> </asp:Content> which you want to be placed in the <head> section of your web page. This routinely contains bits of javascript, however in order for jQuery to do it's think you must wait until the document is ready:
<script>
$(document).ready(function(){
$('.carousel').carousel
({
interval: 1000
});
});
</script>
As an additional point (or, stab in the dark) you mention in your question "I already made sure the id matches" however you have not referenced any element by ID (except perhaps the ContentPlaceholder); your jQuery code references an element by class name .carousel.
Put your code in child page in which you have implemented carousel. also make sure to reference JQuery and carousel script file
<script type="text/javascript">
$(document).ready(function() {
$('.carousel').carousel({
interval: 1000
});
});
</script>
I want to access the content page Ajax combobox control in the master page and that too by using Javascript.
I have been trying the same by using the contentpageholder of the content page, but also one of the problem I get is there are around 10 content pages, so when some other page like Page 1 is opened , the code show object reference exception as contentplaceholder is not matched.
How to get that which content page is opened up?
Also I am not able to get the code working to get the maincontentplaceholder id in master page.
What I have done till now:
function accessControlContentPage() {
var txtCont = document.getElementById("Page.Master.FindControl('ContentPlaceHolder1').FindControl('txtContent')").value;
var text=txtCont;
}
But this is not working.
Any help with the same?
The suggested approach is add a specific content place holder controls for such scripts to be placed in the web page you are rendering. Take a look at the following master/content page markup:
Master page:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="WebApp.PageMethods.Site1" %>
<!DOCTYPE html>
<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:ContentPlaceHolder>
</div>
</form>
</body>
</html>
There is a content place holder head wherein I must write some js functions trying to access the dropdown list in the other content place holder ContentPlaceHolder1.
Content page markup:
<%# Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApp.PageMethods.WebForm3" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script>
function foo() {
var ddl = document.getElementById('<%= DropDownList1.ClientID %>');
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>
</asp:Content>
Here I didn't have to worry so much about trying to access controls nested in ContentPlaceHolderID.
Alternatively, if you don't have that option/freedom, you can always write something as follows in your master page itself:
var d = document.getElementById('<%= this.ContentPlaceHolder1.FindControl("DropDownList1").ClientID %>');
Access content page control from master page using javascript
we can find div id or control id of content page from master page in asp.net
Explanation of content page:-
don't forgot to mention runat="server",
ContentPlaceHolderID="content_body" //observation,
main_content is the ID of div tag
MasterPage.master
var d = document.getElementById('<%= this.content_body.FindControl("main_content").ClientID %>');
Do whatever you want with d
Thank you
I have a simple View and I wish to add a JQuery DatePicker JavaScript to this view (and not every view, via a masterpage).
I'm not sure what is the best way to do this.
Second, I'm conscious of where/when my JavaScript loads. I'm a fan of YSlow and it recommends that I add any scripts to the bottom of the page, which I do.
So, how could I do both?
Here's the view:
<%# Page
Language="C#"
MasterPageFile="~/Views/Shared/Site.Master"
Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<h2>Index</h2>
<% using (Html.BeginForm()) {%>
<p>
<label for="StartDate">Start Date:</label>
<!-- JQuery DatePicker to be added, here. -->
</p>
<% } %>
</asp:Content>
In ASP.NET MVC3, you can now use a RenderSection to achieve this, at least for simpler scenarios. Just add a RenderSection to the bottom of the layout page, and from your view fill in the appliation code
RenderSections: http://www.dotnetcurry.com/ShowArticle.aspx?ID=636
Your MasterPage should have a ContentPlaceHolder for the head.
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server" />
</head>
Then you're able to include head elements (JavaScripts, StyleSheets, etc...) in your views:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script src="/Scripts/jquery/ui/ui.datepicker.js" type="text/javascript">
</script>
<link href="/Styles/myStyle.css" rel="stylesheet" type="text/css" />
</asp:Content>
One way is put a content placeholder at the bottom of your master page, then the specific slave page that needs the javascript can specify the placeholders contents as the required javascript. Other pages that don't need the javascript simply don't specify any content for the placeholder.