ASP.NET 웹 양식과 Web API 사용Using Web API with ASP.NET Web Forms

Mike Wassonby Mike Wasson

이 자습서에서는 ASP.NET 4.x에서 기존 ASP.NET Web Forms 응용 프로그램에 Web API를 추가 하는 단계를 안내 합니다.This tutorial walks you through the steps to add Web API to a traditional ASP.NET Web Forms application in ASP.NET 4.x.

개요Overview

ASP.NET Web API는 ASP.NET MVC를 사용 하 여 패키지 되지만 기존 ASP.NET Web Forms 응용 프로그램에 Web API를 쉽게 추가할 수 있습니다.Although ASP.NET Web API is packaged with ASP.NET MVC, it is easy to add Web API to a traditional ASP.NET Web Forms application.

Web Forms 응용 프로그램에서 Web API를 사용 하려면 두 가지 주요 단계가 있습니다.To use Web API in a Web Forms application, there are two main steps:

  • ApiController 클래스에서 파생 되는 Web API 컨트롤러를 추가 합니다.Add a Web API controller that derives from the ApiController class.
  • 응용 프로그램_Start 메서드에 경로 테이블을 추가 합니다.Add a route table to the Application_Start method.

Web Forms 프로젝트 만들기Create a Web Forms Project

Visual Studio를 시작 하 고 시작 페이지에서 새 프로젝트 를 선택 합니다.Start Visual Studio and select New Project from the Start page. 또는 파일 메뉴에서 새로 만들기 , 프로젝트를 차례로 선택 합니다.Or, from the File menu, select New and then Project.

템플릿 창에서 설치 된 템플릿 을 선택 하 고 C# 시각적 노드를 확장 합니다.In the Templates pane, select Installed Templates and expand the Visual C# node. 시각적 개체 C# 에서 을 선택 합니다.Under Visual C#, select Web. 프로젝트 템플릿 목록에서 ASP.NET Web Forms 응용 프로그램을 선택 합니다.In the list of project templates, select ASP.NET Web Forms Application. 프로젝트의 이름을 입력 하 고 확인을 클릭 합니다.Enter a name for the project and click OK.

모델 및 컨트롤러 만들기Create the Model and Controller

이 자습서에서는 시작 자습서와 동일한 모델 및 컨트롤러 클래스를 사용 합니다.This tutorial uses the same model and controller classes as the Getting Started tutorial.

먼저 모델 클래스를 추가 합니다.First, add a model class. 솔루션 탐색기에서 프로젝트를 마우스 오른쪽 단추로 클릭 하 고 클래스 추가를 선택 합니다.In Solution Explorer, right-click the project and select Add Class. 클래스 이름을 Product로, 다음 구현을 추가 합니다.Name the class Product, and add the following implementation:

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

그런 다음 프로젝트에 웹 API 컨트롤러를 추가 합니다. 컨트롤러 는 web api에 대 한 HTTP 요청을 처리 하는 개체입니다.Next, add a Web API controller to the project., A controller is the object that handles HTTP requests for Web API.

솔루션 탐색기에서 프로젝트를 마우스 오른쪽 단추로 클릭합니다.In Solution Explorer, right-click the project. 새 항목 추가를 선택 합니다.Select Add New Item.

설치 된 템플릿에서 C# Visual 을 확장 하 고 을 선택 합니다.Under Installed Templates, expand Visual C# and select Web. 그런 다음 템플릿 목록에서 WEB API 컨트롤러 클래스를 선택 합니다.Then, from the list of templates, select Web API Controller Class. 컨트롤러 이름을 "ProductsController"로 하 고 추가를 클릭 합니다.Name the controller "ProductsController" and click Add.

새 항목 추가 마법사에서 이름이 ProductsController.cs 인 파일을 만듭니다.The Add New Item wizard will create a file named ProductsController.cs. 마법사에 포함 된 메서드를 삭제 하 고 다음 메서드를 추가 합니다.Delete the methods that the wizard included and add the following methods:

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));
        }
    }
}

이 컨트롤러의 코드에 대 한 자세한 내용은 초보자 를 위한 자습서를 참조 하세요.For more information about the code in this controller, see the Getting Started tutorial.

라우팅 정보 추가Add Routing Information

다음으로,/api/products/" "폼의 Uri가 컨트롤러로 라우팅되도록 URI 경로를 추가 합니다.Next, we'll add a URI route so that URIs of the form "/api/products/" are routed to the controller.

솔루션 탐색기에서 global.asax를 두 번 클릭 하 여 코드 Global.asax.cs 파일을 엽니다.In Solution Explorer, double-click Global.asax to open the code-behind file Global.asax.cs. 다음 using 문을 추가 합니다.Add the following using statement.

using System.Web.Http;

그런 다음 응용 프로그램_Start 메서드에 다음 코드를 추가 합니다.Then add the following code to the Application_Start method:

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

라우팅 테이블에 대 한 자세한 내용은 ASP.NET Web API 라우팅을 참조 하세요.For more information about routing tables, see Routing in ASP.NET Web API.

클라이언트 쪽 AJAX 추가Add Client-Side AJAX

클라이언트에서 액세스할 수 있는 web API를 만들어야 합니다.That's all you need to create a web API that clients can access. 이제 jQuery를 사용 하 여 API를 호출 하는 HTML 페이지를 추가 해 보겠습니다.Now let's add an HTML page that uses jQuery to call the API.

마스터 페이지 (예: site.master)에 ID="HeadContent"ContentPlaceHolder 포함 되어 있는지 확인 합니다.Make sure your master page (for example, Site.Master) includes a ContentPlaceHolder with ID="HeadContent":

<asp:ContentPlaceHolder runat="server" ID="HeadContent"></asp:ContentPlaceHolder>

Default.aspx 파일을 엽니다.Open the file Default.aspx. 다음과 같이 주 콘텐츠 섹션에 있는 상용구 텍스트를 바꿉니다.Replace the boilerplate text that is in the main content section, as shown:

<%@ 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 소스 파일에 대 한 참조를 추가 합니다.Next, add a reference to the jQuery source file in the HeaderContent section:

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

참고: 솔루션 탐색기 파일을 코드 편집기 창으로 끌어서 놓아 스크립트 참조를 쉽게 추가할 수 있습니다.Note: You can easily add the script reference by dragging and dropping the file from Solution Explorer into the code editor window.

JQuery 스크립트 태그 아래에 다음 스크립트 블록을 추가 합니다.Below the jQuery script tag, add the following script block:

<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/>', { html: row })  // Append the name.
                        .appendTo($('#products'));
                });
            });
        }

        $(document).ready(getProducts);
</script>

문서가 로드 되 면이 스크립트는 "api/products"에 대 한 AJAX 요청을 만듭니다.When the document loads, this script makes an AJAX request to "api/products". 요청은 제품 목록을 JSON 형식으로 반환 합니다.The request returns a list of products in JSON format. 스크립트는 HTML 테이블에 제품 정보를 추가 합니다.The script adds the product information to the HTML table.

응용 프로그램을 실행 하는 경우 다음과 같이 표시 됩니다.When you run the application, it should look like this: