How to ajaxify in this scenario?

2 posts, 0 answers
  1. Alec
    Alec avatar
    43 posts
    Member since:
    Mar 2009

    Posted 06 May 2009 Link to this post

    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:

    <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?
  2. ManniAT
    ManniAT avatar
    877 posts
    Member since:
    Nov 2003

    Posted 07 May 2009 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top