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 调用中实现它。在以后的文章中，我们将探讨几个有趣的事实。

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/Jeely/p/10958825.html