Convert string value assigned to id property to a number (#13495)

aspnetcore/tutorials/first-web-api/samples/3.0/TodoApi/wwwroot/index.html

@@ -34,7 +34,7 @@
     <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="Addzz">
+        <input type="submit" value="Add">
     </form>
 
     <div id="spoiler">

aspnetcore/tutorials/first-web-api/samples/3.0/TodoApi/wwwroot/site.js

@@ -1,16 +1,16 @@
 // <snippet_SiteJs>
-const uri = "api/TodoItems";
+const uri = 'api/TodoItems';
 let todos = null;
 function getCount(data) {
-  const el = $("#counter");
-  let name = "to-do";
+  const el = $('#counter');
+  let name = 'to-do';
   if (data) {
     if (data > 1) {
-      name = "to-dos";
+      name = 'to-dos';
     }
-    el.text(data + " " + name);
+    el.text(data + ' ' + name);
   } else {
-    el.text("No " + name);
+    el.text('No ' + name);
   }
 }
 
@@ -21,38 +21,38 @@ $(document).ready(function() {
 
 function getData() {
   $.ajax({
-    type: "GET",
+    type: 'GET',
     url: uri,
     cache: false,
     success: function(data) {
-      const tBody = $("#todos");
+      const tBody = $('#todos');
 
       $(tBody).empty();
 
       getCount(data.length);
 
       $.each(data, function(key, item) {
-        const tr = $("<tr></tr>")
+        const tr = $('<tr></tr>')
           .append(
-            $("<td></td>").append(
-              $("<input/>", {
-                type: "checkbox",
+            $('<td></td>').append(
+              $('<input/>', {
+                type: 'checkbox',
                 disabled: true,
                 checked: item.isComplete
               })
             )
           )
-          .append($("<td></td>").text(item.name))
+          .append($('<td></td>').text(item.name))
           .append(
-            $("<td></td>").append(
-              $("<button>Edit</button>").on("click", function() {
+            $('<td></td>').append(
+              $('<button>Edit</button>').on('click', function() {
                 editItem(item.id);
               })
             )
           )
           .append(
-            $("<td></td>").append(
-              $("<button>Delete</button>").on("click", function() {
+            $('<td></td>').append(
+              $('<button>Delete</button>').on('click', function() {
                 deleteItem(item.id);
               })
             )
@@ -70,22 +70,22 @@ function getData() {
 // <snippet_AddItem>
 function addItem() {
   const item = {
-    name: $("#add-name").val(),
+    name: $('#add-name').val(),
     isComplete: false
   };
 
   $.ajax({
-    type: "POST",
-    accepts: "application/json",
+    type: 'POST',
+    accepts: 'application/json',
     url: uri,
-    contentType: "application/json",
+    contentType: 'application/json',
     data: JSON.stringify(item),
     error: function(jqXHR, textStatus, errorThrown) {
-      alert("Something went wrong!");
+      alert('Something went wrong!');
     },
     success: function(result) {
       getData();
-      $("#add-name").val("");
+      $('#add-name').val('');
     }
   });
 }
@@ -94,8 +94,8 @@ function addItem() {
 function deleteItem(id) {
   // <snippet_AjaxDelete>
   $.ajax({
-    url: uri + "/" + id,
-    type: "DELETE",
+    url: uri + '/' + id,
+    type: 'DELETE',
     success: function(result) {
       getData();
     }
@@ -106,27 +106,27 @@ function deleteItem(id) {
 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;
+      $('#edit-name').val(item.name);
+      $('#edit-id').val(item.id);
+      $('#edit-isComplete')[0].checked = item.isComplete;
     }
   });
-  $("#spoiler").css({ display: "block" });
+  $('#spoiler').css({ display: 'block' });
 }
 
-$(".my-form").on("submit", function() {
+$('.my-form').on('submit', function() {
   const item = {
-    name: $("#edit-name").val(),
-    isComplete: $("#edit-isComplete").is(":checked"),
-    id: $("#edit-id").val()
+    name: $('#edit-name').val(),
+    isComplete: $('#edit-isComplete').is(':checked'),
+    id: parseInt($('#edit-id').val(), 10)
   };
 
   // <snippet_AjaxPut>
   $.ajax({
-    url: uri + "/" + $("#edit-id").val(),
-    type: "PUT",
-    accepts: "application/json",
-    contentType: "application/json",
+    url: uri + '/' + $('#edit-id').val(),
+    type: 'PUT',
+    accepts: 'application/json',
+    contentType: 'application/json',
     data: JSON.stringify(item),
     success: function(result) {
       getData();
@@ -139,6 +139,6 @@ $(".my-form").on("submit", function() {
 });
 
 function closeInput() {
-  $("#spoiler").css({ display: "none" });
+  $('#spoiler').css({ display: 'none' });
 }
 // </snippet_SiteJs>