Answered by:
Blazor application and entity framework data flow

Question
-
User2049598883 posted
I have made a blazor application, which can save data into database, however I am having trouble understanding how each part of my implementation wroks.
1. In my blazor page I am injecting ITagRepository , so does it mean that app starts
2. with blazor page -> where code line tagRepository.CreateTag(Tag) runs
3. this code line uses ITagRepository
4. which implements TagsRepository, and this TagRepository contains code line :
private string url = "api/tags";
5. so this line activates controller which does the job?
Is it a correct order? If yes, what happens at this line below from TagRepository?
var response = await httpService.Post(url, tag);
The whole code is below.
//1. Blazor page: @page "/tags" @inject ITagRepository tagRepository <h3>Tags</h3> <TagForm Tag="Tag" OnValidSubmit="Create" /> @code { Tag Tag = new Tag(); private async Task Create() { try { await tagRepository.CreateTag(Tag); } catch(Exception ex) { Console.WriteLine(ex.Message); } Console.WriteLine("Creating tag.."); } } //2. ITagRepository: public interface ITagRepository { Task CreateTag(Tag tag); } //3. TagRepository: public class TagRepository : ITagRepository { private readonly IHttpService httpService; private string url = "api/tags"; public TagRepository(IHttpService httpService) { this.httpService = httpService; } public async Task CreateTag(Tag tag) { var response = await httpService.Post(url, tag); if (!response.Success) { throw new ApplicationException(); } } } //4. Controller [ApiController] [Route("api/tags")] public class TagController:ControllerBase { private readonly ApplicationDbContext context; public TagController(ApplicationDbContext context) { this.context = context; } [HttpPost] public async Task<ActionResult<int>> Post(Tag tag) { context.Add(tag); await context.SaveChangesAsync(); return tag.Id; } } // 5. IHttpService public class HttpService:IHttpService { private readonly HttpClient httpClient; public HttpService(HttpClient httpClient) { this.httpClient = httpClient; } public async Task<HttpResponseWrapper<object>> Post<T>(string url, T data) { var dataJson = JsonSerializer.Serialize(data); var stringContent = new StringContent(dataJson, Encoding.UTF8, "application/json"); var response = await httpClient.PostAsync(url, stringContent); return new HttpResponseWrapper<object>(null, response.IsSuccessStatusCode, response); } }
Tuesday, November 24, 2020 6:09 PM
Answers
-
User-821857111 posted
You haven't said what kind of Blazor app you have built, but if it is an ASP.NET hosted WebAssembly app, then the majority of it runs in the browser. That means the page and the repository are downloaded to the browser and execute there. The line in the tag repository that calls the httpService actually sends the data to a Web API end point that is hosted on a server. It does this using Fetch (the modern equivalent to XmlHttpRequest - or AJAX). The Web API controller process the request and communicates with the database on the server.
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Tuesday, November 24, 2020 6:52 PM -
User475983607 posted
Follow the official dependency injection documentation. Typically a service exists in a separate class file not within the Blazor Page. The service is registered the the application startup file. Once registered, you can use the service by injecting the service in a Blazor Page.
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Tuesday, November 24, 2020 6:57 PM
All replies
-
User-821857111 posted
You haven't said what kind of Blazor app you have built, but if it is an ASP.NET hosted WebAssembly app, then the majority of it runs in the browser. That means the page and the repository are downloaded to the browser and execute there. The line in the tag repository that calls the httpService actually sends the data to a Web API end point that is hosted on a server. It does this using Fetch (the modern equivalent to XmlHttpRequest - or AJAX). The Web API controller process the request and communicates with the database on the server.
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Tuesday, November 24, 2020 6:52 PM -
User475983607 posted
Follow the official dependency injection documentation. Typically a service exists in a separate class file not within the Blazor Page. The service is registered the the application startup file. Once registered, you can use the service by injecting the service in a Blazor Page.
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Tuesday, November 24, 2020 6:57 PM