Giving a custom UserControl an ID in rendered HTML

asp.net, javascript, user-controls

Solution

UserControls only render their contents, nothing else. What you could 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>

Problem

When I use a ASP:Calendar control, and give it an ID: `<asp:Calendar runat="server" ID="MyCal" />` It looks like this in the rendered html: `<table id="NameMangled_MyCal"... />` And I can access the element by ID in javascript like this: `var cal= document.getElementById("<%= MyCal.ClientID%>")` However, When I make a custom 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" />` That ID doesn't show up 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?

Original source