Providing a custom UserControl identifier in rendered HTML

Question

When I use the ASP: Calendar control and give it an identifier:

<asp:Calendar runat="server" ID="MyCal" />

This looks like the one shown in the displayed html:

<table id="NameMangled_MyCal"... />

And I can access the element by ID in javascript as follows:

var cal= document.getElementById("<%= MyCal.ClientID%>")

However . When I create a user control that has a calendar:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WeeklyEventsCalendar.ascx.cs"
    Inherits="WeeklyEventsCalendar" %>

<div>
    <asp:Calendar runat="server" ID="InnerCal" Width="100%" OnDayRender="RenderCell" OnVisibleMonthChanged="ChangeMonth" Height="480px" />
</div>

And then give it an ID when I add it to my page ...

<mvs:WeeklyEventsCalendar ID="WeeklyCal" runat="server" />

This identifier is not displayed anywhere in the rendered HTML. all i get is

<div> stuff </div>

When I want

<div id="NameMangled_WeeklyCal"> stuff <div>

What am I doing wrong?

Answer 1

UserControls only displays their contents, nothing more. What you can do is

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WeeklyEventsCalendar.ascx.cs"
    Inherits="WeeklyEventsCalendar" %>

<div id="<%= this.ControlID %>">
    <asp:Calendar runat="server" ID="InnerCal" Width="100%" OnDayRender="RenderCell" OnVisibleMonthChanged="ChangeMonth" Height="480px" />
</div>