Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
- Loading branch information
1 parent
becb8c8
commit c566f9f
Showing
10 changed files
with
286 additions
and
277 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
23 changes: 23 additions & 0 deletions
23
aspnetcore/tutorials/first-web-api/samples/3.0/TodoApi/wwwroot/css/site.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
135 changes: 135 additions & 0 deletions
135
aspnetcore/tutorials/first-web-api/samples/3.0/TodoApi/wwwroot/js/site.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,135 @@ | ||
| // <snippet_SiteJs> | ||
| const uri = 'api/TodoItems'; | ||
| let todos = []; | ||
|
|
||
| function getItems() { | ||
| // <snippet_GetItems> | ||
| fetch(uri) | ||
| .then(response => response.json()) | ||
| .then(data => _displayItems(data)) | ||
| .catch(error => console.error('Unable to get items.', error)); | ||
| // </snippet_GetItems> | ||
| } | ||
|
|
||
| // <snippet_AddItem> | ||
| function addItem() { | ||
| const addNameTextbox = document.getElementById('add-name'); | ||
|
|
||
| const item = { | ||
| isComplete: false, | ||
| name: addNameTextbox.value.trim() | ||
| }; | ||
|
|
||
| fetch(uri, { | ||
| method: 'POST', | ||
| headers: { | ||
| 'Accept': 'application/json', | ||
| 'Content-Type': 'application/json' | ||
| }, | ||
| body: JSON.stringify(item) | ||
| }) | ||
| .then(response => response.json()) | ||
| .then(() => { | ||
| getItems(); | ||
| addNameTextbox.value = ''; | ||
| }) | ||
| .catch(error => console.error('Unable to add item.', error)); | ||
| } | ||
| // </snippet_AddItem> | ||
|
|
||
| function deleteItem(id) { | ||
| // <snippet_DeleteItem> | ||
| fetch(`${uri}/${id}`, { | ||
| method: 'DELETE' | ||
| }) | ||
| .then(() => getItems()) | ||
| .catch(error => console.error('Unable to delete item.', error)); | ||
| // </snippet_DeleteItem> | ||
| } | ||
|
|
||
| function displayEditForm(id) { | ||
| const item = todos.find(item => item.id === id); | ||
|
|
||
| document.getElementById('edit-name').value = item.name; | ||
| document.getElementById('edit-id').value = item.id; | ||
| document.getElementById('edit-isComplete').checked = item.isComplete; | ||
| document.getElementById('editForm').style.display = 'block'; | ||
| } | ||
|
|
||
| function updateItem() { | ||
| const itemId = document.getElementById('edit-id').value; | ||
| const item = { | ||
| id: parseInt(itemId, 10), | ||
| isComplete: document.getElementById('edit-isComplete').checked, | ||
| name: document.getElementById('edit-name').value.trim() | ||
| }; | ||
|
|
||
| // <snippet_UpdateItem> | ||
| fetch(`${uri}/${itemId}`, { | ||
| method: 'PUT', | ||
| headers: { | ||
| 'Accept': 'application/json', | ||
| 'Content-Type': 'application/json' | ||
| }, | ||
| body: JSON.stringify(item) | ||
| }) | ||
| .then(() => getItems()) | ||
| .catch(error => console.error('Unable to delete item.', error)); | ||
| // </snippet_UpdateItem> | ||
|
|
||
| closeInput(); | ||
|
|
||
| return false; | ||
| } | ||
|
|
||
| function closeInput() { | ||
| document.getElementById('editForm').style.display = 'none'; | ||
| } | ||
|
|
||
| function _displayCount(itemCount) { | ||
| const name = (itemCount === 1) ? 'to-do' : 'to-dos'; | ||
|
|
||
| document.getElementById('counter').innerText = `${itemCount} ${name}`; | ||
| } | ||
|
|
||
| function _displayItems(data) { | ||
| const tBody = document.getElementById('todos'); | ||
| tBody.innerHTML = ''; | ||
|
|
||
| _displayCount(data.length); | ||
|
|
||
| const button = document.createElement('button'); | ||
|
|
||
| data.forEach(item => { | ||
| let isCompleteCheckbox = document.createElement('input'); | ||
| isCompleteCheckbox.type = 'checkbox'; | ||
| isCompleteCheckbox.disabled = true; | ||
| isCompleteCheckbox.checked = item.isComplete; | ||
|
|
||
| let editButton = button.cloneNode(false); | ||
| editButton.innerText = 'Edit'; | ||
| editButton.setAttribute('onclick', `displayEditForm(${item.id})`); | ||
|
|
||
| let deleteButton = button.cloneNode(false); | ||
| deleteButton.innerText = 'Delete'; | ||
| deleteButton.setAttribute('onclick', `deleteItem(${item.id})`); | ||
|
|
||
| let tr = tBody.insertRow(); | ||
|
|
||
| let td1 = tr.insertCell(0); | ||
| td1.appendChild(isCompleteCheckbox); | ||
|
|
||
| let td2 = tr.insertCell(1); | ||
| let textNode = document.createTextNode(item.name); | ||
| td2.appendChild(textNode); | ||
|
|
||
| let td3 = tr.insertCell(2); | ||
| td3.appendChild(editButton); | ||
|
|
||
| let td4 = tr.insertCell(3); | ||
| td4.appendChild(deleteButton); | ||
| }); | ||
|
|
||
| todos = data; | ||
| } | ||
| // </snippet_SiteJs> |
Oops, something went wrong.