彩票走势图

如何使用ASP.NET Core创建Web API（下）

翻译|使用教程|编辑：陈津勇|2019-08-28 14:49:37.833|阅读 549 次

概述：Visual Studio 2019具有ASP.NET和Web开发工作负载，那么如何使用VS 2019创建一个Web项目呢？

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

在上篇中，小编为大家介绍了在使用Visual Studio 2019创建Web项目过程中测试API、添加模型类、添加数据库上下文、注册数据库上下文、添加控制器等步骤的方法和相关代码，本文将继续介绍在创建Web过程中会使用的其他步骤。

为形成完整、连贯的操作步骤，请点击此处阅读更多。

点击下载Visual Studio试用版

返回值

GetTodoItems和GetTodoItem方法的返回类型是ActionResult <T>类型。ASP.NET Core自动将对象序列化为JSON，并将JSON写入响应消息的正文中。假设没有未处理的异常，此返回类型的响应代码为200。未处理的异常被转换为5xx错误。

ActionResult返回类型可以表示各种HTTP状态代码。例如，GetTodoItem可以返回两个不同的状态值：

  • 如果没有项与请求的ID匹配，则该方法返回404 NotFound错误代码。

  • 否则，该方法返回带有JSON响应体的200。返回项目将导致HTTP 200响应。

测试GetTodoItems方法

本教程使用Postman来测试Web API。

  • 从文件>设置（常规选项卡），禁用SSL证书验证。

  • 创建一个新请求。

    将HTTP方法设置为GET

    将请求URL设置为//localhost:<port>/api/todo。例如，//localhost:5001/api/todo。

  • 在Postman中设置两个窗格视图。

  • 选择发送。

2pv.png

添加Create方法

PostTodoItem在Controllers / TodoController.cs中添加以下方法：

// POST: api/Todo
[HttpPost]
public async Task<ActionResult<TodoItem>> PostTodoItem(TodoItem item)
{
    _context.TodoItems.Add(item);
    await _context.SaveChangesAsync();

    return CreatedAtAction(nameof(GetTodoItem), new { id = item.Id }, item);
}

上面的代码是HTTP POST方法，由[HttpPost]属性表示。该方法从HTTP请求的主体获取to-do项的值。

CreatedAtAction方法：

如果成功，返回HTTP 201状态码。HTTP 201是HTTP POST方法的标准响应，该方法在服务器上创建新资源。

Location为响应添加标头。该Location头指定新创建待完成项目的URI。

引用GetTodoItem创建Location标头URI的操作。C＃nameof关键字用于避免在CreatedAtAction调用中对操作名称进行硬编码。

// GET: api/Todo/5
[HttpGet("{id}")]
public async Task<ActionResult<TodoItem>> GetTodoItem(long id)
{
    var todoItem = await _context.TodoItems.FindAsync(id);

    if (todoItem == null)
    {
        return NotFound();
    }

    return todoItem;
}

测试PostTodoItem方法

  • 建立项目

  • 在Postman中，将HTTP方法设置为POST

  • 选择“ 正文”选项卡

  • 选择原始单选按钮

  • 将类型设置为JSON（application / json）

在请求正文中输入待办事项的JSON：

{
  "name":"walk dog",
  "isComplete":true
}

  • 选择发送

create.png

如果您收到405 Method Not Allowed错误，可能是因为在添加PostTodoItem方法后未编译项目。

测试位置标头URI

  • 在“ 响应”窗格中选择“ 标题”选项卡。

  • 复制Location标头值：

pmc2.png

添加PutTodoItem方法

添加以下PutTodoItem方法：

// PUT: api/Todo/5
[HttpPut("{id}")]
public async Task<IActionResult> PutTodoItem(long id, TodoItem item)
{
    if (id != item.Id)
    {
        return BadRequest();
    }

    _context.Entry(item).State = EntityState.Modified;
    await _context.SaveChangesAsync();

    return NoContent();
}

PutTodoItem类似于PostTodoItem，除了它使用HTTP PUT，回复是204（无内容）。根据HTTP规范，PUT请求要求客户端发送整个更新的实体，而不仅仅是更改。

如果您在调用PutTodoItem时出错，请调用get以确保数据库中有一个条目。

测试PutTodoItem方法

这个示例使用内存中的数据库，该数据库必须在每次启动应用程序时初始化。在执行PUT调用之前，数据库中必须有一个项。

更新id=1的待办事项，并将其名称设置为“feed fish”:

{
    "ID":1,
    "name":"feed fish",
    "isComplete":true
  }

下图显示了Postman更新：

pmcput.png

添加DeleteTodoItem方法

添加以下DeleteTodoItem方法：

// DELETE: api/Todo/5
[HttpDelete("{id}")]
public async Task<IActionResult> DeleteTodoItem(long id)
{
    var todoItem = await _context.TodoItems.FindAsync(id);

    if (todoItem == null)
    {
        return NotFound();
    }

    _context.TodoItems.Remove(todoItem);
    await _context.SaveChangesAsync();

    return NoContent();
}

DeleteTodoItem响应是204(没有内容)。

测试DeleteTodoItem方法

使用Postman删除待办事项：

  • 将方法设置为DELETE

  • 例如，设置要删除的对象的URI //localhost:5001/api/todo/1

  • 选择发送

示例应用程序允许您删除所有项目。但是，当删除最后一项时，下次调用API时，模型类构造函数会创建一个新项。

使用jQuery调用API

在本节中，添加了一个使用jQuery调用web api的HTML页面，jQuery启动请求并使用API响应中的详细信息更新页面。

将应用程序配置为提供静态文件，并通过使用以下突出显示的代码更新Startup.cs来启用默认文件映射：

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        // The default HSTS value is 30 days. You may want to change this for 
        // production scenarios, see //aka.ms/aspnetcore-hsts.
        app.UseHsts();
    }

    app.UseDefaultFiles();
    app.UseStaticFiles();
    app.UseHttpsRedirection();
    app.UseMvc();
}

在项目目录中创建wwwroot文件夹。

将名为index.html的HTML文件添加到wwwroot目录中。用以下标记替换其内容：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>To-do CRUD</title>
    <style>
        input[type='submit'], button, [aria-label] {
            cursor: pointer;
        }

        #spoiler {
            display: none;
        }

        table {
            font-family: Arial, sans-serif;
            border: 1px solid;
            border-collapse: collapse;
        }

        th {
            background-color: #0066CC;
            color: white;
        }

        td {
            border: 1px solid;
            padding: 5px;
        }
    </style>
</head>
<body>
    <h1>To-do CRUD</h1>
    <h3>Add</h3>
    <form action="javascript:void(0);" method="POST" onsubmit="addItem()">
        <input type="text" id="add-name" placeholder="New to-do">
        <input type="submit" value="Add">
    </form>

    <div id="spoiler">
        <h3>Edit</h3>
        <form class="my-form">
            <input type="hidden" id="edit-id">
            <input type="checkbox" id="edit-isComplete">
            <input type="text" id="edit-name">
            <input type="submit" value="Save">
            <a onclick="closeInput()" aria-label="Close">&#10006;</a>
        </form>
    </div>

    <p id="counter"></p>

    <table>
        <tr>
            <th>Is Complete</th>
            <th>Name</th>
            <th></th>
            <th></th>
        </tr>
        <tbody id="todos"></tbody>
    </table>

    <script src="//code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous"></script>
    <script src="site.js"></script>
</body>
</html>

将名为site.js的JavaScript文件添加到wwwroot目录中。用以下代码替换其内容：

const uri = "api/todo";
let todos = null;
function getCount(data) {
  const el = $("#counter");
  let name = "to-do";
  if (data) {
    if (data > 1) {
      name = "to-dos";
    }
    el.text(data + " " + name);
  } else {
    el.text("No " + name);
  }
}

$(document).ready(function() {
  getData();
});

function getData() {
  $.ajax({
    type: "GET",
    url: uri,
    cache: false,
    success: function(data) {
      const tBody = $("#todos");

      $(tBody).empty();

      getCount(data.length);

      $.each(data, function(key, item) {
        const tr = $("<tr></tr>")
          .append(
            $("<td></td>").append(
              $("<input/>", {
                type: "checkbox",
                disabled: true,
                checked: item.isComplete
              })
            )
          )
          .append($("<td></td>").text(item.name))
          .append(
            $("<td></td>").append(
              $("<button>Edit</button>").on("click", function() {
                editItem(item.id);
              })
            )
          )
          .append(
            $("<td></td>").append(
              $("<button>Delete</button>").on("click", function() {
                deleteItem(item.id);
              })
            )
          );

        tr.appendTo(tBody);
      });

      todos = data;
    }
  });
}

function addItem() {
  const item = {
    name: $("#add-name").val(),
    isComplete: false
  };

  $.ajax({
    type: "POST",
    accepts: "application/json",
    url: uri,
    contentType: "application/json",
    data: JSON.stringify(item),
    error: function(jqXHR, textStatus, errorThrown) {
      alert("Something went wrong!");
    },
    success: function(result) {
      getData();
      $("#add-name").val("");
    }
  });
}

function deleteItem(id) {
  $.ajax({
    url: uri + "/" + id,
    type: "DELETE",
    success: function(result) {
      getData();
    }
  });
}

function editItem(id) {
  $.each(todos, function(key, item) {
    if (item.id === id) {
      $("#edit-name").val(item.name);
      $("#edit-id").val(item.id);
      $("#edit-isComplete")[0].checked = item.isComplete;
    }
  });
  $("#spoiler").css({ display: "block" });
}

$(".my-form").on("submit", function() {
  const item = {
    name: $("#edit-name").val(),
    isComplete: $("#edit-isComplete").is(":checked"),
    id: $("#edit-id").val()
  };

  $.ajax({
    url: uri + "/" + $("#edit-id").val(),
    type: "PUT",
    accepts: "application/json",
    contentType: "application/json",
    data: JSON.stringify(item),
    success: function(result) {
      getData();
    }
  });

  closeInput();
  return false;
});

function closeInput() {
  $("#spoiler").css({ display: "none" });
}

可能需要更改ASP.NET Core项目的启动设置才能在本地测试HTML页面：

  • 打开Properties \ launchSettings.json。

  • 删除launchUrl属性，强制应用程序在index打开html-项目的默认文件。

下面是对API调用的解释。

获取待办事项列表

jQuery ajax函数向API发送GET请求，API返回表示待办事项数组的JSON。如果请求成功，则调用success回调函数。在回调中，DOM将使用to-do信息进行更新。

$(document).ready(function() {
  getData();
});

function getData() {
  $.ajax({
    type: "GET",
    url: uri,
    cache: false,
    success: function(data) {
      const tBody = $("#todos");

      $(tBody).empty();

      getCount(data.length);

      $.each(data, function(key, item) {
        const tr = $("<tr></tr>")
          .append(
            $("<td></td>").append(
              $("<input/>", {
                type: "checkbox",
                disabled: true,
                checked: item.isComplete
              })
            )
          )
          .append($("<td></td>").text(item.name))
          .append(
            $("<td></td>").append(
              $("<button>Edit</button>").on("click", function() {
                editItem(item.id);
              })
            )
          )
          .append(
            $("<td></td>").append(
              $("<button>Delete</button>").on("click", function() {
                deleteItem(item.id);
              })
            )
          );

        tr.appendTo(tBody);
      });

      todos = data;
    }
  });
}

添加待办事项

AJAX功能发送POST与请求体待办事项项目请求。accept和contentType选项设置为application/json，以指定接收和发送的媒体类型。通过使用JSON.stringify将待办事项转换为JSON。当API返回成功的状态代码时，将调用getData函数来更新HTML表。

function addItem() {
  const item = {
    name: $("#add-name").val(),
    isComplete: false
  };

  $.ajax({
    type: "POST",
    accepts: "application/json",
    url: uri,
    contentType: "application/json",
    data: JSON.stringify(item),
    error: function(jqXHR, textStatus, errorThrown) {
      alert("Something went wrong!");
    },
    success: function(result) {
      getData();
      $("#add-name").val("");
    }
  });
}

更新待办事项

更新待办事项类似于添加待办事项。url将更改为添加项的唯一标识符，并放入类型。

$.ajax({
  url: uri + "/" + $("#edit-id").val(),
  type: "PUT",
  accepts: "application/json",
  contentType: "application/json",
  data: JSON.stringify(item),
  success: function(result) {
    getData();
  }
});

删除待办事项

删除待办事项是通过type在AJAX调用上设置DELETE并在URL中指定项目的唯一标识符来完成的。

$.ajax({
  url: uri + "/" + id,
  type: "DELETE",
  success: function(result) {
    getData();
  }
});


想要了解 Visual Studio 更多资源的伙伴，请点这里。

想要获取 Visual Studio 正版授权的伙伴，


标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP