Learn Blazor WebAssembly and Web API on .NET 6 by building a shopping cart application using C#. This course also provides a guide on how to integrate a payment gateway into your Blazor WebAssembly component, so that a user is able to pay for products through your application using a debit or credit card or PayPal account.

✏️ Gavin Lon created this course. Check out his channel: https://www.youtube.com/c/GavinLon

💻 Code: https://github.com/GavinLonDigital/ShopOnlineSolution

⭐️ Resources ⭐️
🔗 Copy Seed Data from GitHub: https://github.com/GavinLonDigital/ShopOnlineSolution/blob/main/ShopOnline.Api/CodeSnippets/OnModelCreating.txt
🔗 Download Visual Studio 2022 for Widows (Community Edition): https://visualstudio.microsoft.com/vs/
🔗 A Video on .NET 6: https://youtu.be/EoDY1MvYVx4
🔗 Download SQL Server 2019: https://www.microsoft.com/en-us/sql-server/sql-server-downloads

⭐️ Course Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:00:51) Create the Database using EF Core Code First Database Migrations
⌨️ (0:26:05) Retrieve Product Data from Database (Web API component)
⌨️ (0:30:17) Create Classes for Data Transfer Objects (DTOs)
⌨️ (0:36:22) Create ProductRepository Class (Repository Design Pattern)
⌨️ (0:43:05) Create ProductController Class
⌨️ (0:51:08) Create DtoConversion Class (DTO Conversion Extension methods)
⌨️ (0:57:45) Display Product Data to User (Blazor WebAssembly Component)
⌨️ (1:39:59) Display Data for Specific Product to User (Web API and Blazor)
⌨️ (2:06:07) Add Product to Shopping Cart (Web API and Blazor)
⌨️ (2:52:40) Remove Product from Shopping Cart (Web API and Blazor)
⌨️ (3:14:03) Update the Quantity of Products in the Shopping Cart (Web API, Blazor, Blazor JavaScript Interoperability)
⌨️ (3:44:01) Update the Header Menu in Response to a Change to the State of the Shopping Cart (Creating Custom Events in Blazor)
⌨️ (4:04:48) Integration of PayPal Payment Gateway into Blazor Component
⌨️ (4:36:03) Dynamically Populate the Side-Bar Menu (Web API and Blazor)
⌨️ (5:05:44) Optimise Code for Performance (Web API and Blazor)
⌨️ (5:08:26) Use Include Extension Method in LINQ Query (Web API)
⌨️ (5:14:00) User Local Storage Functionality (Blazor)
⌨️ (5:35:42) Outro

🎉 Thanks to our Champion and Sponsor supporters:
👾 Raymond Odero
👾 Agustín Kussrow
👾 aldo ferretti
👾 Otis Morgan
👾 DeezMaster

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news

source

25 Comments

  1. A very helpful and detailed step by step video tutorial for getting in touch with Blazor and learning its basic concepts. Thank you so much for providing this video.

  2. 1:25:57 , I wasted like 3 hours by skipping this part. I scratched head, did googling like crazy to find out what did I miss with my CORS setting. Then I came back to see this part again, then I came to know that I did not remove that forward slash "/" at the end. Thanks a ton sir for this amazon video.

  3. Hello~ Thank you for the course like the sweet rain of drought.

    When defining properties, a warning message is displayed.

    Warning CS8618 Non-nullable property 'Carts' must contain a non-null value when exiting constructor. Consider declaring the property as nullable.

    What settings do I need to do?

    The repository project code is "<Nullable>enable</Nullable>", but there is no warning in the video.

  4. Hi guys, I ve got the same issue like @orgrimdoomhammer2161.
    When I try to retrieve the single product every time I got the note: "Sorry, there's nothing at this address" from App.razor
    Any help will be really appreciate.
    Thank you

  5. what's a difference between; User to Cart and ProductCategory and Product.'s relations. both of them have same connection, but on products and ProductCategory says here is one to many relation, and on User and Cart says, here is one to one relation. ?

  6. if anyone is having trouble getting the CSS styles to show….
    REMOVE the "body {}" text that comes with the razor.css file. When I placed all the css WITHIN those brackets, it didn't show. However, when I removed those brackets, all styles were working properly.

  7. hi guys, i need help, i came to a part where i should get products listed, but instead i get "Loading…" and after some time i get "Sorry, theres nothing at this address", what did i miss? im geting message from App.razor file, but i have @page "/" on top of Products.razor. Any help/advice is welcome.

  8. Hello,

    I have a problem with part 8 (shopping cart). I'm using VS2022 Community and the "CartMenu" component is underlined in green (error rz10012). Also, it doesn't show up.

    A helping hand, please?

  9. Great course! It took a bit of time for me to get the cloned version working, perhaps this will help others, here is what worked for me:
    1. clone repo
    2. change connection string in appsetting.json for my server instance (server=localhost…)
    3. run migration in PM (add-migration initial)
    4. build database in PM (update-database)
    5. rt-clk Solution (choose Set Startup Projects – start multiple projects) change ShopOnline.Api to Start, and ShopOnline.Web to Start (need Api to start first, as mentioned in video)
    6. Hit Start

    I learned a great deal from this course. Thank you Gavin for all your great work on this!

  10. Thank you so very much for this course. It's always great to see the entire picture when learning this stuff with a lot of attention towards a more professional way of doing coding. I love that you broke everything down every step of the way without spending too much time on aesthetics (an "advanced" paid course, I had taken, spent 10% of their time on fiddling with CSS & HTML when it was not even the topic – and, by the end, I didn't really learn anything I didn't already know as well as spending too much time on the obvious, then glossing over/zipping through the really important stuff w/o proper explanations – the instructor was a copy-pasta and didn't quite understand the material he was teaching).

  11. without surprise I failed the backend part ^^"
    the error when trying the update-databse: A network-related or instance-specific error occurred while establishing a connection to SQL Server. The server was not found or was not accessible. Verify that the instance name is correct and that SQL Server is configured to allow remote connections. (provider: Named Pipes Provider, error: 40 – Could not open a connection to SQL Server)

  12. Ok so i think this tutorial is wrong, all that you do is only viable with project in your project.
    The part where you add the connection to the Backend should be made by adding the SwashBuckle in your service. This would Auto Update AND Generate all the relevant object and component without the need of adding all by hand like what you did. You still add the HttpClient but that s all. This make it possible to have micro services with no Hard link to the backend project like you just did.

Leave A Reply

Please enter your comment!
Please enter your name here