Web API 2 入門——使用Web API與ASP.NET Web窗體(谷歌翻譯)


作者:Mike Wasson

雖然ASP.NET Web API與ASP.NET MVC打包在一起,但很容易將Web API添加到傳統的ASP.NET Web窗體應用程序中。本教程將引導您完成步驟。

概觀

要在Web窗體應用程序中使用Web API,有兩個主要步驟:

  • 添加從ApiController派生的Web API控制器
  • Application_Start方法添加路由表

創建Web窗體項目

啟動Visual Studio並從“ 開始”頁面選擇“ 新建項目 ” 或者,從文件菜單中選擇新建,然后選擇項目

在“ 模板”窗格中,選擇“ 已安裝的模板”並展開Visual C#節點。Visual C#下,選擇Web在項目模板列表中,選擇ASP.NET Web窗體應用程序輸入項目的名稱,然后單擊確定

2

創建模型和控制器

本教程使用與入門教程相同的模型和控制器類

首先,添加一個模型類。解決方案資源管理器中,右鍵單擊項目並選擇添加類命名產品類,並添加以下實現:

C#
public class Product { public int Id { get; set; } public string Name { get; set; } public decimal Price { get; set; } public string Category { get; set; } } 

接下來,將Web API控制器添加到項目中。控制器是處理Web API HTTP請求的對象。

解決方案資源管理器中,右鍵單擊項目。選擇添加新項目

已安裝的模板下,展開Visual C#並選擇Web然后,從模板列表中選擇Web API Controller Class命名控制器“ProductsController”,然后單擊添加

“ 添加新項目”向導將創建一個名為ProductsController.cs的文件。刪除向導包含的方法並添加以下方法:

C#
namespace WebForms { using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Http; using System.Web.Http; public class ProductsController : ApiController { Product[] products = new Product[] { new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 }, new Product { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M }, new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M } }; public IEnumerable<Product> GetAllProducts() { return products; } public Product GetProductById(int id) { var product = products.FirstOrDefault((p) => p.Id == id); if (product == null) { throw new HttpResponseException(HttpStatusCode.NotFound); } return product; } public IEnumerable<Product> GetProductsByCategory(string category) { return products.Where( (p) => string.Equals(p.Category, category, StringComparison.OrdinalIgnoreCase)); } } } 

有關此控制器中的代碼的更多信息,請參閱入門教程。

添加路由信息

接下來,我們將添加一個URI路由,以便將“/ api / products /”形式的URI路由到控制器。

解決方案資源管理器中,雙擊Global.asax以打開代碼隱藏文件Global.asax.cs。添加以下using語句。

C#
using System.Web.Http; 

然后將以下代碼添加到Application_Start方法中:

C#
RouteTable.Routes.MapHttpRoute(
    name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = System.Web.Http.RouteParameter.Optional } ); 

有關路由表的更多信息,請參閱ASP.NET Web API中的路由

添加客戶端AJAX

這就是創建一個客戶端可以訪問的Web API所需要的。現在我們來添加一個使用jQuery調用API的HTML頁面。

打開文件Default.aspx。更換主內容部分中的樣板文本,如圖所示:

ASPX
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebForms._Default" %> <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> </asp:Content> <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> <h2>Products</h2> <table> <thead> <tr><th>Name</th><th>Price</th></tr> </thead> <tbody id="products"> </tbody> </table> </asp:Content> 

接下來,在該HeaderContent部分中添加對jQuery源文件的引用

ASPX
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">  <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> </asp:Content> 

注意:您可以通過將解決方案資源管理器中的文件拖放到代碼編輯器窗口中來輕松添加腳本引用

1

在jQuery腳本標記下面添加以下腳本塊:

HTML
<script type="text/javascript"> function getProducts() { $.getJSON("api/products", function (data) { $('#products').empty(); // Clear the table body. // Loop through the list of products. $.each(data, function (key, val) { // Add a table row for the product. var row = '<td>' + val.Name + '</td><td>' + val.Price + '</td>'; $('<tr/>', { text: row }) // Append the name. .appendTo($('#products')); }); }); } $(document).ready(getProducts); </script> 

當文檔加載時,此腳本會向“api / products”發出AJAX請求。該請求返回JSON格式的產品列表。該腳本將產品信息添加到HTML表中。

運行應用程序時,應該如下所示:

 

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com