使用 ASP.Net WebAPI 和 Web Forms

Asp.Net WebAPI 是一个用于构建 RESTful HTTP 服务的框架，可用于广泛的客户端，包括 Web、手机和桌面应用程序。使用 WebAPI，我们可以使用 XML 和 JSON 从服务发送和检索数据。Json 或 XML 的使用使其非常灵活，可用于各种设备。 

尽管 WebAPI 与 ASP.Net MVC 4 一起发布和安装，但它也可以在普通的 Web Forms 应用程序中使用。

在此示例中，我们将把 WebAPI 与传统的 Web Forms 应用程序结合使用，以添加和显示用户信息的列表。我们将使用 Visual Studio 2012 和 .Net 4.5。 

创建项目

打开 Visual Studio 2012，转到新建 -> 项目。从左侧导航中选择 Visual C# -> Web，然后选择项目类型为ASP.Net Web Forms Application。输入项目名称为WebAPIDemo

将创建一个具有默认模板的新项目，我们的解决方案将显示以下结构

添加模型类

然后，我们将向我们的项目添加一个模型类。模型类将表示我们应用程序中的数据。我们将向我们的项目添加一个名为 Users 的模型类

在解决方案资源管理器中右键单击项目，从上下文菜单中选择添加 -> 类。类名将是“Users”，它将具有以下属性

namespace WebAPIDemo
{
    public class Users
    {
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Company { get; set; }
        public string Email { get; set; }
        public string PhoneNo { get; set; }
    }
}

WebAPI 可以自动将模型序列化为 JSON 或 XML 对象，并将数据写入 HTTP 响应的正文中。如果客户端可以读取序列化数据，它们将能够反序列化它。大多数客户端都能读取 XML 或 JSON 数据。客户端还可以通过在请求消息中设置“Accept Header”属性来指定它想要的格式。

创建存储库

理想情况下，在生产场景中，我们应该将数据存储在某种持久性存储中，如数据库，但为了使此演示简单化，我们将将其存储在本地内存中。

为了将我们的存储实现与应用程序代码分开，我们将使用存储库模式。这样，我们就可以在不更改大量应用程序代码的情况下，在未来更改我们的存储实现。

我们将首先创建一个通用的存储库接口。向项目添加一个新类，并将其命名为“IUserRepository”。它将包含以下代码

namespace WebAPIDemo
{
    public interface IUserRepository
    {
        IEnumerable<Users> GetAllUsers();
        string AddUser(Users user);
        Users GetUserById(int id);
        void DeleteUser(int id);
    }
}

“GetAllUsers”函数返回所有用户的列表。“AddUser”函数将添加一个新用户，“GetUserById”将根据传入的 ID 返回特定用户。

向解决方案添加一个名为“UserRepository”的类。该类将实现“IUserRepository”，并将具有以下实现。

namespace WebAPIDemo
{
    public class UserRepository : IUserRepository
    {
        private List<Users> userList = new List<Users>();
        private int _id = 3;
        public UserRepository()
        {
 userList.Add(new Users { Id = 1, FirstName = "Madhur", LastName = "Kapoor", Company = "ABC", Email = "madhur@abc.com", PhoneNo = "65431546" });
userList.Add(new Users { Id = 2, FirstName = "Alan", LastName = "Wake", Company = "XYZ Corp", Email = "alan@xyz.com", PhoneNo = "64649879" });
        }
        public IEnumerable<Users> GetAllUsers()
        {
            return userList;
        }
        public string AddUser(Users user)
        {
            user.Id = _id++;
            userList.Add(user);
            return "User added";
        }
        public Users GetUserById(int id)
        {
            var user = userList.FirstOrDefault<Users>((p) => p.Id == id);
            if (user == null)
            {
                throw new HttpResponseException(HttpStatusCode.NotFound);
            }
            return user;
        }
        public void DeleteUser(int id)
        {
            var user = userList.FirstOrDefault((p) => p.Id == id);

            if (user == null)
            {
                throw new HttpResponseException(HttpStatusCode.NotFound);
            }

            userList.Remove(user);
        }
    }

在类中，我们使用一个本地变量“userList”来存储所有用户。在构造函数中，我们向列表中添加了一些记录。

“AddUser”函数将新用户及其新 ID 添加到列表中。

“GetUserByID”函数使用 LINQ 查询来返回具有指定 ID 的用户。如果找不到用户，将抛出HTTPResponseException，浏览器会将其解释为“404”错误。

您需要为 HttpResponseException 类添加对“System.Web.Http”的引用才能正常工作。

创建 WebAPI 控制器

现在，我们将向解决方案添加一个 WebAPI 控制器。WebAPI 控制器是一个处理客户端 HTTP 请求的类。WebAPI 控制器与 MVC 控制器类似，只是它们派生自“ApiController”类，而不是“Controller”类。

右键单击解决方案，选择添加 -> Web API Controller Class。将控制器类命名为“UserController”。

控制器类将具有一些用于 Get、Put、Delete 等的默认函数。删除这些函数并添加以下函数，以便代码如下所示

namespace WebAPIDemo
{
    public class UserController : ApiController
    {
        static IUserRepository repository = new UserRepository();

