ASP.NET 使用 AjaxPro 實現前端跟後台互動

來源:互聯網
上載者:User

標籤:conf   需要   float   register   擷取   託管管道模式   chrome   第一次用   isp   

使用 AjaxPro 進行互動,很多人都寫過文章了,為什麼還要繼續老生常談呢。因為有一些細節上的東西我們需要注意,因為這些細節如果不注意的話,那麼程式會報錯,而且維護性較差。

引言

一.首先,還是那句話,欲練神功,必先自宮。我們開發程式第一步首先是搭建環境。

 

  啟動Visual Studio ,我的版本是2012啊,不過這個不影響的。先建立一個網站項目, 在項目中加入 Bin 目錄,再添加一個 Index 頁面。

  然後,我們需要去網上下載 AjaxPro.2.dll 百度一下就一堆連結,這裡我就不多說什麼了。然後把下載到的 AjaxPro.2.dll 的檔案複製或引入到 Bin 目錄中。接著,在 Web.config 的 <system.web> 標籤下寫入以下內容。

 

1 <httpHandlers>2    <add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/>3 </httpHandlers>

  並且在伺服器後台類中,作以下修改:

1 using AjaxPro;2 //(1)3 4 AjaxPro.Utility.RegisterTypeForAjax(typeof(Index));5 //(2)6 7 [AjaxPro.AjaxMethod]8 //(3)

(1):引入 AjaxPro 命名空間

(2):註冊類資訊到前台頁面

(3):每個前台頁面需要調用的函數前面加上這個

 

 

  這裡我這有個執行個體,注意一點:在 Page_Load() 函數當中,使用了一個判斷。 if(Page.IsCallback) 它的作用是它 獲得一個值,表示頁面請求是否是回調的結果。它的一個特殊的回傳,所以往返總是發生;但是,與傳統的回傳不同,指令碼回調不會重繪整個頁面。 這是在別的博主那裡爬來的,這是原文,也是個人的一個小編程習慣,我也不知道具體有什麼用,但是我就是知道有用。

   以上,咱們就把這個 AjaxPro.2 環境搭建完了。

二. 接著,就開始調用了。

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Index.aspx.cs" Inherits="Index" %> 2  3 <!DOCTYPE html> 4  5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head runat="server"> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 8     <title>AjaxPro.2.dll</title> 9     <script>10         11         function show() {12             //(1)       13             var name = Index.getName().value;14             alert("My Name is :" + name);15 16         }17 18     </script>19 </head>20 <body>21     <form id="form1" runat="server">22     <div>23         <input type="button" value="show" onclick="show()" />24     </div>25     </form>26 </body>27 </html>

  (1)這裡, Index 是這個類的類名,不知道還記不記得。咱們寫過這樣一段代碼 AjaxPro.Utility.RegisterTypeForAjax(typeof(Index)); 在配置環境的時候申明的類名。前端頁面也是通過這個找到我們的類的。.value 也是一個重點,我記的我第一次用這個外掛程式的時候。返回一個 Password 判斷是否登陸成功,一直都是失敗,這個外掛程式頁面用日誌資訊,我就只能一個一個 alert 終於讓我抓著了,如果這裡不用 value 會擷取很多實際應用用不上的資訊,這裡需要注意。

  1)以為這樣就可以調用成功了?太天真了,這裡咱們說第一個細節:改變項目的託管管道模式

按一下滑鼠選中這個項目,然後按 F4 鍵,會出現這個項目的屬性。將這個屬性改成傳統型,就行了。如果是整合,則會報 500.23 

2) 還有一點,也是一個錯誤。這種錯誤編譯時間不會出錯,載入頁面時也不出錯。只有調用到 AjaxPro.2 的是時候才報錯 Uncaught ReferenceError: Index is not defined 當調用後台代碼的不起作用時就需要注意是否是這個問題,因為這個報錯它不會出現在頁面,也不會被編譯。想要看到這個錯誤,必須按 F12 頁面調試,我知道 Google Chrome 瀏覽器 的錯誤顯示在 Console 選項卡當中,其他瀏覽器博主就不是特別清楚了。

  這個錯誤的原因啊,博主也查了許多資料,但是很少有具體的描述。這裡博主也只能做一個博主自己的總結,如果有人知道哪裡有錯誤,希望各位能積極指正(別客氣,互相進步啊!!)。博主的分析呢,就是因為搭建環境時,又什麼地方出了問題。 搭建環境博主剛剛也在前文中講的比較清楚了,如果出現這個錯誤,應該有 7 成是這個原因。

3)這也是一個博主告訴我的細節啊!他這麼說的:調用的時候,不一定要用聲明的那個類名喔。可以使用  [AjaxNamespace("DEMO")]  這個標籤,對這個類進行重新命名。博主試了一下,確實是可以的。把這個標籤放在被調用的類前面,記得是類前面哦。就可以了。

  可以看到,效果是實現了的!這個標籤還是非常實用的。

  非常感謝大家觀看,也希望各位對博主以上所述的有任何錯誤指正,請評論告訴我。我會及時驗證並修改,希望不要誤導他人。非常感謝!

  

 

 

 

 

 

 

ASP.NET 使用 AjaxPro 實現前端跟後台互動

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.