Link to home
Start Free TrialLog in
Avatar of EYoung
EYoungFlag for United States of America

asked on

Best way to update a web page in VB 2010 using ASP.net 4.0

I am new to ASP.net development and would like some opinions on the recommended ways to update/refresh a web page without doing a full reload of the page from the server.  I want to avoid the screen flash as much as possible.  I also want to stay with Microsoft products where possible.

Thank you for the suggestions and guidance.
SOLUTION
Avatar of mayankagarwal
mayankagarwal
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Carl Tawn
The use of UpdatePanels, or JQuery will give you that just depends on what you want really.

Samples using UpdatePanel:

    http://msdn.microsoft.com/en-us/library/bb399001.aspx
Avatar of EYoung

ASKER

Thank you for the suggestions.

I have tried to follow the directions in the url provided but am getting some errors.  I should say that the web site I have developed uses MasterPages for controlling the headers, footers, and menus on the various web site pages.

I want to change an image on the Control pages when the user clicks a MasterPage menu option.  Is that possible using Ajax client side controls?

When I add the Ajax ScriptManager and UpdatePanel controls to the Default.aspx form (which is a Content page under the MasterPage), I get an error saying that the Label and Button controls are not know elements.  Can Ajax controls be used on a Content page and run by clicking on one of the MasterPage menu options?  I am guessing that is not possible, nor does it make sense now that I am typing this out.
<%@ Page Language="VB" MasterPageFile="MasterPage.master" CodeFile="Default.aspx.vb" Inherits="_Default" Debug="true" %>

<asp:Content ID="Home1" ContentPlaceHolderID="Home" Runat="Server">   

    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <asp:Label runat="server" Text="Label"></asp:Label>
            <asp:Button runat="server" Text="Button" />
        </asp:UpdatePanel>
    </asp:ScriptManager> 

    <div style="position:absolute; top:81px; left:833px; z-index: 1; visibility:visible; height: 20px; width: 290px;
        font-size:xx-large; color: Maroon" align="right">
        Home
    </div>    

    <div style="position:absolute; top:130px; left:823px; z-index: 1; visibility:visible; height: 20px; width: 300px; text-align:right;">
        <p><%= mWelcomeMessage%></p>
    </div>

    <div style="position:absolute; top:210px; left:285px; z-index: 1; visibility:visible; height: 122px; width: 135px;">
        <img alt="" src="Images/Flagship_Store_30.jpg""/>
    </div>
    
</asp:Content>

Open in new window

ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of EYoung

ASKER

OK, I see.  Thank you.

Instead of having the user click the Button1 Ajax control on the web page, is it possible to have the user click a menu item on the MasterPages menu to change something on the web page?  I like the idea of MasterPages as it seems to make the coding easier without having to duplicate the same menus on all the web pages.
<%@ Page Language="VB" MasterPageFile="MasterPage.master" CodeFile="Default.aspx.vb" Inherits="_Default" Debug="true" %>

<asp:Content ID="Home1" ContentPlaceHolderID="Home" Runat="Server">   

    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
        <ContentTemplate>
            <asp:Label ID="Label1" runat="server" Text = "" style="position:absolute; top:81px; left:833px; z-index: 1; visibility:visible; height: 20px; width: 290px;
                font-size:xx-large; color: Maroon" align="right"></asp:Label>
            <asp:Button ID="Button1" runat="server" Text="Button" />
        </ContentTemplate>
    </asp:UpdatePanel> 

    <div style="position:absolute; top:130px; left:823px; z-index: 1; visibility:visible; height: 20px; width: 300px; text-align:right;">
        <p><%= mWelcomeMessage%></p>
    </div>

    <div style="position:absolute; top:210px; left:285px; z-index: 1; visibility:visible; height: 122px; width: 135px;">
        <img alt="" src="Images/Flagship_Store_30.jpg""/>
    </div>
    
</asp:Content>

Open in new window

You can add triggers to the update panel to indicate which controls should cause the update panel to redraw. You would need to change your update panel to something like:
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <asp:Label ID="Label1" runat="server" Text = "" style="position:absolute; top:81px; left:833px; z-index: 1; visibility:visible; height: 20px; width: 290px;
                font-size:xx-large; color: Maroon" align="right"></asp:Label>
            <asp:Button ID="Button1" runat="server" Text="Button" />
        </ContentTemplate>
        <Triggers>
              <asp:AsyncPostBackTrigger ControlID="ID_Of_Your_Menu" />
        </Triggers>
    </asp:UpdatePanel>

Open in new window

Avatar of EYoung

ASKER

Please ignore my last post.  I need to rethink what I am trying to achieve before asking questions.  The Ajax controls now work and that is what I was looking for.  Thank you for the quick responses.
Avatar of EYoung

ASKER

Thank you carl_tawn.  Much appreciated.
Avatar of EYoung

ASKER

carl_tawn:

Can you also look at this question?  It is a followup one.

Thanks

https://www.experts-exchange.com/questions/26875076/How-trigger-Ajax-control-using-MasterPage-menu-item.html