The ContentUrl property allows you display external content, such as internal or external Web pages, in the C1Expander control. In this topic you'll set the C1Expander control's ContentUrl property and header content to change on the client side. If, instead, you'd like set the ContentUrl property in Source view, from the Properties window, or in code, see the Displaying External Content topic.
To set the control's header content and ContentUrl property at run time, create a new AJAX-Enabled Web site project and complete the following steps:
1. Navigate to the Visual Studio Toolbox and double-click the C1Expander icon to add the control to your page.
2. Click on the Source tab to switch to Source view, and note that the body of the page looks similar to the following:
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:C1Expander ID="C1Expander1" runat="server" HeaderSize="25px" Height="200px" Width="100px"><Header>Header</Header><Content>Content</Content></cc1:C1Expander>
</div>
</form>
</body>
3. In the <cc1:C1Expander> tag, delete the default "Content" text between the <Content></Content> tags.
4. In the <cc1:C1Expander> tag, change Height="200px" Width="100px" to Height="250px" Width="350px" so the tag appears similar to the following:
<cc1:C1Expander ID="C1Expander1" runat="server" HeaderSize="25px" Height="250px" Width="350px"><Header>Header</Header><Content></Content></cc1:C1Expander>
This will resize the C1Expander control.
5. Add the following tags just below the </cc1:C1Expander> tag to add a button and text box to set the ContentUrl property.
<br /><input id="TxtUrl" type="text" value="http://www.google.com" />
<input id="Button3" type="button" value="Set ContentUrl" onclick="LoadContentUrl()"/>
6. At the top of the page, add the following JavaScript just above the opening <html> tag:
<script language="javascript" type="text/javascript">
function LoadContentUrl()
{
var oExpander = Sys.Application.findComponent("<%=C1Expander1.ClientID%>");
oExpander.set_contentUrl(document.getElementById('TxtUrl').value);
oExpander.get_headerPanel().get_contentElement().innerHTML = document.getElementById('TxtUrl').value;
}
</script>
This function will change the C1Expander's ContentUrl property and the title in the header of the control when the button on the page is pressed.
7. Switch to Design view and note that the page now looks similar to the following:
Run the project and observe:
1. Click the Set ContentUrl button, the page will look similar to the following:
2. Enter a new URL in the text box and click the Set ContentUrl button again.
The Web site you have just entered will be loaded into the C1Expander control.
|
