From c566f9f3093262ad3ac3719eca91a8d68bb3e519 Mon Sep 17 00:00:00 2001 From: Scott Addie <10702007+scottaddie@users.noreply.github.com> Date: Tue, 27 Aug 2019 13:31:29 -0500 Subject: [PATCH] Convert web API jQuery doc to Fetch API (#13874) * Convert web API jQuery doc to Fetch API * More work * More edits * Add missing file extension to source_path * More edits * Fix broken section anchor link --- .openpublishing.redirection.json | 5 + aspnetcore/toc.yml | 4 +- aspnetcore/tutorials/first-web-api.md | 22 ++- ...{StartupJquery.cs => StartupJavaScript.cs} | 4 +- .../samples/3.0/TodoApi/wwwroot/css/site.css | 23 +++ .../samples/3.0/TodoApi/wwwroot/index.html | 40 +---- .../samples/3.0/TodoApi/wwwroot/js/site.js | 135 ++++++++++++++++ .../samples/3.0/TodoApi/wwwroot/site.js | 144 ------------------ aspnetcore/tutorials/web-api-javascript.md | 101 ++++++++++++ aspnetcore/tutorials/web-api-jquery.md | 85 ----------- 10 files changed, 286 insertions(+), 277 deletions(-) rename aspnetcore/tutorials/first-web-api/samples/3.0/TodoApi/{StartupJquery.cs => StartupJavaScript.cs} (91%) create mode 100644 aspnetcore/tutorials/first-web-api/samples/3.0/TodoApi/wwwroot/css/site.css create mode 100644 aspnetcore/tutorials/first-web-api/samples/3.0/TodoApi/wwwroot/js/site.js delete mode 100644 aspnetcore/tutorials/first-web-api/samples/3.0/TodoApi/wwwroot/site.js create mode 100644 aspnetcore/tutorials/web-api-javascript.md delete mode 100644 aspnetcore/tutorials/web-api-jquery.md diff --git a/.openpublishing.redirection.json b/.openpublishing.redirection.json index 0b6dbcf8b42d..5555c14fdf6f 100644 --- a/.openpublishing.redirection.json +++ b/.openpublishing.redirection.json @@ -879,6 +879,11 @@ "source_path": "aspnetcore/host-and-deploy/azure-apps/troubleshoot.md", "redirect_url": "/aspnet/core/test/troubleshoot-azure-iis", "redirect_document_id": false + }, + { + "source_path": "aspnetcore/tutorials/web-api-jquery.md", + "redirect_url": "/aspnet/core/tutorials/web-api-javascript", + "redirect_document_id": false } ] } diff --git a/aspnetcore/toc.yml b/aspnetcore/toc.yml index 47e5680c15b8..5c03f14cb40a 100644 --- a/aspnetcore/toc.yml +++ b/aspnetcore/toc.yml @@ -81,9 +81,9 @@ - name: Web API with MongoDB displayName: tutorial uid: tutorials/first-mongo-app - - name: Web API with jQuery + - name: Web API with JavaScript displayName: tutorial - uid: tutorials/web-api-jquery + uid: tutorials/web-api-javascript - name: Backend for mobile displayName: tutorial uid: mobile/native-mobile-backend diff --git a/aspnetcore/tutorials/first-web-api.md b/aspnetcore/tutorials/first-web-api.md index 4b7c61d1aa0d..b8b12a67a2f5 100644 --- a/aspnetcore/tutorials/first-web-api.md +++ b/aspnetcore/tutorials/first-web-api.md @@ -4,7 +4,7 @@ author: rick-anderson description: Learn how to build a web API with ASP.NET Core. ms.author: riande ms.custom: mvc -ms.date: 08/14/2019 +ms.date: 08/27/2019 uid: tutorials/first-web-api --- @@ -457,9 +457,9 @@ Use Postman to delete a to-do item: * Set the URI of the object to delete, for example `https://localhost:5001/api/TodoItems/1` * Select **Send** -## Call the API from jQuery +## Call the web API with JavaScript -See [Tutorial: Call an ASP.NET Core web API with jQuery](xref:tutorials/web-api-jquery). +See [Tutorial: Call an ASP.NET Core web API with JavaScript](xref:tutorials/web-api-javascript). ::: moniker-end @@ -475,9 +475,10 @@ In this tutorial, you learn how to: > * Configure routing and URL paths. > * Specify return values. > * Call the web API with Postman. -> * Call the web API with jQuery. +> * Call the web API with JavaScript. At the end, you have a web API that can manage "to-do" items stored in a relational database. + ## Overview This tutorial creates the following API: @@ -732,7 +733,6 @@ The return type of the `GetTodoItems` and `GetTodoItem` methods is [ActionResult * If no item matches the requested ID, the method returns a 404 [NotFound](/dotnet/api/microsoft.aspnetcore.mvc.controllerbase.notfound) error code. * Otherwise, the method returns 200 with a JSON response body. Returning `item` results in an HTTP 200 response. - ## Test the GetTodoItems method This tutorial uses Postman to test the web API. @@ -858,9 +858,9 @@ Use Postman to delete a to-do item: The sample app allows you to delete all the items. However, when the last item is deleted, a new one is created by the model class constructor the next time the API is called. -## Call the API with jQuery +## Call the web API with JavaScript -In this section, an HTML page is added that uses jQuery to call the web api. jQuery initiates the request and updates the page with the details from the API's response. +In this section, an HTML page is added that uses JavaScript to call the web API. The Fetch API initiates the request. JavaScript updates the page with the details from the web API's response. Configure the app to [serve static files](/dotnet/api/microsoft.aspnetcore.builder.staticfileextensions.usestaticfiles#Microsoft_AspNetCore_Builder_StaticFileExtensions_UseStaticFiles_Microsoft_AspNetCore_Builder_IApplicationBuilder_) and [enable default file mapping](/dotnet/api/microsoft.aspnetcore.builder.defaultfilesextensions.usedefaultfiles#Microsoft_AspNetCore_Builder_DefaultFilesExtensions_UseDefaultFiles_Microsoft_AspNetCore_Builder_IApplicationBuilder_) by updating *Startup.cs* with the following highlighted code: @@ -881,19 +881,17 @@ A change to the ASP.NET Core project's launch settings may be required to test t * Open *Properties\launchSettings.json*. * Remove the `launchUrl` property to force the app to open at *index.html*—the project's default file. -There are several ways to get jQuery. In the preceding snippet, the library is loaded from a CDN. - -This sample calls all of the CRUD methods of the API. Following are explanations of the calls to the API. +This sample calls all of the CRUD methods of the web API. Following are explanations of the calls to the API. ### Get a list of to-do items -The jQuery [ajax](https://api.jquery.com/jquery.ajax/) function sends a `GET` request to the API, which returns JSON representing an array of to-do items. The `success` callback function is invoked if the request succeeds. In the callback, the DOM is updated with the to-do information. +Fetch sends an HTTP GET request to the web API, which returns JSON representing an array of to-do items. The `success` callback function is invoked if the request succeeds. In the callback, the DOM is updated with the to-do information. [!code-javascript[](first-web-api/samples/2.2/TodoApi/wwwroot/site.js?name=snippet_GetData)] ### Add a to-do item -The [ajax](https://api.jquery.com/jquery.ajax/) function sends a `POST` request with the to-do item in the request body. The `accepts` and `contentType` options are set to `application/json` to specify the media type being received and sent. The to-do item is converted to JSON by using [JSON.stringify](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify). When the API returns a successful status code, the `getData` function is invoked to update the HTML table. +Fetch sends an HTTP POST request with the to-do item in the request body. The `accepts` and `contentType` options are set to `application/json` to specify the media type being received and sent. The to-do item is converted to JSON by using [JSON.stringify](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify). When the API returns a successful status code, the `getData` function is invoked to update the HTML table. [!code-javascript[](first-web-api/samples/2.2/TodoApi/wwwroot/site.js?name=snippet_AddItem)] diff --git a/aspnetcore/tutorials/first-web-api/samples/3.0/TodoApi/StartupJquery.cs b/aspnetcore/tutorials/first-web-api/samples/3.0/TodoApi/StartupJavaScript.cs similarity index 91% rename from aspnetcore/tutorials/first-web-api/samples/3.0/TodoApi/StartupJquery.cs rename to aspnetcore/tutorials/first-web-api/samples/3.0/TodoApi/StartupJavaScript.cs index 7a71bbefb770..eacc870ae5fc 100644 --- a/aspnetcore/tutorials/first-web-api/samples/3.0/TodoApi/StartupJquery.cs +++ b/aspnetcore/tutorials/first-web-api/samples/3.0/TodoApi/StartupJavaScript.cs @@ -9,9 +9,9 @@ namespace TodoApi { - public class StartupJquery + public class StartupJavaScript { - public StartupJquery(IConfiguration configuration) + public StartupJavaScript(IConfiguration configuration) { Configuration = configuration; } diff --git a/aspnetcore/tutorials/first-web-api/samples/3.0/TodoApi/wwwroot/css/site.css b/aspnetcore/tutorials/first-web-api/samples/3.0/TodoApi/wwwroot/css/site.css new file mode 100644 index 000000000000..2cf9f828712a --- /dev/null +++ b/aspnetcore/tutorials/first-web-api/samples/3.0/TodoApi/wwwroot/css/site.css @@ -0,0 +1,23 @@ +input[type='submit'], button, [aria-label] { + cursor: pointer; +} + +#editForm { + display: none; +} + +table { + font-family: Arial, sans-serif; + border: 1px solid; + border-collapse: collapse; +} + +th { + background-color: #f8f8f8; + padding: 5px; +} + +td { + border: 1px solid; + padding: 5px; +} diff --git a/aspnetcore/tutorials/first-web-api/samples/3.0/TodoApi/wwwroot/index.html b/aspnetcore/tutorials/first-web-api/samples/3.0/TodoApi/wwwroot/index.html index 41fe2ca3fb7e..546c41bc3ed0 100644 --- a/aspnetcore/tutorials/first-web-api/samples/3.0/TodoApi/wwwroot/index.html +++ b/aspnetcore/tutorials/first-web-api/samples/3.0/TodoApi/wwwroot/index.html @@ -3,31 +3,7 @@