New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

ContentTemplate vs. NavigateUrl

Click the button below to open a RadWindow and see how easy the access to and from the Content Template is



Click the button below to open a RadWindow that loads an external page and see how you can use it to navigate in a separate document

Telerik's ASP.NET Modal Dialog component offers two modes for loading the content inside - ContentTemplate and NavigateUrl. When the ContentTemplate is used the RadWindow acts as an INaming container on the page and the controls inside are still a part of the page. When the NavigateUrl is set the RadWindow loads the external page in an iframe, which creates a separate document. Each of these modes has its benefits and drawbacks:

Pros for using the ContentTemplate:
  • You can easily access controls from the main page from within the RadWindow and vice-versa via JavaScript
  • The controls inside the ContentTemplate are actualy a part of the main page
  • This provides easy access in the code behind as well, which is impossible with iframes
  • It is suitable for a simple user input or form

Cons for using the ContentTemplate:
  • You have to be careful in AJAX scenarios so that you do not get nested update panels, as the RadWindow is an INaming container only
  • If a large number of controls are loaded inside this will increase the initial page load, as they all have to be loaded


Pros for using the NavigateUrl
  • This provides a separate document in the RadWindow
  • It is suitable for showing more information on the given subject or displayng a complex form / web page, as the content is loaded only when the RadWindow is shown
  • You can also use AJAX and update panels within the page as it is a separate document

Cons for using the NavigateUrl
  • Communication between the page loaded within the RadWindow and the main page is more difficult as the content in the RadWindow is an iframe
  • You may not always be able to gain access due to the JavaScript cross-site policy
  • Access through the code-behind is more difficult even for pages in the same application and impossible for external sites
  • DefaultCS.aspx
    • DefaultCS.aspx
    • Dialog.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Window.ContentTemplateVsNavigateUrl.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
    <script src="scripts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator RenderMode="Lightweight" runat="server" ID="RadFormDecorator1" DecoratedControls="Buttons, Textbox" />
    <telerik:RadWindow RenderMode="Lightweight" runat="server" ID="RadWindow_ContentTemplate" RestrictionZoneID="ContentTemplateZone"
        Modal="true" Width="340px" Height="340px">
        <ContentTemplate>
            <p class="contText">
                Enter a value here and click the button to close the RadWindow and pass the
                value to the main page.
            </p>
            <div class="contButton">
                <asp:TextBox ID="Textbox1" runat="server"></asp:TextBox>
            </div>
            <p class="contText">
                Via a simple JavaScript function:
            </p>
            <div class="contButton">
                <asp:Button ID="Button1" Text="send value and close" runat="server" OnClientClick="populateValue(); return false;"></asp:Button>
            </div>
            <p class="contText">
                Via a simple method in the code-behind:
            </p>
            <div class="contButton">
                <asp:Button ID="Button2" Text="send value through code-behind" runat="server" OnClick="Button2_Click"></asp:Button>
            </div>
        </ContentTemplate>
    </telerik:RadWindow>
    <telerik:RadWindow RenderMode="Lightweight" runat="server" ID="RadWindow_NavigateUrl" NavigateUrl="Dialog.aspx"
        Modal="true" InitialBehaviors="Maximize" RestrictionZoneID="NavigateUrlZone" Width="340px">
    </telerik:RadWindow>
    <div class="demo-container size-wide">
        <div class="qsf-ib">
            <p class="infoHeader">
                Click the button below to open a RadWindow and see
                how easy the access to and from the Content Template is
            </p>
            <div id="ContentTemplateZone" class="qsf-ib">
                <br />
                <asp:Button ID="Button3" Text="open the window" runat="server" OnClientClick="openWinContentTemplate(); return false;" />
                <br />
                <asp:Label ID="Label1" Text="" runat="server"></asp:Label>
            </div>
        </div>
        <div class="qsf-ib">
            <p class="infoHeader">
                Click the button below to open a RadWindow that loads
                an external page and see how you can use it to navigate in a separate document
            </p>
            <div id="NavigateUrlZone" class="qsf-ib">
                <br />
                <asp:Button ID="Button4" Text="open the window" runat="server" OnClientClick="openWinNavigateUrl(); return false;" />
            </div>
        </div>
    </div>
    <script type="text/javascript">
    //<![CDATA[
        Sys.Application.add_load(function() {
            $windowContentDemo.contentTemplateID = "<%=RadWindow_ContentTemplate.ClientID%>";
            $windowContentDemo.templateWindowID = "<%=RadWindow_ContentTemplate.ClientID %>";
            $windowContentDemo.urlWindowID = "<%=RadWindow_NavigateUrl.ClientID %>";
            $windowContentDemo.label = "<%=Label1.ClientID %>";
            $windowContentDemo.textBox = "<%= Textbox1.ClientID %>";
        });
    //]]>
    </script>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance