1. 软市首页
  2. 软件教程

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

• 软件教程

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

在

返回值

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设置为https://localhost:<port>/api/todo。例如，https://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 https://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 https://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="https://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 正版授权的伙伴，请点这里。

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

标签：

声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！

0
上一篇 2019年7月25日
下一篇 2019年7月25日

相关推荐

发表回复

登录后才能评论
首页
软件超市
企服市场
会员中心