Web API與AJAX:理解FormBody和 FormUri的WebAPI中的屬性


這是這一系列文章"與 AJAX 的 Web API"。在這一系列我們都解釋消耗 Web API rest 風格的服務使用 jQuery ajax() 和其他方法的各種方法。您可以閱讀我們以前的演示文稿,請訪問下面的文章:

這條 exlains 的"FormBody"和"FormUri"屬性以及如何使用它們的操作參數與消費上的客戶端的數據。所以,讓我們舉個例子。

 

使用 FromUri 屬性來發送數據

 

使用 FormUri 屬性,我們可以將數據傳遞通過的 URI URL。值應以鍵值對的形式。下面是一個示例,通過一個 URI 發送數據。在此示例中我們發送一個字符串通過 URL。參數的名稱是"名稱"。

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="APICall.aspx.cs" Inherits="WebApplication1.APICall" %>  
  2.   
  3. <head runat="server">  
  4.   
  5.     <script src="jquery-1.7.1.js" type="text/javascript"></script>  
  6.   
  7.      <script>  
  8.   
  9.          $(document).ready(function () {  
  10.   
  11.              $("#Save").click(function () {  
  12.   
  13.                   
  14.   
  15.                  $.ajax({  
  16.   
  17.                      url: 'http://localhost:3413/api/person?Name=Sourav',  
  18.   
  19.                      type: 'POST',  
  20.   
  21.                      dataType: 'json',  
  22.   
  23.                      success: function (data, textStatus, xhr) {  
  24.   
  25.                          console.log(data);  
  26.   
  27.                      },  
  28.   
  29.                      error: function (xhr, textStatus, errorThrown) {  
  30.   
  31.                          console.log('Error in Operation');  
  32.   
  33.                      }  
  34.   
  35.                  });  
  36.   
  37.              });  
  38.   
  39.          });  
  40.   
  41.     </script>  
  42.   
  43. </head>  
  44.   
  45. <body>  
  46.   
  47.     <form name="form1" id="form1">  
  48.   
  49.         <input type="button" id="Save" value="Save Data" />  
  50.   
  51.     </form>  
  52.   
  53. </body>  
  54.   
  55. </html>  

很明顯有在此方法中的某些限制。某些瀏覽器中的 URL 的長度是 256 個字符的限制和可能存在的安全漏洞。

 

配置 Web API 從 URI 獲取數據

 

現在我們需要配置 Web API 從 URI 中提取數據。我們已推行一項行動命名為"PostAction",將一個參數,並具有 FromUri 屬性指定該參數。這意味着名稱參數的值將通過 URI。這里是工作守則的執行。

  1. using System;  
  2.   
  3. using System.Collections.Generic;  
  4.   
  5. using System.Linq;  
  6.   
  7. using System.Net;  
  8.   
  9. using System.Net.Http;  
  10.   
  11. using System.Web.Http;  
  12.   
  13.    
  14.   
  15. namespace WebApplication1.WebAPI  
  16.   
  17. {  
  18.   
  19.    
  20.   
  21.     public class personController : ApiController  
  22.   
  23.     {  
  24.   
  25.         [HttpPost]  
  26.   
  27.         public String PostAction([FromUri] string Name)  
  28.   
  29.         {  
  30.   
  31.             return "Post Action";  
  32.   
  33.         }  
  34.   
  35.    
  36.   
  37.     }  
  38.   
  39. }  

我們有一個停止的應用程序,以檢查是否所的數據來和它來。

注:我們可以在一個單一的 URI 傳遞多個參數。

Configure Web-API to get data from URI

 

獲取數據使用 FromBody 屬性

 

這是另一種方式,在 ajax() 調用獲取數據。在此示例中,我們將看到如何使用 FromBody 屬性的數據。看一看下面的示例。在這里是要發送數據的 ajax() 函數的實現。看一看 ajax() 函數的數據參數。我們看到使用鍵值對的值被傳遞的數據,但關鍵部分是空的。我們使用 FormBody 屬性的接收數據感興趣的時候我們應該保持為空的關鍵部分。

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="APICall.aspx.cs" Inherits="WebApplication1.APICall" %>  
  2.   
  3. <head runat="server">  
  4.   
  5.     <script src="jquery-1.7.1.js" type="text/javascript"></script>  
  6.   
  7.      <script>  
  8.   
  9.          $(document).ready(function () {  
  10.   
  11.              $("#Save").click(function () {  
  12.   
  13.                   
  14.   
  15.                  $.ajax({  
  16.   
  17.                      url: 'http://localhost:3413/api/person',  
  18.   
  19.                      type: 'POST',  
  20.   
  21.                      dataType: 'json',  
  22.   
  23.                      data:{"":"Sourav Kayal"},  
  24.   
  25.                      success: function (data, textStatus, xhr) {  
  26.   
  27.                          console.log(data);  
  28.   
  29.                      },  
  30.   
  31.                      error: function (xhr, textStatus, errorThrown) {  
  32.   
  33.                          console.log('Error in Operation');  
  34.   
  35.                      }  
  36.   
  37.                  });  
  38.   
  39.    
  40.   
  41.    
  42.   
  43.              });  
  44.   
  45.          });  
  46.   
  47.     </script>  
  48.   
  49. </head>  
  50.   
  51. <body>  
  52.   
  53.         <input type="button" id="Save" value="Save Data" />  
  54.   
  55. </body>  
  56.   
  57. </html>  

現在我們需要配置 Web API 操作接收使用 FromBody 屬性的值。請參閱人控制器中的"PostAction"的操作。我們將看到用 FromBody 屬性指定 Name 參數。

  1. using System;  
  2.   
  3. using System.Collections.Generic;  
  4.   
  5. using System.Linq;  
  6.   
  7. using System.Net;  
  8.   
  9. using System.Net.Http;  
  10.   
  11. using System.Web.Http;  
  12.   
  13.    
  14.   
  15. namespace WebApplication1.WebAPI  
  16.   
  17. {  
  18.   
  19.     public class person  
  20.   
  21.     {  
  22.   
  23.         public string name { get; set; }  
  24.   
  25.         public string surname { get; set; }  
  26.   
  27.     }  
  28.   
  29.    
  30.   
  31.     public class personController : ApiController  
  32.   
  33.     {  
  34.   
  35.         [HttpPost]  
  36.   
  37.         public String PostAction([FromBody] String Name)  
  38.   
  39.         {  
  40.   
  41.             return "Post Action";  
  42.   
  43.         }  
  44.   
  45.    
  46.   
  47.     }  
  48.   
  49. }  
 
Get data using FromBody attribute

我們看到值從 ajax() 函數來在 POST 操作的時間。

 

是允許多個 FormBody 屬性嗎?

 

是,多個 formBodys 不允許在單個操作中。換句話說,我們不能在單個操作中指定多個 FromBody 參數。在這里是操作的不正確實現的示例:

  1. using System;  
  2.   
  3. using System.Collections.Generic;  
  4.   
  5. using System.Linq;  
  6.   
  7. using System.Net;  
  8.   
  9. using System.Net.Http;  
  10.   
  11. using System.Web.Http;  
  12.   
  13.    
  14.   
  15. namespace WebApplication1.WebAPI  
  16.   
  17. {  
  18.   
  19.     public class personController : ApiController  
  20.   
  21.     {  
  22.   
  23.         [HttpPost]  
  24.   
  25.         public String PostAction([FromBody]string name, [FromBody] string surname)  
  26.   
  27.         {  
  28.   
  29.             return "";  
  30.   
  31.         }  
  32.   
  33.    
  34.   
  35.     }  
  36.   
  37. }  

 

結論

 

這篇文章有 exlaind FromUri 和 FromBody 從 jQuery ajax() 函數接收一個值的概念。我希望你理解了,你將會在您下一次的 AJAX 調用中實現它。在以后的文章中,我們將探討幾個有趣的事實。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM