Navigation between pages without refreshing entire page.

Hi

How can i do page navigation without out getting any refresh on web page, LikeNikhil Kothari's Weblog www.nikhilk.net/ .

is there any atlas control to do that ? or How is it possible to enable this ?

Regards,

Gopinath, gopinathnet@dotnet.itags.org.gmail.com

That's not AJAX. It's just a fancy way of transitioning a page. You can google for "web page transition" or check out the following page for some samples:

http://www.hypergurl.com/transition.html

Navigation best practices

I'm writing a ASP.NET web application that uses Ajax. The application has an "outlook-like" layout with navigation elements (bars, tree) on the left and a menu on the top. The layout is implemented in a masterpage. There is a mix of both <a href> (get) and linkbutton controls (postback with response.redirect) that causes navigation to other page.

I'm using ajax on single pages to handle refresh-less updates, but I really want to change this application so that clicking on a link or linkbutton does not re-load the whole page (treeview, menu etc), but only updates the content part of the masterpage. The only option I know is reverting to good old <frames> but I hate frames. Is there anyway I cat use Ajax to handle cross page navigation correctly?

Hi Paala,

Do i understand you correctly that you want the navigation links to use Ajax so that your page is update with other content. If this is what you want to achieve it isn't possible with AJAX.. The links you are clicking on right now point to content pages (which inherit from the masterpage). These pages are totally new pages Ajax is a way to partial refresh parts of pages not to totally load new pages. (a masterpage will never be requested by an end-user, the content pages are requested by end-users)

The only solution you can use is to put al your content on one page and use the multi-view control and switch between the view when a user clicks on a link. This solution is very ugly because you have all your content on one page. Hope this helps

Regards,

Yes, that is the effect I was after. If I still reject using frames one method I've found is to convert all my content aspx files into web user controls (ascx) and use a placeholder inside a updatepanel on the "main page". All links will cause one or more controls to be loaded dynamically and the updatepanel causes the new content to be displayed. Since my pages does not only include text content, but are "applications" with post-back controls I will need to "reload" the controls on each postback so that viewstate and events still work.

Re-loading the controls does seam feasable, but I'm unsure about the performance. Anyone tried such an approach?

Navigation using Master pages and Update panel without refresh

Hi

I have a master page in which there are hyperlinks to go to different pages. Its a header basically. I got the relevant content pages for the hyperlinks.

But when I click the master page links, a postback occurs and the whole page is refreshed and directed to the new page.

I need a way by which when I click the hyperlinks in master page the content pages change without any refreshing. I heard about the Iframe implementaion in update panel is it a feasible way to do this or multiview might solve my problem ?

Having a master page sort of defeats the purpose of keeping the same page and dynamically updating portions on postback. The master page is meant to be a supplement for the page the user is viewing. This means the master page is never browsed directly, it only contains master code for each of the pages that are browsed to directly.

Also, hyperlink controls should not perform postbacks -- they are simply meant for navigation. Therefore, anytime a user clicks a hyperlink, the user will be taken to the new page, causing flicker. I suggest using a link button instead. These perform postbacks and can capture events much better than a hyperlink.

In order to do what you're trying to do, consider not using a master page. Instead, use a single page that makes use of either an iframe or a multiview enclosed in an updatepanel. Example is below:

<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>Untitled Page</title>
</head>
<body>
<formid="theForm"runat="server">
<divid="wrapper">
<asp:ScriptManagerID="scriptManager"runat="server"></asp:ScriptManager>
<divid="header">
<asp:LinkButtonID="lnkClickMe"runat="server"OnClick="lnkClickMe_Click">Click Me!</asp:LinkButton>
</div>
<asp:UpdatePanelID="pnlDynamicContent"runat="server"UpdateMode="Conditional">
<ContentTemplate>
<asp:MultiViewID="mvDynamicContent"runat="server"ActiveViewIndex="0">
<asp:ViewID="viewBeforeClick"runat="server">
This is before the link above is clicked
</asp:View>
<asp:ViewID="viewAfterClick"runat="server">
This is after the link above is clicked
</asp:View>
</asp:MultiView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTriggerControlID="lnkClickMe"EventName="Click"/>
</Triggers>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>

And the code-behind:

PartialClass Test_ForumTest
Inherits System.Web.UI.Page

ProtectedSub lnkClickMe_Click(ByVal senderAsObject,ByVal eAs EventArgs)
mvDynamicContent.ActiveViewIndex = 1
EndSub
EndClass

Convert your hyperlink to linkbuttons then register these buttons as AsyncTrigger in the Update Panel. Convert Your Content Pages to User Control. Load the Proper User Control on Button Click.

NEED HELP! CollapsiblePanelExtender after callback still open?

Hello Community, I use since short AJAX. My menu/navigation I designed with CollapsiblePanelExtender, also all this dynamically. I get myself on the left of and headings from the data base and provide myself then the panels, left and images of everything dynamically. Everything marvelously and super. Now know it surely everything our customers --> "why that again opened unfold? It closed a while ago!". Therefore I must store the status somehow, expended or collapsed. I have one blog found where it am in such a way made:

