Web API with Visual Studio 2019 is quite a bolierplate task – it is doable in less than 45 minutes, following the Microsoft.com tutorial:
The video tutorial is here:
The
TodoController , implementing the CRUD actions looks like this:
|
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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using Microsoft.AspNetCore.Mvc; using Microsoft.EntityFrameworkCore; using TodoApi.Models; namespace TodoApi.Controllers { [ApiController] [Route("api/[controller]")] public class TodoController : Controller { private readonly TodoContext _context; public TodoController(TodoContext context) { _context = context; if (_context.TodoItems.Count() == 0) { _context.TodoItems.Add(new TodoItem { Name = "Learn VBA" }); _context.SaveChanges(); } } //GET: api/Todo [HttpGet] public async Task<ActionResult<IEnumerable<TodoItem>>> GetTodoItems() { return await _context.TodoItems.ToListAsync(); } //GET: api/Todo/3 [HttpGet("{id}")] public async Task<ActionResult<TodoItem>> GetTodoItem(long id) { var todoItem = await _context.TodoItems.FindAsync(id); if (todoItem== null) { return NotFound(); } return todoItem; } //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); } //PUT: api/Todo/3 [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(); } //DELETE: api/Todo/3 [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(); } } } |
The index.html is this one:
|
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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
<!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">✖</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> |
At the end, the site.js is here:
|
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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 |
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" }); } |
Everything else is in GitHub here – https://github.com/Vitosh/ASP/tree/master/TodoApi.
Enjoy!