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

Question

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

6

页面网址：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>

点击缩略图会“跳转”页面。

我不想在点击缩略图后页面“跳转”/“刷新”。我该怎么办？可能是我更新面板的位置不对吗？

- Oshrib

你好，以下是翻译的文本：还有...你的问题是什么？ - Sachin

看起来你的整个页面都在UpdatePanel中，这可能是导致整个页面重新加载的原因。你应该尝试重新排列它。 - Imad S.

将UpdatePanel拆分为两个UpdatePanel会更明智吗？两个UpdatePanel可以一起工作吗？ - Oshrib

7个回答

2

我不确定你的问题是什么，但如果你想将Update Panel分成两个部分，你可以这样做。

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

- boonboon

我试图在评论中留下链接，但需要50个声望才行。所以我想在这里留下链接应该没问题。抱歉，我不知道这是不允许的。谢谢提醒。 - boonboon

1

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

- Jumpei

1

你尝试更改以下内容了吗？

UpdateMode="Conditional"

有这个吗？

UpdateMode="Always"

- Ayhan Dorman

1

在列表视图页面中使用 AutoPostBack="false" 无法刷新，或者使用 JavaScript 更改图像。

- Sohail Ali

0

一切看起来都是正确的。这里有一个 Update panel 的示例。

<%@ 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";
        }
    }
}

- Pavith Vihanga Goonethilake

0

在 LinkButton 上设置 ClientIDMode=Auto。

- graham mendick

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Aby · Accepted Answer

您可以使用updatepanel和Microsoft Ajax来完成它，但有一种更好、更轻量级的选择。使用jQuery在缩略图被点击时交换顶部主图片，而无需刷新页面。

请为主要图片定义一个id为"imageBox"的周围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面板垃圾。