Question

Page url：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>

点击拇指“跳”页面。

我不希望点击拇指后页面会“跳”/“刷新”。我怎样才能做到这一点？也许我对updatepanel的位置有误？

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' />");
    })
});

这既干净又轻便。没有微软的ajax面板垃圾。

Answer 2

我不确定这里有什么问题，但是如果你想将更新面板分成两部分，你可以这样做。

有关不同更新面板如何触发自身的解释。 http://www.asp.net/web-forms/tutorials/aspnet-ajax/understanding-asp-net-ajax-updatepanel-triggers

Answer 3

在listview页面中使用AutoPostBack="false"无法刷新..或使用javascript更改图像

Answer 4

放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">
  <!-- bla bla bla.. -->

Answer 5

您是否尝试更改以下内容

UpdateMode="Conditional"

有了这个吗？

UpdateMode="Always"

Answer 6

在LinkButton上设置ClientIDMode = Auto。

Answer 7

一切似乎都是正确的。以下是“更新”面板的示例。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication3.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>

<body>
    <form id="form1" runat="server">
        <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

        <asp:UpdatePanel ID="Updatepanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                <asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">LinkButton</asp:LinkButton>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</form>

背后的代码

namespace WebApplication3
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            this.Label1.Text = "change Test 1";
        }

        protected void LinkButton1_Click(object sender, EventArgs e)
        {
            this.Label1.Text = "change Test 2";
        }
    }
}

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

7 个答案: