Ajaxifying a ContentPlaceHolder from the Master Page

5 posts, 0 answers
  1. Michael
    Michael avatar
    1 posts
    Member since:
    Nov 2008

    Posted 16 Apr 2009 Link to this post

    I have a simple question.  How can I ajaxify the ContentPlaceHolder in a MasterPage?  I currently have a Master Page with 2 ContentPlaceHolders.  I also have a RadMenu and want to ajaxify the menu selections so that it refreshes the ContentPlaceHolders with the appropriate content page updates.  I read on the forums that I need to wrap the ContentPlaceHolder in a regular Panel for this scenario to work, but it is still not working.

    Is this possible and if so how?

    Thanks in advance!
  2. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 21 Apr 2009 Link to this post

    Hi Michael,

    Indeed, wrapping the ContentPlaceHolder into a regular Panels and updating these panel from the menu via RadAjaxManager should work in your case.
    I would suggest that you review the below articles for more information about RadAjaxManager:
    http://www.telerik.com/help/aspnet-ajax/ajxajaxmanager.html
    http://www.telerik.com/help/aspnet-ajax/ajxajaxmasterpage.html
    http://www.telerik.com/help/aspnet-ajax/ajxmasterpageupdateeverywhere.html

    Additionally, if you could send us the problematic master and content pages, this would help a lot.

    Best wishes,
    Iana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 10 Jul 2012 Link to this post

    Sorry to bring up this old post but since there are tons of similar ones (that unfortunately dont solve my problem) and the original post is exactly what im trying to achieve, I though replying to this one would be ok.

    First thing, im confused since ive read at some other places that entire content pages cannot be ajaxified just like regular controls (maybe the reason i cant find relevant example of code doing what i want) , but now I see this (and esspecially Iana's answer). Maybe ive read old discussions and then new features came up to fill this. I dont know.

    Can someone please confirm that this is possible and im not wasting my time (couples days) now trying to make it work?

    Here my problem: I have one Master page that contains a placeholder (that will contain my child content pages). That same master page also contains two regular asp menus in order to browse these content pages. I would like to have my master page not completely reloading when im clicking the menu items, but only have the placeholder refreshed. I also tried the RadAjaxManagerProxy in the content pages without success.

    In case what im trying to do is not possible, any workaround? The main reason i dont want to reload the maste ris because ill eventually put some comboboxes that will be populated from a database at page load (and i want this occuring only once). Thanks in advance.

    Here's snippets of my actual code:

    Master:
    <div class="hideSkiplink">
                <asp:Menu ID="Menu1" runat="server" CssClass="menu"
                    EnableViewState="false" IncludeStyleBlock="false"
                    Orientation="Horizontal">
                    <Items>
                        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
                        <asp:MenuItem NavigateUrl="~/List.aspx" Text="List"/>
                    </Items>
                </asp:Menu>
        </div>
    </div>
      
    <table class="MasterTable">
        <tr>
            <td class="MasterLeftColumn">
                     <asp:Menu ID="Menu2" runat="server" CssClass="menu2" Height="100%"
                      EnableViewState="false" IncludeStyleBlock="false"
                      Orientation="Vertical" >
                         <Items>
                               <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
                               <asp:MenuItem NavigateUrl="~/List.aspx" Text="List"/> 
                               <asp:MenuItem NavigateUrl="~/List.aspx" Text="Other"/>
                          </Items>
                    </asp:Menu>
                </td>
            <td class="MasterRightColumn">
                <div class="main">
      
               <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
      
                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableHistory="True"
                EnableAJAX="True" >
                    <AjaxSettings>
                        <telerik:AjaxSetting AjaxControlID="Menu1">
                            <UpdatedControls>
                                <telerik:AjaxUpdatedControl ControlID="WrapPanel" />
                            </UpdatedControls>
                        </telerik:AjaxSetting>
                        <telerik:AjaxSetting AjaxControlID="Menu2">
                            <UpdatedControls>
                                <telerik:AjaxUpdatedControl ControlID="WrapPanel" />
                            </UpdatedControls>
                        </telerik:AjaxSetting>
                    </AjaxSettings>
                    </telerik:RadAjaxManager>
      
                    <asp:Panel ID="WrapPanel" runat="server">
                        <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
                    </asp:Panel>
                </div>
            </td>
        </tr>
    </table>


    Content (any Ajax code needed?)
    <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
     
     <h3>Demo: 3-Tier Architecture</h3>
     
            <div>
                <p><a href="List.aspx">List Records</a></p>
                <asp:Label ID="lblMessage" runat="Server" ForeColor="red"
                  EnableViewState="False"></asp:Label>
                <table style="border:2px solid #cccccc;">
                    <tr style="background-color:#507CD1;color:White;">
                        <th colspan="3">Add Records</th>
                    </tr>
                    <tr>
                        <td>
                            First Name:
                        </td>
                        <td>
                            <asp:TextBox ID="txtFirstName" runat="Server"></asp:TextBox>
                        </td>
                        <td>
                            <asp:RequiredFieldValidator ID="req1" runat="Server" Text="*"
                             ControlToValidate="txtFirstName" Display="dynamic">
                           </asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Last Name:
                        </td>
                        <td>
                            <asp:TextBox ID="txtLastName" runat="Server"></asp:TextBox>
                        </td>
                        <td>
                            <asp:RequiredFieldValidator ID="req2" runat="Server" Text="*"
                             ControlToValidate="txtLastName" Display="dynamic">
                           </asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Age:
                        </td>
                        <td>
                            <asp:TextBox ID="txtAge" runat="Server" Columns="4">
                            </asp:TextBox>
                        </td>
                        <td>
                            <asp:RequiredFieldValidator ID="req3" runat="Server" Text="*"
                            ControlToValidate="txtAge" Display="dynamic">
                           </asp:RequiredFieldValidator>
                            <asp:CompareValidator ID="Comp1" runat="Server"
                             Text="Only integer" ControlToValidate="txtAge"
                             Operator="DataTypeCheck" Type="Integer">
                            </asp:CompareValidator>?
  5. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 13 Jul 2012 Link to this post

    Hi Martin Roussel,

    What you are trying to achieve is not possible using the approach you started implementing. Because redirecting to another page requires full postback. You can still have a menu in the MasterPage and ajaxify the WrapPanel, but to achieve your goal you should not load different page, just load the suitable content in the content page depending on the item selected in the menu. It would be easier if you have just an aspx page with user controls and on ajax request load different user control.

    I hope this helps.

    All the best,
    Iana Tsolova
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 13 Jul 2012 Link to this post

    Thanks Iana for the reply.

    Ive managed to obtain what i wanted by starting from scratch and ditching the Master page concept. I have a simple aspx containing a RadSplitter that contains 2 RadPane (left for menu (that i create dynamically) and right for content pages). For those who might be interested, here are code snippets:

    Markup:
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="100%" Width="100%">
                <telerik:RadSplitter ID="RadSplitter1" PanesBorderSize="0" BorderSize="0" runat="server" Orientation="Vertical" Width="100%" Height="525px">
                    <telerik:RadPane ID="RadPane1" runat="server" MinWidth="220" Width="220px" Height="100%">
                  
                 <telerik:RadMenu CollapseAnimation-Type="None" ID="RadMenu2" runat="server" EnableImageSprites="True" EnableRoundedCorners="true" EnableShadows="true" CssClass="menu3" OnItemClick="RadMenu2_ItemClick" Width="90%" Flow="Vertical" BackColor="#f3f5f5" BorderStyle="None" ForeColor="Black">
                </telerik:RadMenu>
     
                    </telerik:RadPane>
                   
                    <telerik:RadPane ID="RadPane2" runat="server" Scrolling="None" ContentUrl="Test.aspx">
                    </telerik:RadPane>
     
                </telerik:RadSplitter>
            </telerik:RadAjaxPanel>


    Code-Behind:
    protected void Page_Load(object sender, EventArgs e)
       {
     
           if (!IsPostBack)
           {
     
               RadMenuItem MenuItem = new RadMenuItem();
               RadMenu2.Items.Add(MenuItem);
               MenuItem.Text = "List";
               MenuItem.Value = "List.aspx";
     
               MenuItem = new RadMenuItem();
               RadMenu2.Items.Add(MenuItem);
               MenuItem.Text = "Test";
               MenuItem.Value = "Test.aspx";
     
     
           }
      
       }
     
       protected void RadMenu2_ItemClick(object sender, RadMenuEventArgs e)
       {
           if (e.Item.Value != "")
           {
               RadPane2.ContentUrl = e.Item.Value;
           }
       }

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017