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

在這篇文章中

1. 概觀
2. 建立Web窗體項目
3. 建立模型和控制器
4. 添加路由信息
5. 添加客戶端AJAX

做者：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表中。

運行應用程序時，應該以下所示：