当前位置:   article > 正文

在WebForm项目中使用Web API_webform web api接口 视频

webform web api接口 视频

在WebForm项目中使用Web API

原文更新日期:2012.04.03

导航页面

http://blog.csdn.net/wf824284257/article/details/79475115

上一步

Web API 2 中 Action的返回值:
http://blog.csdn.net/wf824284257/article/details/79437495

开始

尽管 ASP.NET Web API 是跟 ASP.NET MVC 一起使用的,但在传统的WebForm项目中加入WebAPI也是非常简单的。这篇教程将会一步一步的带你学习。

概述

为了在WebForm项目中使用Web API,我们主要需要以下两步:

  1. 添加一个继承于 ApiController 的 Web API controller.

  2. 向 Application_Start 方法内添加一个路由表(route table)。

创建一个WebForm项目

打开 Visual Studio,从开始页面选择“新建项目”。或者从“文件”里面选择“新建”,再选择“项目”。

在项目模板窗口,左边选择已安装模板(Installed Templates),并展开C#节点。在C#节点下,选择Web,然后在项目模板列表中选择 ASP.NET WebForm项目(ASP.NET Web Forms Application)。输入项目名后点击确定。

######### 1

创建Model和Controller

这篇教程所使用的model以及ontroller的类名与《Web API 2 入门教程》相同。http://blog.csdn.net/wf824284257/article/details/79417272

首先,添加一个model。在解决方案资源管理器(Solution Explorer)中,右键点击项目名并选择“添加”->“类”,命名为“Product”,并添加4个属性:

public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
    public string Category { get; set; }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

接下来,向项目中添加一个 Web API controller,这个controller是一个用来处理Web API 的 HTTP请求的实体类。

在 Solution Explorer 中,右键点击项目名,选择“添加”->”新项”。

############ 2

在 已安装模板下,展开C# -> web 节点,然后从模板列表里面选择 Web API 控制器(Web API Controller Class),命名为“ProductsController” 并添加。

########### 3

VS将会创建一个名为 ProductsController.cs 的文件。将改文件中内容替换为以下内容:

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));
        }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42

若对以上代码不理解,可以阅读 《Web API 2入门教学》。http://blog.csdn.net/wf824284257/article/details/79417272

添加路由信息

接下来,我们将会添加一个uri路由规则,来将”/api/products/”路由到我们的controller。

在 Solution Explorer 中,双击Global.asax来打开它的后台代码文件Global.asax.cs。添加以下using:

using System.Web.Http;
  • 1

将以下代码添加到 Application_Start 方法中:

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

要想了解更多关于路由表(routing tables)的信息,可以阅读:
https://docs.microsoft.com/en-us/aspnet/web-api/overview/web-api-routing-and-actions/routing-in-aspnet-web-api

添加客户端的AJAX

为了让客户端可以访问我们创建的web API,添加AJAX请求是必需的。现在让我们添加一个HTML页面,并使用JQuery来调用我们的web API。

确认一下你的母版页(master page),比如Site.Master,包含了一个ID=“HeadContent” 的 ContentPlaceHolder。

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

打开 Default.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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

然后,在HeaderContent里添加对JQuery的引用:

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
</asp:Content>
  • 1
  • 2
  • 3
注意:你可以直接从 Solution Explorer中将需要引用的文件拖放到HTML的代码编辑页面,这样就可以简单的完成对该文件的引用了。

######## 4

将以下脚本添加到HTML页面上JQuery引用下面:

<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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

当页面文件加载时,这段脚本将会创建一个AJAX请求到 “api/products”。 这个请求的返回结果是JSON格式表示的产品列表(a list of products)。之后由这段脚本将产品信息添加到HTML页面的table中。
当你运行这个应用程序时,你应该会看到这样的页面:

########## 5

下一步

为ASP.NET Web API 创建帮助页面
http://blog.csdn.net/wf824284257/article/details/79462983

结束

本文为微软官方文档的个人译文。本译文的非商用转载请注明地址及作者,感谢。禁止商用转载。若经发现,将依法追究责任。
英文原文地址:https://docs.microsoft.com/en-us/aspnet/web-api/overview/getting-started-with-aspnet-web-api/using-web-api-with-aspnet-web-forms
原文作者: MikeWasson and Other 3 Contributors
主作者链接:https://github.com/MikeWasson
作者尊重微软公司的知识产权,若贵公司认为该博客有损贵公司利益,请联系作者删除
译者:大吴凡 http://dawufan.cn

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/神奇cpp/article/detail/885592
推荐阅读
  

闽ICP备14008679号