UpdatePanel和ScriptManager實現免重新整理獲取資料
阿新 • • 發佈：2019-01-30
這年頭，都是ajax+jQuery，後臺取出json資料到前臺，然後再append到頁面上。
新來的大學實習生(估計是老闆的親戚，沒面試就插進來的)，大學老師只教了拖控制元件…
現在要實現免重新整理的效果，還是可以的，用一個從來不用的控制元件 UpdatePanel 來實現：
需求：後臺獲取N個圖片資料，動態載入到前端，不準重新整理頁面！
ASPX頁面：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default9.aspx.cs" Inherits="Default9" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>djk8888</title> </head> <body> <form id="form1" runat="server"> <asp:Button ID="btnPart" runat="server" Text="區域性重新整理" OnClick="btnPart_Click" /><br /> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Repeater ID="Repeater1" runat="server"> <ItemTemplate> <%#Eval("img") %> </ItemTemplate> </asp:Repeater> </ContentTemplate> </asp:UpdatePanel> </form> </body> </html>
ASPX.CS頁面：
using System; using System.Collections.Generic; public partial class Default9 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { ScriptManager1.RegisterAsyncPostBackControl(this.btnPart);//註冊一下要實現非同步回發的控制元件 } protected void btnPart_Click(object sender, EventArgs e) { //此處可以是從資料庫中取出資料(略) Random ran = new Random(); List<imgs> imgs = new List<imgs>(); for (int i = 0; i < ran.Next(1,100); i++) { imgs pic = new imgs(); pic.img = "<img src='Koala.jpg' width='100px' />"; imgs.Add(pic); } this.Repeater1.DataSource = imgs; this.Repeater1.DataBind(); } public class imgs { public string img { get; set; } } }
就這麼簡單…