-
Notifications
You must be signed in to change notification settings - Fork 25.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Blazor Call web API UE pass (#22410)
- Loading branch information
Showing
12 changed files
with
806 additions
and
202 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
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
118 changes: 118 additions & 0 deletions
118
...re/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/call-web-api/CallWebAPI.razor
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,118 @@ | ||
| @page "/call-web-api" | ||
| @inject HttpClient Http | ||
|
|
||
| <h1>Todo Items</h1> | ||
|
|
||
| @if (todoItems == null) | ||
| { | ||
| <p>No Todo Items found.</p> | ||
| } | ||
| else | ||
| { | ||
| <table class="table"> | ||
| <thead> | ||
| <tr> | ||
| <th class="text-center">Complete</th> | ||
| <th>Name</th> | ||
| <th></th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr id="editRow" style="display:@editRowStyle"> | ||
| <td class="text-center"> | ||
| <input type="checkbox" @bind="editItem.IsComplete" /> | ||
| </td> | ||
| <td> | ||
| <input @bind="editItem.Name" /> | ||
| </td> | ||
| <td class="text-center"> | ||
| <button class="btn btn-success" @onclick="SaveItem"> | ||
| Save | ||
| </button> | ||
| <button class="btn btn-danger" | ||
| @onclick="@(() => editRowStyle = "none")"> | ||
| Cancel | ||
| </button> | ||
| </td> | ||
| </tr> | ||
| @foreach (var item in todoItems) | ||
| { | ||
| <tr> | ||
| <td class="text-center"> | ||
| @if (item.IsComplete) | ||
| { | ||
| <span>✔</span> | ||
| } | ||
| </td> | ||
| <td>@item.Name</td> | ||
| <td class="text-center"> | ||
| <button class="btn btn-warning" | ||
| @onclick="@(() => EditItem(item.Id))">Edit</button> | ||
| <button class="btn btn-danger" | ||
| @onclick="@(async () => await DeleteItem(item.Id))"> | ||
| Delete | ||
| </button> | ||
| </td> | ||
| </tr> | ||
| } | ||
| <tr id="addRow"> | ||
| <td></td> | ||
| <td> | ||
| <input @bind="newItemName" placeholder="New Todo Item" /> | ||
| </td> | ||
| <td class="text-center"> | ||
| <button class="btn btn-success" @onclick="@AddItem">Add</button> | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| } | ||
|
|
||
| @code { | ||
| private const string ServiceEndpoint = "https://localhost:10000/api/TodoItems"; | ||
| private TodoItem[] todoItems; | ||
| private TodoItem editItem = new TodoItem(); | ||
| private string editRowStyle = "none"; | ||
| private string newItemName; | ||
|
|
||
| protected override async Task OnInitializedAsync() => await GetTodoItems(); | ||
|
|
||
| private async Task GetTodoItems() => | ||
| todoItems = await Http.GetFromJsonAsync<TodoItem[]>(ServiceEndpoint); | ||
|
|
||
| private void EditItem(long id) | ||
| { | ||
| editItem = todoItems.Single(i => i.Id == id); | ||
| editRowStyle = "table-row"; | ||
| } | ||
|
|
||
| private async Task AddItem() | ||
| { | ||
| var addItem = new TodoItem { Name = newItemName, IsComplete = false }; | ||
| await Http.PostAsJsonAsync(ServiceEndpoint, addItem); | ||
| newItemName = string.Empty; | ||
| await GetTodoItems(); | ||
| editRowStyle = "none"; | ||
| } | ||
|
|
||
| private async Task SaveItem() | ||
| { | ||
| await Http.PutAsJsonAsync($"{ServiceEndpoint}/{editItem.Id}", editItem); | ||
| await GetTodoItems(); | ||
| editRowStyle = "none"; | ||
| } | ||
|
|
||
| private async Task DeleteItem(long id) | ||
| { | ||
| await Http.DeleteAsync($"{ServiceEndpoint}/{id}"); | ||
| await GetTodoItems(); | ||
| editRowStyle = "none"; | ||
| } | ||
|
|
||
| private class TodoItem | ||
| { | ||
| public long Id { get; set; } | ||
| public string Name { get; set; } | ||
| public bool IsComplete { get; set; } | ||
| } | ||
| } |
57 changes: 57 additions & 0 deletions
57
...e/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/call-web-api/TodoRequest.razor
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,57 @@ | ||
| @page "/todo-request" | ||
| @using System.Net.Http | ||
| @using System.Net.Http.Headers | ||
| @using System.Net.Http.Json | ||
| @using Microsoft.AspNetCore.Components.WebAssembly.Authentication | ||
| @inject HttpClient Http | ||
| @inject IAccessTokenProvider TokenProvider | ||
|
|
||
| <h1>ToDo Request</h1> | ||
|
|
||
| <button @onclick="PostRequest">Submit POST request</button> | ||
|
|
||
| <p>Response body returned by the server:</p> | ||
|
|
||
| <p>@responseBody</p> | ||
|
|
||
| @code { | ||
| private string responseBody; | ||
|
|
||
| private async Task PostRequest() | ||
| { | ||
| var requestMessage = new HttpRequestMessage() | ||
| { | ||
| Method = new HttpMethod("POST"), | ||
| RequestUri = new Uri("https://localhost:10000/api/TodoItems"), | ||
| Content = | ||
| JsonContent.Create(new TodoItem | ||
| { | ||
| Name = "My New Todo Item", | ||
| IsComplete = false | ||
| }) | ||
| }; | ||
|
|
||
| var tokenResult = await TokenProvider.RequestAccessToken(); | ||
|
|
||
| if (tokenResult.TryGetToken(out var token)) | ||
| { | ||
| requestMessage.Headers.Authorization = | ||
| new AuthenticationHeaderValue("Bearer", token.Value); | ||
|
|
||
| requestMessage.Content.Headers.TryAddWithoutValidation( | ||
| "x-custom-header", "value"); | ||
|
|
||
| var response = await Http.SendAsync(requestMessage); | ||
| var responseStatusCode = response.StatusCode; | ||
|
|
||
| responseBody = await response.Content.ReadAsStringAsync(); | ||
| } | ||
| } | ||
|
|
||
| public class TodoItem | ||
| { | ||
| public long Id { get; set; } | ||
| public string Name { get; set; } | ||
| public bool IsComplete { get; set; } | ||
| } | ||
| } |
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
120 changes: 120 additions & 0 deletions
120
...re/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/call-web-api/CallWebAPI.razor
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,120 @@ | ||
| @page "/call-web-api" | ||
| @inject HttpClient Http | ||
|
|
||
| <h1>Todo Items</h1> | ||
|
|
||
| @if (todoItems == null) | ||
| { | ||
| <p>No Todo Items found.</p> | ||
| } | ||
| else | ||
| { | ||
| <table class="table"> | ||
| <thead> | ||
| <tr> | ||
| <th class="text-center">Complete</th> | ||
| <th>Name</th> | ||
| <th></th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr id="editRow" style="display:@editRowStyle"> | ||
| <td class="text-center"> | ||
| <input type="checkbox" @bind="editItem.IsComplete" /> | ||
| </td> | ||
| <td> | ||
| <input @bind="editItem.Name" /> | ||
| </td> | ||
| <td class="text-center"> | ||
| <button class="btn btn-success" @onclick="SaveItem"> | ||
| Save | ||
| </button> | ||
| <button class="btn btn-danger" | ||
| @onclick="@(() => editRowStyle = "none")"> | ||
| Cancel | ||
| </button> | ||
| </td> | ||
| </tr> | ||
| @foreach (var item in todoItems) | ||
| { | ||
| <tr> | ||
| <td class="text-center"> | ||
| @if (item.IsComplete) | ||
| { | ||
| <span>✔</span> | ||
| } | ||
| </td> | ||
| <td>@item.Name</td> | ||
| <td class="text-center"> | ||
| <button class="btn btn-warning" | ||
| @onclick="@(() => EditItem(item.Id))"> | ||
| Edit | ||
| </button> | ||
| <button class="btn btn-danger" | ||
| @onclick="@(async () => await DeleteItem(item.Id))"> | ||
| Delete | ||
| </button> | ||
| </td> | ||
| </tr> | ||
| } | ||
| <tr id="addRow"> | ||
| <td></td> | ||
| <td> | ||
| <input @bind="newItemName" placeholder="New Todo Item" /> | ||
| </td> | ||
| <td class="text-center"> | ||
| <button class="btn btn-success" @onclick="AddItem">Add</button> | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| } | ||
|
|
||
| @code { | ||
| private const string ServiceEndpoint = "https://localhost:10000/api/TodoItems"; | ||
| private TodoItem[] todoItems; | ||
| private TodoItem editItem = new(); | ||
| private string editRowStyle = "none"; | ||
| private string newItemName; | ||
|
|
||
| protected override async Task OnInitializedAsync() => await GetTodoItems(); | ||
|
|
||
| private async Task GetTodoItems() => | ||
| todoItems = await Http.GetFromJsonAsync<TodoItem[]>(ServiceEndpoint); | ||
|
|
||
| private void EditItem(long id) | ||
| { | ||
| editItem = todoItems.Single(i => i.Id == id); | ||
| editRowStyle = "table-row"; | ||
| } | ||
|
|
||
| private async Task AddItem() | ||
| { | ||
| var addItem = new TodoItem { Name = newItemName, IsComplete = false }; | ||
| await Http.PostAsJsonAsync(ServiceEndpoint, addItem); | ||
| newItemName = string.Empty; | ||
| await GetTodoItems(); | ||
| editRowStyle = "none"; | ||
| } | ||
|
|
||
| private async Task SaveItem() | ||
| { | ||
| await Http.PutAsJsonAsync($"{ServiceEndpoint}/{editItem.Id}", editItem); | ||
| await GetTodoItems(); | ||
| editRowStyle = "none"; | ||
| } | ||
|
|
||
| private async Task DeleteItem(long id) | ||
| { | ||
| await Http.DeleteAsync($"{ServiceEndpoint}/{id}"); | ||
| await GetTodoItems(); | ||
| editRowStyle = "none"; | ||
| } | ||
|
|
||
| private class TodoItem | ||
| { | ||
| public long Id { get; set; } | ||
| public string Name { get; set; } | ||
| public bool IsComplete { get; set; } | ||
| } | ||
| } |
57 changes: 57 additions & 0 deletions
57
...e/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/call-web-api/TodoRequest.razor
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,57 @@ | ||
| @page "/todo-request" | ||
| @using System.Net.Http | ||
| @using System.Net.Http.Headers | ||
| @using System.Net.Http.Json | ||
| @using Microsoft.AspNetCore.Components.WebAssembly.Authentication | ||
| @inject HttpClient Http | ||
| @inject IAccessTokenProvider TokenProvider | ||
|
|
||
| <h1>ToDo Request</h1> | ||
|
|
||
| <button @onclick="PostRequest">Submit POST request</button> | ||
|
|
||
| <p>Response body returned by the server:</p> | ||
|
|
||
| <p>@responseBody</p> | ||
|
|
||
| @code { | ||
| private string responseBody; | ||
|
|
||
| private async Task PostRequest() | ||
| { | ||
| var requestMessage = new HttpRequestMessage() | ||
| { | ||
| Method = new HttpMethod("POST"), | ||
| RequestUri = new Uri("https://localhost:10000/api/TodoItems"), | ||
| Content = | ||
| JsonContent.Create(new TodoItem | ||
| { | ||
| Name = "My New Todo Item", | ||
| IsComplete = false | ||
| }) | ||
| }; | ||
|
|
||
| var tokenResult = await TokenProvider.RequestAccessToken(); | ||
|
|
||
| if (tokenResult.TryGetToken(out var token)) | ||
| { | ||
| requestMessage.Headers.Authorization = | ||
| new AuthenticationHeaderValue("Bearer", token.Value); | ||
|
|
||
| requestMessage.Content.Headers.TryAddWithoutValidation( | ||
| "x-custom-header", "value"); | ||
|
|
||
| var response = await Http.SendAsync(requestMessage); | ||
| var responseStatusCode = response.StatusCode; | ||
|
|
||
| responseBody = await response.Content.ReadAsStringAsync(); | ||
| } | ||
| } | ||
|
|
||
| public class TodoItem | ||
| { | ||
| public long Id { get; set; } | ||
| public string Name { get; set; } | ||
| public bool IsComplete { get; set; } | ||
| } | ||
| } |
Oops, something went wrong.