Update panel asp.net - page refresh
Question
Page url: http://advancedmedia.co.il/data.aspx
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 ?
7 answers
solution1
6 2014-02-13 14:53:56
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"> </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.
solution2
2 2014-02-17 08:13:32
I'm not sure about what is your problem here, but if you want to separate the Update Panel into two you can do so.
There's an explanation on how different update panels can trigger themselves. http://www.asp.net/web-forms/tutorials/aspnet-ajax/understanding-asp-net-ajax-updatepanel-triggers
solution3
1 2014-02-19 04:49:41
在列表视图页面中使用AutoPostBack="false"无法刷新..或使用 javascript 更改图像
solution4
1 2014-02-19 05:22:30
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">
<!-- bla bla bla.. -->
solution5
1 2014-02-20 12:34:33
Did you try to change the following
UpdateMode="Conditional"
With this?
UpdateMode="Always"
solution6
0 2014-02-18 18:27:47
在 LinkButton 上设置 ClientIDMode=Auto。
solution7
0 2014-02-20 12:45:32
Everything seems correct. Here is a sample for 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>
Code Behind
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";
}
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.