asp.net ajax ไม่มีอะไรง่ายไปกว่านี้แล้วเชื่อดิ ScriptManager , ScriptManagerProxy, Timer, UpdatePanel, UpdateProgress...
ลองใส่รูป loading เพื่อความเท่
AjaxTest.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxTest.aspx.cs" Inherits="AjaxTest" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<asp:Image ID="Image1" ImageUrl="http://www.scharffenberger.com/images/loading.gif" runat="server" />
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</form>
</body>
</html>
AjaxTest.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class AjaxTest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Button1.Click += new EventHandler(Button1_Click);
UpdateProgress1.DisplayAfter = 100;
UpdateProgress1.Visible = true;
UpdateProgress1.DynamicLayout = true;
}
protected void Button1_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(300); //ของหน่วงเวลาจะได้เห็น
Label1.Text = DateTime.Now.ToLongTimeString();
}
}
Date :
2010-04-01 15:33:59
By :
tungman
ใส่ event การ update ใน UpdatePanel (ขอเปลี่ยนจาก button เป็น timer)
AjaxTest.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxTest.aspx.cs" Inherits="AjaxTest" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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:Timer ID="Timer1" Interval="1000" runat="server">
</asp:Timer>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<asp:Image ID="Image1" ImageUrl="http://www.scharffenberger.com/images/loading.gif" runat="server" />
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</form>
</body>
</html>
AjaxTest.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class AjaxTest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Timer1.Tick += new EventHandler<EventArgs>(Timer1_Tick);
UpdateProgress1.DisplayAfter = 100;
UpdateProgress1.Visible = true;
UpdateProgress1.DynamicLayout = true;
}
protected void Timer1_Tick(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(100); //ของหน่วงเวลาจะได้เห็น
Label1.Text = DateTime.Now.ToLongTimeString();
}
}
Date :
2010-04-01 15:39:26
By :
tungman
แบบมีหลาย UpdatePanel
TestTimeTick.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestTimeTick.aspx.cs" Inherits="TestTimeTick" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function pageLoad() {
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ShowBulletedList" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="ShowListBox" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<asp:Image ID="Image1" ImageUrl="http://www.scharffenberger.com/images/loading.gif" runat="server" />
</ProgressTemplate>
</asp:UpdateProgress>
<asp:Button ID="ShowBulletedList" runat="server" Text="Button" />
<asp:Button ID="ShowListBox" runat="server" Text="Button" />
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
</form>
</body>
</html>
TestTimeTick.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class TestTimeTick : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
UpdatePanel1.UpdateMode = UpdatePanelUpdateMode.Conditional; //เวลามี UpdatePanel หลายๆ อัน ก็สามารถระบุได้ว่าให้ update อันไหน
ShowBulletedList.Click += new EventHandler(ShowBulletedList_Click);
ShowListBox.Click += new EventHandler(ShowListBox_Click);
UpdateProgress1.DisplayAfter = 100;
UpdateProgress1.Visible = true;
UpdateProgress1.DynamicLayout = true;
UpdatePanel2.UpdateMode = UpdatePanelUpdateMode.Conditional; //เวลามี UpdatePanel หลายๆ อัน ก็สามารถระบุได้ว่าให้ update อันไหน
Button1.Click += new EventHandler(Button1_Click);
}
private ListItemCollection GetData()
{
ListItemCollection result = new ListItemCollection();
result.Add(new ListItem("Test 1"));
result.Add(new ListItem("Test 2"));
result.Add(new ListItem("Test 3"));
return result;
}
/// <summary>
/// Displaying the information in a BulletedList
/// </summary>
protected void ShowBulletedList_Click(object sender, EventArgs e)
{
//add controls ลง updatepanel แบบ dynamic
BulletedList blItems = new BulletedList();
foreach (ListItem item in GetData())
blItems.Items.Add(item);
UpdatePanel1.ContentTemplateContainer.Controls.Clear();
UpdatePanel1.ContentTemplateContainer.Controls.Add(blItems);
}
/// <summary>
/// Displaying the information in a ListBox
/// </summary>
protected void ShowListBox_Click(object sender, EventArgs e)
{
//add controls ลง updatepanel แบบ dynamic
ListBox lbItems = new ListBox();
lbItems.Width = 200;
lbItems.Height = 150;
foreach (ListItem item in GetData())
lbItems.Items.Add(item);
UpdatePanel1.ContentTemplateContainer.Controls.Clear();
UpdatePanel1.ContentTemplateContainer.Controls.Add(lbItems);
}
protected void Button1_Click(object sender, EventArgs e)
{
Label Label1 = new Label();
Label1.Text = DateTime.Now.ToLongTimeString();
UpdatePanel2.ContentTemplateContainer.Controls.Clear();
UpdatePanel2.ContentTemplateContainer.Controls.Add(Label1);
}
}
Date :
2010-04-01 15:43:18
By :
tungman
+1 จัดไป
เพิ่ม ASP.NET AJAX LIBRARY
มี control ให้ใช้เพียบ ลองโหลดมาดูครับ
Date :
2010-04-01 17:27:13
By :
numenoy
ยอดอีกแล้วครับพี่ tungman เอามาอีกนะครับของแบบนี้ รออ่านแต่ของพี่เลยผม
แต่ละอันนิดีๆๆทั้งนั้น อิๆ ทั้งเวลาพี่ Comment ด้วย ชอบๆ
Date :
2010-04-01 17:36:17
By :
chakrit021
มีข้อเสนอแนะ tungman logout แล้ว login ใหม่ จะได้ให้คะแนนได้
แล้วก็ตั้งเป็นกระทู้ อันเดียว แล้ว อัปเดท เอาเหมือนกระทู้ผม พอเยอะๆ เข้า เดี๋ยวพี่วินมาปักหมุนให้เอง
ปล. มีที่ง่ายกว่านี้นะ "ไม่ทำ"
Date :
2010-04-01 17:57:45
By :
plakrim
แบบว่าเสียดายอะครับ ได้ reply 888 แถมคะแนนยังเป็น spartan 300 อีก
หรือผมยึดมั่นถือมั่นมากเกินไปเนี่ย มันเป็นของนอกกายเนอะ ตายไปก็เอาไปไม่ได้
แต่ยังเสียดายอยู่ หูย สับสน สับสน สับสน สับสน
Date :
2010-04-01 20:00:36
By :
tungman
Load balance : Server 00