Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

Window / ContentTemplate vs. NavigateUrl

Click on the button below to open a RadWindow and see how easy the access to and from the Content Template is by examining the actual code:
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


  • RadWindow 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

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ 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" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <qsf:HeadTag ID="Headtag1" runat="server" />
        <telerik:RadCodeBlock ID="RadCodeBlock2" runat="server">
            <style type="text/css">
                .windWrapper td
                {
                    padding: 5px;
                    vertical-align: top;
                }
                
                #ContentTemplateZone, #NavigateUrlZone
                {
                    width: 500px;
                    height: 400px;
                }

                .contText,
                .contButton
                {
                    margin: 0;
                    padding: 0 0 10px 5px;
                    font-size: 12px;
                }
            </style>
        </telerik:RadCodeBlock>
    </head>
    <body class="BODY">
        <form id="Form1" runat="server">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="c#" />
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadFormDecorator ID="RadFormDecorator" runat="server" />
        <telerik:RadWindow runat="server" ID="RadWindow_ContentTemplate" RestrictionZoneID="ContentTemplateZone"
            Modal="true">
            <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" /></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;" /></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" /></div>
            </ContentTemplate>
        </telerik:RadWindow>
        <telerik:RadWindow runat="server" ID="RadWindow_NavigateUrl" NavigateUrl="Dialog.aspx"
            Modal="true" InitialBehaviors="Maximize" RestrictionZoneID="NavigateUrlZone">
        </telerik:RadWindow>
        <table border="0" cellpadding="0" cellspacing="0" class="windWrapper">
            <tr>
                <td>
                    <qsf:InformationBox ID="InformationBox1" runat="server">
                        <span style="font-size: 12px;">Click on the button below to open a RadWindow and see how easy the access to and from the Content Template is by examining the actual code:</span>
                    </qsf:InformationBox>
                </td>
                <td>
                    <qsf:InformationBox ID="InformationBox2" runat="server">
                        <span style="font-size: 12px;">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</span>
                    </qsf:InformationBox>
                </td>
            </tr>
            <tr>
                <td id="ContentTemplateZone">
                    <asp:Button ID="Button3" Text="open the window" runat="server" OnClientClick="openWinContentTemplate(); return false;" />
                    <br />
                    <asp:Label ID="Label1" Text="" runat="server" />

                    <script type="text/javascript">
                        function populateValue() {
                         $get("Label1").innerHTML = $get("<%= Textbox1.ClientID %>").value;
                            //the RadWindow's content template is an INaming container and the server code block is needed
                            $find("RadWindow_ContentTemplate").close();
                        }

                        function openWinContentTemplate() {
                            $find("RadWindow_ContentTemplate").show();
                        }
                    </script>

                </td>
                <td id="NavigateUrlZone">
                    <asp:Button ID="Button4" Text="open the window" runat="server" OnClientClick="openWinNavigateUrl(); return false;" />

                    <script type="text/javascript">
                        function openWinNavigateUrl() {
                            $find("RadWindow_NavigateUrl").show();
                        }
                    </script>

                </td>
            </tr>
        </table>
        <qsf:Footer runat="server" ID="Footer1" />
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451