UPDATE PANEL ASP.NET - PAGE REFRESH

Brad Pitt

Total Post:61

Points:429
Posted by  Brad Pitt
 1326  View(s)
Ratings:
Rate this:

Code: 

<asp:Content ID="Content2" ContentPlaceHolderID="page_content_cp" Runat="Server">
<asp:UpdatePanel runat="server" ID="UP1" UpdateMode="Conditional">
<ContentTemplate>
<section id="page_section">
<div class="data_top">
<ul class="bxslider">
    <asp:ListView ID="LV_slider" runat="server" DataSourceID="**">
    <ItemTemplate>
    <li>
    <asp:Image ID="Image11" ImageUrl='<%#XPath("big_image_url") %>' AlternateText="slider"  runat="server"  />
    </li>
    </ItemTemplate>
    </asp:ListView> 
</ul>
</div>
<div class="shaddow"></div>
<div class="data_bottom">
<asp:ListView runat="server" ID="LV_data_bottom" DataSourceID="**"> 
<ItemTemplate>
<div style="display:inline;">
<asp:LinkButton runat="server" CommandArgument='<%#XPath("big_image_url") %>' ID="LB_thumb" OnClick="lb_thumb1" ><asp:Image runat="server" ID="IMG_img1" ImageUrl='<%#XPath("small_image_url") %>' />
<asp:Label runat="server" CssClass="title" ID="bottom_label" Text='<%#XPath("title") %>'></asp:Label></asp:LinkButton>
</div> 
</ItemTemplate>
</asp:ListView>
</div>  
</section>
</ContentTemplate>
</asp:UpdatePanel> 
        <asp:XmlDataSource ID="**" runat="server"
            DataFile="~/***/***" XPath="/Data/**/**">
        </asp:XmlDataSource>
</asp:Content>

Click on the thumbs "jump" the page. 

I dont want the page will "jump"/"refresh" after click on thumb. how can i do that? Maybe i wrong on the place of the updatepanel ?

  1. Pawan Shukla

    Post:29

    Points:203
    Re: Update panel asp.net - page refresh

    You can always get it done using updatepanel and microsoft ajax... but there is a better and more lightweight alternative. Use jquery to swap the main image on top when the thumbnails are clicked, without doing a page refresh. 

    Define a surrounding div for the imain image with id "imageBox" 

    <a href="#" id="changeImage" rel="1"><img class="thumb" src="image1_thumb.jpg" /></a>
    <div id="imageBox">&nbsp;</div>
    then,
     
    $(document).ready(function(){
        $('#changeImage').click(function(){
            var rel = $(this).attr('rel');
            $("#imageBox").html("<img src='image" + rel + ".jpg' />");
        })
    });

    This is both clean and lightweight. no Microsoft ajax panel junk.

      Modified On Apr-07-2018 02:27:50 AM
  1. Maria Susan

    Post:29

    Points:107
    Re: Update panel asp.net - page refresh

    Put ScriptManager. 

    <asp:ScriptManager EnablePartialRendering="true"  ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <asp:Content ID="Content2" ContentPlaceHolderID="page_content_cp" Runat="Server">
    <asp:UpdatePanel runat="server" ID="UP1" UpdateMode="Conditional">

      Modified On Apr-07-2018 02:27:23 AM

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!