How to ajaxify in this scenario?

[Alec]

I have a master page:

<div id="sidebar">
   <WebCore:SideNavigation id="wwcSideNavigation" runat="server"></WorldWebCore:SideNavigation>
</div>


<div id="rightbar">
   <asp:ContentPlaceHolder ID="cphMain" runat="server"></asp:ContentPlaceHolder>
</div>

Inside the side navigation control, is a repeater list of li tags, with links:

<a href="Default.aspx" class="dashboard">Dashboard</a>
<ul id="treemenu1" class="treeview">

    <li>Leads Manager
        <ul>
            <li><a href="LeadList.aspx">Leads</a></li>
        </ul>
    </li>
    <li>Users Manager
        <ul>
            <li>Users</li>
        </ul>
    </li>
</ul>

LeadList.aspx using the master page above:

<asp:Content ID="cphMain" ContentPlaceHolderID="cphMain" runat="server">
    <asp:Button ID="btnAddNew" runat="server" Text="Add New Lead" CssClass="btn" />
    <telerik:RadGrid ID="rgLead" runat="server" Skin="Telerik" AllowMultiRowSelection="true" AllowPaging="True" AllowSorting="True" GridLines="None" OnItemCreated="rgLead_onItemCreated" OnItemCommand="rgLead_OnItemCommand" CssClass="gridview">
    <MasterTableView TableLayout="Fixed" AutoGenerateColumns="False" DataKeyNames="LeadID"  >
    <Columns>
       <telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" HeaderStyle-Width="25px"  />
       <telerik:GridTemplateColumn HeaderText="Name" HeaderStyle-Width="150px" ItemStyle-Font-Size="13px" >
            <ItemTemplate>
               <asp:Literal ID="ltrName" runat="server"></asp:Literal>&nbsp;&nbsp;
            </ItemTemplate>
       </telerik:GridTemplateColumn>

         <telerik:GridBoundColumn HeaderStyle-Width="100px"  DataField="LeadId" HeaderText="Lead No"  UniqueName="LeadNo" AllowSorting="true" ItemStyle-Font-Size="13px" ></telerik:GridBoundColumn>

          <telerik:GridBoundColumn HeaderStyle-Width="150px"  DataField="PhoneNumber" HeaderText="Phone Number"  UniqueName="PhoneNumber" AllowSorting="true" ItemStyle-Font-Size="13px" ></telerik:GridBoundColumn>

         <telerik:GridBoundColumn DataField="DtmUpdated" DataType="System.DateTime" HeaderText="Last Updated" UniqueName="DtmUpdated" ItemStyle-Font-Size="13px" ></telerik:GridBoundColumn>

          <telerik:GridTemplateColumn HeaderText="Actions" ItemStyle-Font-Size="13px" >
                                            <ItemTemplate>
                                                <asp:Hyperlink ID="hplEdit" runat="server" Text="Edit" ></asp:Hyperlink>
         </ItemTemplate>
      </telerik:GridTemplateColumn>

       </Columns>
        </MasterTableView>

       <HeaderContextMenu Skin="Outlook">
             <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
        </HeaderContextMenu>

       <ClientSettings EnableRowHoverStyle="false">
            <Selecting AllowRowSelect="True"   />
        </ClientSettings>

       <FilterMenu Skin="Outlook">
             <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
       </FilterMenu>
       </telerik:RadGrid>

</asp:Content>

Okay, so what I want to do is to ajaxify the whole thing so that when i click the link in side navigation control, the main content place holder get updated by ajax instead of loading the page. How can I do that?

[ManniAT]

Hi,

I can't provide you with a complete solution (there are many) but notice one thing - if you add a link (a tag) the browser takes this thing and say something like "oh, I have to load this (different) page".
And that causes the browser to make a GET to the server for this new page.

So the first thing to do is - replace the link with a button (hyperlink button), which calls a method on the server.
Next is to change the content.
The easiest approach for me seems to build a usercontrol which renders the thing you want.

The masterpage concept is different to a "frame concept". While in a frame scenario you can tell every frame what to use (which content to show) a masterpage is something opposite.
You have a page "SecondPage.aspx" - which uses the same masterpage as "FirstPage.aspx".
With frames you would do something like ContentFrame.src="http://...." while the "framework around" (masterpage content) would stay the same.
With a masterpage you now ask the server to bring up SecondPage.aspx. The page loads (on server) and ASP.NET detects - ah this page uses a masterpage. So the server "surrounds" the content of SecondPage.aspx with the elements from the masterpage.
Then the whole thing gets sent to your browser.

Even if not "technical perfect" think of a masterpage as something like a backpack which every single page carries.
Or think of it as clothes - this makes every page you create "look the same" - BUT - like an actor in the theater - clothes are not the stage - they are the things actors wear. And calling a different actor to enter the stage means that the actor has to move there.
Or here - a page is loaded. No matter what the actor wears - he has to enter the stage -- the page gets loaded.

In other words - using masterpage makes all your pages look uniform - because the "wear" the same uniform - but a page is still a single unit retrieved by loading it.

A solution for this is to have the "actor" carrying a "picture" - in other words you stay on the same page, but change the content of some part of it.
This can be done by (for an example) using RadPageView / TabStrip or with a user control which renders it's content depending on parameters, or..... (there are a lot of ways).

What to use depends on the solution you try to build - for (lets say) a few simple pages the PageView like shown here:
http://demos.telerik.com/aspnet-ajax/tabstrip/examples/functionality/multipage/defaultcs.aspx

Regards

Manfred