        public IEnumerable<Users> GetAllUsers()
        {
            var users = repository.GetAllUsers();
            return users;
        }

        public Users GetUserById(int id)
        {
            var user = repository.GetUserById(id);
            return user;
        }
        public string AddUser(Users user)
        {  var response = repository.AddUser(user);
            return response;
        }
        public void DeleteUser(int id)
        {
            repository.DeleteUser(id);
        }
    }
}

在 Global.asax 中添加路由

为了让控制器处理特定类型的请求，我们必须在Global.asax文件中定义一个路由。

打开 global.asax 文件，并在“Application_Start”方法中添加以下代码

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

控制器现在将能够处理“api/User/”类型的请求

测试 WebAPI

现在，我们将通过在浏览器中运行它来测试我们的 WebAPI。通过按“Ctrl + F5”或从 Visual Studio 菜单转到“调试 -> 开始调试”来运行 Web 应用程序。

运行应用程序后，将打开“Default.aspx”页面。URL 类似于https://:56851/Default.aspx，其中56851将是端口号。

要测试 WebAPI，我们必须使用路由中定义的 URL。在浏览器中输入以下 URLhttps://:56851/api/User/（将 56851 替换为您的端口号）

结果将取决于您使用的浏览器类型。在 Internet Explorer 中，您将被提示保存一个名为“User”的文件。

该文件包含 Http 响应。选择“打开”，然后在“打开方式”对话框中，选择“记事本”打开文件。

记事本将显示 WebAPI 返回的 JSON 格式数据。

[{"Id":1,"FirstName":"Madhur","LastName":"Kapoor","Company":"ABC","Email":"madhur@abc.com","PhoneNo":"65431546"},{"Id":1,"FirstName":"Alan","LastName":"Wake","Company":"XYZ Corp","Email":"alan@xyz.com","PhoneNo":"64649879"}]

如果您使用的是 Chrome 或 Firefox，您很可能会看到数据的 XML 表示形式。这是因为 Internet Explorer 和 Firefox 发送的请求标头不同“Accept Header”，因此 WebAPI 返回的内容类型也不同。

如果您使用的是带有开发人员工具的 Internet Explorer，您可以检查浏览器发送的请求标头。

只需按 F12 打开开发人员工具，转到网络选项并启用“开始捕获”，然后打开开发人员工具，在浏览器中输入 WebAPI URL 并按 Enter

如果您使用以下 URL“ https://:56851/api/User/1（将 56851 替换为您的端口号）”

它将返回 ID 为“1”的用户。输入不存在的 ID 将导致“页面未找到”错误。

使用 JQuery 调用 WebAPI

现在，我们将使用 JQuery 调用 WebAPI，并将结果显示在网页上。

在“Default.aspx”文件中，我们将使用以下代码来显示数据的主体部分

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<h2>My Address Book</h2>
    <br />
    <table>
        <thead>
            <tr>
                <td>Id</td>
                <td>Full Name</td>
                <td>Company</td>
                <td>Phone</td>
                <td>Email</td>
            </tr>
        </thead>
        <tbody id="usersection">
        </tbody>
    </table>
    <br />
    <br />
        <h2> Add A Contact</h2>
        <table>
        <tr>
            <td>First Name</td>
            <td>
                <asp:TextBox runat="server" ID="txtFirstName" /></td>
        </tr>
        <tr>
            <td>Last Name</td>
            <td>
                <asp:TextBox runat="server" ID="txtLastName" /></td>
        </tr>
        <tr>
            <td>Company</td>
            <td>
                <asp:TextBox runat="server" ID="txtCompany" /></td>
        </tr>
        <tr>
            <td>Phone</td>
            <td>
                <asp:TextBox runat="server" ID="txtPhone" /></td>
        </tr>
        <tr>
            <td>Email</td>
            <td>
                <asp:TextBox runat="server" ID="txtEmail" /></td>
        </tr>
        <tr>
            <td>
                <asp:Button Text="Save" runat="server" ID="btnSave"  />
            </td>
        </tr>
    </table>
    <br />
    <br />
    <asp:TextBox ID="txtSearch" runat="server"  />
    <asp:Button ID="btnSearch" runat="server" Text="Search" OnClientClick="search();return false;" />
    <br />
    <br />
    <p id="searchResult" >
    </p>
<br />
    <br />
    <asp:TextBox ID="txtDelete" runat="server"  />
    <asp:Button ID="btnDelete" runat="server" Text="Delete" OnClientClick="deleteuser();return false;" />
         </asp:Content>

在 head 部分包含对项目中 JQuery 的引用

<script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script> 

获取用户列表

要获取用户列表，我们将向“api/User”发送一个 Get 请求

$(document).ready(function () {
            $.getJSON("api/User", function (data) {
                $('#usersection').empty();
                $.each(data, function (key, val) {
                    var row = "<tr><td>" + val.Id + "</td><td>" + val.LastName + ", " + val.FirstName + "</td><td>" + val.Company +
                        "</td><td>" + val.PhoneNo + "</td><td>" + val.Email + "</td></tr>";
                    $(row).appendTo($('#usersection'));
                });
            });       
        });

我们使用 JQuery 的“getJSON”函数来发送 GET 请求，并指定 URL。第二个参数是回调函数，该函数将在请求成功完成后调用。“data”对象将包含服务返回的 JSON 或 XML 对象列表。

一旦我们从 API 获取到“data”，我们就遍历数据并将其附加到表格的主体部分。

“getJSON”函数在“document.ready”函数中调用，以便在页面执行时立即执行。现在运行应用程序，您将看到以下页面

将显示我们添加的默认记录

添加用户

现在，我们将使用 JQuery Ajax 的 Post 请求来添加用户。如您所见，我们已经创建了一个用于输入数据的表单。单击保存按钮后，将调用以下函数

function insertData() {
            var Emp = {};
            Emp.FirstName = $("#<%=txtFirstName.ClientID %>").val();
            Emp.LastName = $("#<%=txtLastName.ClientID %>").val();
            Emp.PhoneNo = $("#<%=txtPhone.ClientID %>").val();
            Emp.Company = $("#<%=txtCompany.ClientID %>").val();
            Emp.Email = $("#<%=txtEmail.ClientID %>").val();
            $.ajax({
                url: "<%=Page.ResolveUrl("/api/User/AddUser")%>",
                type: "POST",
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(Emp),
                dataType: "json",
                success: function (response) {
                    alert(response);
                    getAllContacts();
                },
                error: function (x, e) {
                    alert('Failed');
                    alert(x.responseText);
                    alert(x.status);
                }
            });
        }

我们使用 JQuery 的“ajax”方法将 POST 请求发送到“api/User/AddUser”URL。由于“AddUser”函数需要一个“User”类型的对象，因此我们创建一个 JSON 对象并将其随请求一起传递。如果请求成功，将调用“success”函数并显示响应。如果发生任何错误，将调用“error”函数。

尝试添加一个用户。如果一切成功，您将收到以下响应。（注意：理想情况下应对用户输入进行验证，为了使教程简单，我没有添加任何验证）

单击“确定”后，列表将更新，并且新添加的用户将可见

添加搜索功能

要通过 ID 获取用户，我们将调用“api/User/Id”并传递我们要显示的用户的 ID。

将在搜索按钮点击时调用的代码是

