QUESTION: How to access an object embedded in a UserControl through
Javascript file?
Another way to ask this question: How to execute script from a UserControl,
accessing other objects in that UserControl? (Script attached to, and
executed by, a UserControl embedded server control can ‘see’ the UserControl
through the root document architecture. How to get the script to execute and
‘see’ other server controls in the UserControl – as compared to addressing
the base UserControl itself?)
Visual Studio 2005 - ASP.NET 2.0 - C#
/* Page object: MyPage.aspx */
<%@ Reference Control="~/controls/MyControl.ascx" %>
<%@ Register TagPrefix="myc" TagName="MyControl"
Src="Controls/MyControl.ascx" %>
<%@ Page language="c#" Inherits="MyPage" CodeFile="MyPage.aspx.cs" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<script language="javascript" src="MyScript.js"></script>
</HEAD>
<body>
<form id="MyForm" method="post" runat="server">
<asp:Panel ID="MyPagePanel" runat=server>
<div id="MYCDiv">
<myc:mycontrol id="MyControl" runat="server"></myc:mycontrol>
</div>
</asp:Panel>
<asp:Button id="MyButton" runat="server" Text="Code
Behind"></asp:Button>
<asp:Button id="JsButton" runat="server"
Text="Javascript"></asp:Button>
</form>
</body>
</HTML>
/* Page object code behind: MyPage.aspx.cs */
[…] // Additional code here
private void WireupPage()
{
JsButton.Attributes.Add("onclick", "javascript:HandleJsButton();");
}
protected void MyButton_Click(object sender, System.EventArgs e)
{
MyPagePanel.Height = 67; // ok
MYCDiv.Visible = true; // ok
}
/* UserControl object: MyControl.ascx */
<%@ Control language="c#" Inherits="MyControl" CodeFile="MyControl.ascx.cs" %>
<asp:Panel id="MyControlPanel" runat="server">
<div id="CONDiv">
<asp:Button id="ControlButton" runat="server"
Text="Control"></asp:Button>
</div>
</asp:Panel>
/* UserControl object code behind: MyControl.ascx.cs */
[…] // Additional code here
private void WireupControl()
{
ControlButton.Attributes.Add("onclick",
"javascript:HandleControlButton();");
}
/* Javascript file: MyScript.js */
function HandleJsButton()
{
document.getElementById('MYCDiv').style.display = 'inline';
// ok
document.getElementById('MyPagePanel').style.heigh t = 10; //
ok
// return false; // to suppress post-back
// return true; // to allow post-back
}
function HandleControlButton()
{
document.getElementById('MYCDiv').style.display = 'inline';
// ok
document.getElementById('MyPagePanel').style.heigh t = 10; //
ok
document.getElementById('CONDiv').style.display = 'inline';
// NOT OK
document.getElementById('MyControlPanel').style.he ight = 10; //
NOT OK
// return false; // to suppress post-back
// return true; // to allow post-back
}
QUESTION: How to access an object embedded in a UserControl through
Javascript file?
btw, first posted on 4/4 in scripting discussion area. No responses there,
so I posted here. Hope this doesn't bend the rules too much. Would love to
get a clue here.
