2012年3月7日 星期三

ASP使用AJAX

AJAX在VS2008+有工具可以使用
只要拉好工具
就可以很簡單的做到AJAX效果

簡單的使用ScriptManagerUpdatePanel來達到我們基本AJAX需求

ScriptManager
MSDN說明:針對 Web 和應用程式服務的 ASP.NET AJAX 指令碼程式庫和指令碼檔、部分網頁的呈現作業和用戶端 Proxy 類別的產生作業進行管理。
詳細說明請參閱MSDN
.net 3.5
http://msdn.microsoft.com/zh-tw/library/system.web.ui.scriptmanager(v=vs.90).aspx
.net 4.0
http://msdn.microsoft.com/zh-tw/library/system.web.ui.scriptmanager.aspx


UpdatePanel
MSDN說明:在不使用回傳的情況下,啟用網頁區段的部分呈現。
詳細說明請參閱MSDN
.net 3.5
http://msdn.microsoft.com/zh-tw/library/bb359258(v=vs.90).aspx

.net 4.0
http://msdn.microsoft.com/zh-tw/library/bb359258.aspx

在UpdatePanel前面一定要先拉好ScriptManager
要拉的原件需包覆於<ContentTemplate></ContentTemplate>
<asp:ScriptManager ID="ScriptManager1" runat="server">
  </asp:ScriptManager>

  <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
      /*放入要達成AJAX的原件*/
    </ContentTemplate>
  </asp:UpdatePanel>

如果要在點選Button後於Label顯示TextBox所輸入的值
點Button後會有頁面刷新的情況
protected void Button1_Click(object sender, EventArgs e)
  {
    Label1.Text = TextBox1.Text;
  }

  <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
  <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
  <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

加上ScriptManager與UpdatePanel
再來測試看看
是不是不會刷新了
<asp:ScriptManager ID="ScriptManager1" runat="server">
  </asp:ScriptManager>
  <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
      <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
      <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
      <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </ContentTemplate>
  </asp:UpdatePanel>

真是簡單方便的設計
快去試試看吧

PS:
這幾天拿之前做的網站來玩AJAX
發現到
aspx有參考ascx或套用master
瀏覽aspx看起來就只是一個頁面
邏輯上也是通的
但執行結果卻是無法得到我們想要的
除錯到最後
得到的結論是
當我們點選參考或套用頁面上的原件是無法在我們的aspx上做到AJAX
以上個人遇到的問題與想法
如果有錯請不要炮我(小弟閃避率高達100%)
有更好的做法或見解歡迎交流^^

回aspnet目錄
回首頁

沒有留言 :

張貼留言

Related Posts Plugin for WordPress, Blogger...