        function search() {
            var id = $('#<%=txtSearch.ClientID %>').val();
            $.getJSON("api/User/" + id,
                function (data) {
                    var str = data.Id + ' - ' + data.LastName + ", " + data.FirstName + " - " + data.Company;
                    $('#searchResult').text(str);
                })
            .fail(
                function (jqXHR, textStatus, err) {
                    $('#searchResult').text('Error: ' + err);
                });
        } 

我们调用 Jquery 的“getJSON”函数，但这次我们将 ID 与 URL 一起传递，API 将返回一个单个 JSON 对象（如果找到用户）。

如果不存在具有该 ID 的用户，我们将收到如下错误

添加删除功能 

要删除用户，我们将调用"api/User/id"并传递我们要删除的用户的 ID。这次我们将使用Delete HTTP 动词调用该函数。

这是在 Delete 按钮点击时调用的函数 

 function deleteuser() {
            var id = $('#<%=txtDelete.ClientID %>').val();
            $.ajax({
                url: "<%=Page.ResolveUrl("/api/User/")%>" + id,
                  type: "DELETE",
                  contentType: "application/json;charset=utf-8",
                  success: function (response) {

                      alert("User Deleted");
                      getAllContacts();
                     
                },

                  error: function (x, e) {
                      alert("Id Not Found");

                  }
              });
         }

如果 ID 未找到，将引发 404 异常，否则用户将被删除。

Default.aspx 文件的完整代码可以在附件的解决方案中找到

我们也可以以类似的方式向应用程序添加更新功能。WebAPI 可以以类似的方式与 Asp.Net MVC 一起使用。

请在评论中留下您的反馈和问题。

下载解决方案