Saturday, March 24, 2012

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.

No comments:

Post a Comment