Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

54 Comments

  1. Good tutorial, helped me to understand how to use Blazor a lot.

    Had to Install-Package Microsoft.EntityFrameworkCore.SqlServer in order to make use of ā€œUseSqlServer()ā€-method.

    Thx for your effort.

    1. Oops, Guess I missed it out. I have updated the Article with the additional required package. Thanks for pointing it out! Blazor is quite an impressive stack, right? šŸ˜€ Thanks!

  2. Nice job, I love this. Do you have an example of the same thing using the Blazor Server? I think by making one and comparing the webassembly and server versions it can clearly depict the applicable differences and would make this a complete Blazor tutorial.

    Once again, great job.

  3. Very nice walkthrough, Mukesh, thank you for doing this.

    Two questions:
    1. Is scaffolding an option to build the Create/Edit/Delete CRUD pages?
    2. Why javascript? Blazor is specifically designed to use C# instead of javascript, so why not C#?

    Thank you again.

    1. 1. As of now, I believe it is not possible to scaffold Razor/ Blazor Components. There might be ways like maybe a code snippet template on VS?
      2. Honestly, I believe Blazor is still a not well-matured tech. That is exactly why Blazor supports JS interop. There is still quite a lot of work pending on Blazor. But I guess I have used C# almost everywhere except for the alert calls in this tutorial.

      Thanks for the feedback Ted šŸ˜€

  4. Good job. I took some time to follow through and it was COOL. I look forward to getting more tutorials from you in more advanced projects. Your tutorial is detailed. Thank you

  5. A few comments:
    1. I finally finished the tutorial after having pretty badly mucked initial migration. Turns out I took you too literally in the appsettings.json and left my configuration string as the string ā€œDefaultConnectionā€! Once I went into SQL Server and created an empty database, I then got the expected ā€œNo Records Foundā€ result from Fetch Data.
    2. The tutorial was often silent on the using statements that were necessary to get a clean build. It is clear the tutorial was not aimed at less experienced developers like me. It would be helpful to do a little optional hand holding for folks like me just in case they were stymied by the errors.
    3. Found a strange action by VS 2019 v16.6.2. In creating the ā€œDataā€ folder in the shared project, I inadvertently left the default name of the new folder (NewFolder) on the folder and continued with the tutorial.
    Later I saw my error and renamed the NewFolder to ā€œDataā€, which should have originally been the name. However, VS 2019 V16.6.2 does not respect that new name. It seems that the name ā€œNewFolderā€ is somehow ā€œstickyā€ in VS 2019 and I had to revert the name back from ā€œDataā€ to ā€œNewFolderā€ for everything to build properly (and get the ApplicationDbContext.cs to be recognized).

    1. Hi, Great to hear.

      I will try to leave a note in my future tutorials to help in adding references and so. I Hope that you liked the implementation.

      Thanks for the feedback.

    2. Thank you very much Mukesh for the simplicity and clarity of your code.

      Pls let me know your email address.

  6. Hola Mukesh Murugan , me parecio excelente manual, seria bueno un ejemplo maestro detalle

    Gracias

  7. Excellent walk through.
    it simple and clear.
    If i may suggest could you please doing like this walk through with A blazor server with the following :
    1- Paging functionality – in its simple way – because this is an essential with huge data.
    2- Using TailwindCss A utility-first CSS framework, it is great and powerful tools.
    Thank you very much for sharing this article.
    Best Regards.

  8. I like what you guys tend to be up too. Such clever work and exposure!
    Keep up the wonderful works guys I’ve included you guys to our
    blogroll. Hello, I check your blog like every week. Your
    story-telling style is awesome, keep doing what you’re doing!
    I could not resist commenting. Exceptionally well written! http://linux.com

  9. Application shows message ā€˜An unhandled error has occurred’, when inspecting through google chrome I see the details below:

    crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
    Unhandled exception rendering component: Response status code does not indicate success: 500 (Internal Server Error).
    System.Net.Http.HttpRequestException: Response status code does not indicate success: 500 (Internal Server Error).
    at System.Net.Http.HttpResponseMessage.EnsureSuccessStatusCode () in :0
    at System.Net.Http.Json.HttpClientJsonExtensions.GetFromJsonAsyncCore[T] (System.Threading.Tasks.Task`1[TResult] taskResponse, System.Text.Json.JsonSerializerOptions options, System.Threading.CancellationToken cancellationToken) in :0
    at Blazor.Learner.Client.Pages.Developer.FetchData.OnInitializedAsync () in :0
    at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync () in :0
    at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask (System.Threading.Tasks.Task taskToHandle) in :0

    1. 2 things I had to do to get this working

      1. Reference the .Client app in the .Server app. This gives the server an index.html to find
      2. Change the AddDbContext
      From: …options.UseSqlServer(Configuration.GetConnectionString(ā€œDefaultConnectionā€));
      To: …options.UseSqlServer(ā€œā€));

  10. Very nice article! Line wise description is good
    My Question: On successful insertion, I dont see any record in SQL Server Database…..
    Please guide

  11. Excellent tutorial! Very easy to follow along and well structured. I look forward to reading more of your stuff! A few I would love to see which all pertain to the list pages would be:

    1. Implementing search criteria (aka filtering) the data.
    2. Paging
    3. Sorting

    Thanks!

  12. Very Nice introduction to Blazor!
    It’s possible a future article about integrate Blazor in the Clean Architecture.
    Thanks.
    Josep

  13. Excellent article. Perfectly clear instruction and it helped me understand the change from MVC to Blazor. Thank you.

  14. Thanks a lot for a great article. But once the application is built, how to deploy such an application to Windows Server IIS 10? I have not found any good articles about this topic. Any tip on how to do that would be appreciated.

  15. Very nice tutorial. Thank you.

    I believe there was one small mistake in the Edit component.

    The ā€œdevā€ in dev=ā€devā€ should be @dev.

  16. Great! Fantastic! Thank you for the time and information shared!

    The Validation messages are there but I thunk the rules are missing upon defining the model class!

    Happy Coding!
    Orama

  17. Already followed your step. but this happens

    PM> add-migrations Initial
    add-migrations : The term ā€˜add-migrations’ is not recognized as the name of a cmdlet, function, script file, or operable program.
    Check the spelling of the name, or if a path was included, verify that the path is correct and try again.
    At line:1 char:1
    + add-migrations Initial
    + ~~~~~~~~~~~~~~
    + CategoryInfo : ObjectNotFound: (add-migrations:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException

  18. Can I apply this to the server side? I am not sure if you are still continuing to write a post about server/crud operation.
    Thank you!

  19. Hello, thank you for your tutorial.
    I have questions:
    _ in the _imports file I had put @using BlazorApp1.Server.Models instead of @using BlazorApp1.Shared.Models, do you know why?
    _ I would like to know if I can put other information in the @developer/edit page. For example id in a card box and add text box for comments for example. I think I have to modify the database to add this new data (in the text boxes) but this data should not be displayed in the table
    _ Is it also possible to add lists for each row in the table?

    Thanks in advance

  20. Thanks for the tutorial, it was just what i was looking for to get me started on blazor and the best i found for this stage of my learning :). One thing though that may help, (and it was something i discovered from reading another article), and that’s to add the controller you can use the ā€˜Add > New Item > API controller with read/write actions using entity framework’, which makes the controller methods a little more up to date, just watch out for the spelling though (entity calls it DevelopersController (plural) vs your ā€˜DeveloperController’ which fooled me for a while when it wouldnt work but the code still compiles lol. that said both yours and the auto created one both seem to work just fine. keep up the good work. Bob

  21. Hi
    How can I add a order to the GetAllAsync.
    Also is there a way to call a stored procedure?

    Kind regards
    Willie

  22. I am getting an error at line56 of the FetchData.
    line56: developers = await client.GetFromJsonAsync(ā€œapi/developerā€);
    The error states: Unhandled exception rendering component: The provided ContentType is not supported; the supported types are ā€˜application/json’ and the structured syntax suffix ā€˜application/+json’.

    I was reading that this has to do with reading html/text instead of Json.
    I am wondering in this example, how would I fix this or use an alternate method instead of client.GetFromJsonAsync();