We Keep Coding

Passing array of objects to a master page's content page

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>

Cannot set property 'value' of null in javascript

I am getting the following error "Cannot set property 'value' of null" in the javascript named as "item_pricecataglog.js", following the line of code
document.getElementById('ctl00_ContentPlaceHolder1_ctl00_hdn_returnboolvalue').value = 'true';
I assume this is because my application did not find the corresponding element in the web page or control.
strange thing is, element "hdn_returnboolvalue" is declared in the web control from where this java script is referenced. below is the snippet of my web control
<%# control language="C#" autoeventwireup="true" CodeBehind="EstimateProductcatalogueBind.ascx.cs" Inherits="ePrint.usercontrol.ProductCatalogue.EstimateProductcatalogueBind" %>
<script type="text/javascript" src="<%=strSitepath %>js/item/item_pricecatalog.js"
language="javascript"></script>
<div>
<asp:HiddenField ID="hdn_kitavailibility" runat="server" Value="0" />
<asp:HiddenField ID="hdn_returnboolvalue" runat="server" Value="" />
</div>
The above control is inside the popup which is aspx page named "common_popup". i have added the control to "ContentPlaceHolder1" which is declared in popup aspx page.
<%# page language="C#" masterpagefile="~/Templates/popUpMasterPage.master" autoeventwireup="true" CodeBehind="common_popup.aspx.cs" Inherits="ePrint.common.common_popup" title="Untitled Page" enableviewstatemac="false" enableEventValidation="false" theme="Theme1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<script type="text/javascript" language="javascript" src="<%=strSitepath %>js/Item/general.js?VN='<%=VersionNumber%>'"></script>
<div>
<UC:callClass ID="usrCallclass" runat="server" />
</div>
<div>
<asp:PlaceHolder ID="plhDiv" runat="server"></asp:PlaceHolder>
</div>
</asp:Content>
below is the snippet of C# code from where i am adding the control to this page
UserControl userControl37 = (UserControl)base.LoadControl("~/usercontrol/ProductCatalogue/EstimateProductcatalogueBind.ascx");
this.plhDiv.Controls.Add(userControl37);

I think the proper code should be (notice the changed id):
document.getElementById('ContentPlaceHolder1_PriceCatalog_hdn_returnboolvalue').value = 'true';

How to reference multiple identical user controls on a page

I'm trying to use several instances of an ascx control on a single page. Only the last control on the page works. I understand from this post [Asp.Net User Control does not work correctly when multiple are added to one form that the problem is related to the IDs; somehow I'm trying to reuse the IDs and the specific control being edited is not referenced correctly. However, the code on that page is complex and I don't understand the answers. I created a small example of my problem to demonstrate.
Here is my user control:
<%# Control Language="vb" AutoEventWireup="false" CodeBehind="testControl.ascx.vb" Inherits="Tempusforms.testControl" %>
<script type="text/javascript">
function getValue() {
document.getElementById("<%=Label1.ClientID %>").innerHTML = getIndex();
}
function getIndex() {
return document.getElementById("<%=droppit.ClientID %>").selectedIndex;
}
</script>
<span>
<asp:DropDownList ID="droppit" runat="server" OnChange="getValue();" >
<asp:ListItem Value="Select a Value"></asp:ListItem>
<asp:ListItem Value="one"></asp:ListItem>
<asp:ListItem Value="two"></asp:ListItem>
<asp:ListItem Value="three"></asp:ListItem>
</asp:DropDownList>
</span> Index Value =
<span>
<asp:label ID="Label1" runat="server" Text="mylabel" ></asp:label>
</span>
Here is the page that uses the controls:
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="userControlTest.aspx.vb" Inherits="Tempusforms.userControlTest" %>
<%# Register src="../Common/testControl.ascx" tagname="testControl" tagprefix="uc1" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
<uc1:testControl ID="testControl1" runat="server" />
<br /><br />
<uc1:testControl ID="testControl2" runat="server" />
</div>
</form>
</body>
</html>
Can you show me how to make this work?
Thanks for your help.

ASP.NET generates different IDs which include the UserControl ID so IDs aren't the issue here.
However the problem is with the JS code that you are including in the User Control. This gets repeated and bad things happen because of that obviously.
You should get those scripts outside the User Control and change them to use parameters.
Something like:
<script type="text/javascript">
function getValue(ctrlID) {
document.getElementById(ctrlID).innerHTML = getIndex(ctrlID);
}
function getIndex(ctrlID) {
return document.getElementById(ctrlID).selectedIndex;
}
</script>
And you can call these functions from the User Control like this: OnChange="getValue(this.id);"

Rendering Javascript in an asp.net master page at a specific spot

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.

How do I add JavaScript to an ASP.NET MVC View?

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.