Ajaxifying a ContentPlaceHolder from the Master Page

[Michael]

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!

[Iana Tsolova]

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.

[Martin Roussel]

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>?

[Iana Tsolova]

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

[Martin Roussel]

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;

       }

   }