c# - 更新面板 asp.net - 页面刷新

Question

页面网址:http://advancedmedia.co.il/data.aspx

代码:

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

点击拇指“跳转”页面。

我不希望页面在点击缩略图后“跳转”/“刷新”。我怎样才能做到这一点？也许我在更新面板的位置上错了？

Answer 1

您始终可以使用 updatepanel 和 microsoft ajax 来完成它...但还有更好、更轻量级的替代方案。单击缩略图时，使用 jquery 将主图像交换到顶部，而无需刷新页面。

为id为“imageBox”的imain图像定义一个周围的div

<a href="#" id="changeImage" rel="1"><img class="thumb" src="image1_thumb.jpg" /></a>
<div id="imageBox">&nbsp;</div>

然后，

$(document).ready(function(){
    $('#changeImage').click(function(){
        var rel = $(this).attr('rel');
        $("#imageBox").html("<img src='image" + rel + ".jpg' />");
    })
}); 

这既干净又轻便。没有 Microsoft ajax 面板垃圾。