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>
Related
This is my first encounter with User Controls.
I have a user control that contains a jQuery function called Animate(). I want to call that function from an aspx page that contains the user control. Is that possible?
When I click the button in the following code the function is not fired and no error. What am I missing?
Upload_Animation.ascx
<head>
<script>
function AnimateGif() {
// do some stuff
}
</script>
</head>
<body>User Control</body>
aspx page
<head runat="server">
<uc:UploadAnimation ID="uc1" runat="server"/>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button OnClientClick="AnimateGif();" runat="server" Text="Do stuff" OnClick="btn_Click"/>
</div>
</form>
</body>
web.config
<controls>
<add tagPrefix="uc" src="~/UserControls/Upload_Animation.ascx" tagName="UploadAnimation" />
</controls>
First of all, I cannot see any JQuery code in your source example. As I can see (correct me if I'm wrong), you are trying to call client Javascript function that is declared as Animate() and you are calling as AnimateGif(); Try to correct the name of the calling function to match the declared name.
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'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.
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.