Home > DeveloperSection > Forums > Update panel asp.net - page refresh
Brad Pitt
Brad Pitt

Total Post:61

Points:429
Posted on    December-05-2014 2:59 AM

 ASP.Net Page Lifecycle 
Ratings:


 2 Reply(s)
 748  View(s)
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 ?



Pawan Shukla
Pawan Shukla

Total Post:29

Points:203
Posted on    December-05-2014 6:42 AM

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.


Maria Susan

Total Post:29

Points:107
Posted on    December-05-2014 7:09 AM

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">


Don't want to miss updates? Please click the below button!

Follow MindStick