1static string _topPanelCollapsed_ClientState;23protected void Page_Load(object sender, EventArgs e)4{5if (IsPostBack)6 _topPanelCollapsed_ClientState =7 CollapsiblePanelExtender1.ClientState ;8else9 CollapsiblePanelExtender1.ClientState =10 _topPanelCollapsed_ClientState;

For a panel that could be able be done, but as I get now so dynamically that it functions with my n-Panlels? Unfortunately there is none however with panels "onClick" Event and on the Event of the CollapsiblePanelExtender cannot one not access. I am grateful over all solutions.

PLEASE HELP ME!

i'm to despair!!!

thx for your answers!

Please post some code, maybe then we can help you more easily.

(Use the top-right button to insert code when you reply, thanks!)

Wim

69void PreparedMenu()70 {71 XmlDocument doc =new XmlDocument();72 doc.LoadXml(xmlText);7374 XmlElement root = doc.DocumentElement;7576 XmlNodeList XmlMainNode = doc.GetElementsByTagName("MainMenu");7778// MainMenuPanel erstellen79for (int i = 0; i < XmlMainNode.Count; i++)80 {81 XmlAttributeCollection xmlattribute = XmlMainNode[i].Attributes;82string titel = xmlattribute.GetNamedItem("Titel").Value;83string link = xmlattribute.GetNamedItem("Link").Value;84string pic ="";85if (xmlattribute.GetNamedItem("Pic") !=null)86 pic = xmlattribute.GetNamedItem("Pic").Value;87 Panel subMenuPanel =null;88string currentSubPanel ="";8990 pnlMenu.Controls.Add(getNewMainPanel(titel, link, pic));9192foreach (XmlNode subnodein root.ChildNodes.Item(i).ChildNodes)93 {94 XmlAttributeCollection xmlSubAttribute = subnode.Attributes;95string subtitel = xmlSubAttribute.GetNamedItem("SubTitel").Value;96string sublink = xmlSubAttribute.GetNamedItem("SubLink").Value;97 HtmlGenericControl htmblBreak =new HtmlGenericControl("br");9899// Prüft ob ein Subpanel für diesen Menüpunkt existiert.100if (subMenuPanel ==null)101 {102 subMenuPanel =new Panel();103104// Eigenschaften des Panels setzen105 subMenuPanel.ID ="Sub" + titel;106107// aktueller Subpanel108 currentSubPanel = subMenuPanel.ID;109 subMenuPanel.CssClass ="collapsePanel";110 subMenuPanel.Controls.Add(getNewLink(subtitel, sublink));111 subMenuPanel.Controls.Add(htmblBreak);112 }113else114 {115 subMenuPanel.Controls.Add(getNewLink(subtitel, sublink));116 subMenuPanel.Controls.Add(htmblBreak);117 }118 }119// Prüft ob ein dummy Panel erstellt werden muss.120if (currentSubPanel =="")121 {122 Panel emptyPanel =new Panel();123 emptyPanel.ID = titel +"Empty";124 currentSubPanel = emptyPanel.ID;125 emptyPanel.Height = 0;126127 pnlMenu.Controls.Add(emptyPanel);128 }129130// Prüft ob es ein SubMenuPanel hat.131if (subMenuPanel !=null)132 {133 pnlMenu.Controls.Add(subMenuPanel);134 subMenuPanel =null;135 }136137 pnlMenu.Controls.Add(getNewAjaxcollapsPanel(titel, currentSubPanel, link));138 }139 }140141protected CollapsiblePanelExtender getNewAjaxcollapsPanel(string mainpanel,string subpanel,string link)142 {143//Ajax Controll erstellen für jeden MainMenu Eintrag144 collapsPanel =new CollapsiblePanelExtender();145 collapsPanel.ID ="pnlEx" + mainpanel;146 collapsPanel.TargetControlID = subpanel;147 collapsPanel.ExpandControlID = mainpanel;148 collapsPanel.CollapseControlID = mainpanel;149 collapsPanel.Collapsed =true;150 collapsPanel.SuppressPostBack =false;151 collapsPanel.EnableViewState =true;152153return collapsPanel;154 }155156protected Panel getNewMainPanel(string titel,string link,string picture)157 {158// Tempor?res Panel erstellen159 Panel mainMenuPanel =new Panel();160161// Eigenschaften des Panels setzen162 mainMenuPanel.ID = titel;163 mainMenuPanel.CssClass ="collapsePanelHeader";164 mainMenuPanel.EnableViewState =true;165166 HyperLink mainLink = getNewLink(titel, link);167 mainLink.CssClass ="headerMenu";168169// Image erstellen170if (picture !="")171 {172 Image mainImage =new Image();173 mainImage.ImageUrl = picture;174 mainImage.Height = 24;175 mainImage.Width = 24;176 mainMenuPanel.Controls.Add(mainImage);177 }178179// Controls dem Panel hinzufügen180 mainMenuPanel.Controls.Add(mainLink);181182return mainMenuPanel;183 }184185protected HyperLink getNewLink(string name,string url)186 {187 PostBackOptions test =new PostBackOptions(this);188 test.ActionUrl = url;189190// Menülink erstellen191 HyperLink aMenuLink =new HyperLink();192 aMenuLink.Text = name;193 aMenuLink.NavigateUrl = url;194195return aMenuLink;196 }197}

Well thats my code.

example menu
--------
- home
- menupoint1
- menupoint2
- menupoint3

click on menupoint1 --> the content of menupoint1 load to the contentplaceholder

after the click the menu looks like (after callback)

- home
- menupoint1
- menupoint2
- menupoint3

but I would like so (the panels that i clicked remain open)

- home
- menupoint1
submenupoint1
submenupoint2
- menupoint2
- menupoint3

i hope it know which I mean ;)

thx for help!