Intro to Blazor (Preview 7) – Replace JavaScript with client-side C#

48
13



Blazor is a huge new piece of technology at Microsoft. It is so amazing that while it is not yet out of preview mode yet, I wanted to show off some of the power of what it can do. Now if you are not familiar with Blazor, think of it as C# on the client-side. Instead of powering our web applications with JavaScript on the front-end, using Blazor we can run C# code to do the same thing. In this video, we will see what Blazor is, how to build a project with it, and how to use it to connect to an API to receive and post data.

Source Code:

Patreon:

Newsletter signup (with exclusive discounts, giveaways, and more):

Blazor Templates:
Contact Form Template:

Template Installation Command: dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview7.19365.7

Nguồn:https://wijstaanvooronzegrondrechten.org/

48 COMMENTS

  1. Hi! Really nice introduction. Would you recommend using HttpClient as in your example or switching to gRPC?
    On the client-side blazor is it possible to read and write files on the local computers hard drives and if so what's needed?
    And what about printing – can you print directly from code, without dialogs poping up, to the client PCs printers?

  2. Tim! great stuff you got there. What do you recommend for a veteran desktop developer who has been programming VB for the entire time? Wanna switch to ASP.NET Core + Blazor for future projects. What are you recommendations for a head start?

  3. Thanks for very good, Just curious how Garbage Collector works in browser, Will it create problems when object properly not disposed

  4. I am confused, so people will be able to see my c# source code on the dev tools right?Is this doesn`t brings any security issues? Will people be able to download and still my app easily?

  5. Does anyone have suggestions on how to publish the 3 projects (client, server, shared) to Azure? I'm new to Azure, so maybe links to publishing non-Blazor apps would be a good start. 🙂 There are many excellent tutorials on how to publish an application as a single project, but that isn't how a real application would be written. Are there special gotchas with regard to Blazor?

  6. Wow…this is awesome! I’ve been hating js and its successors for their very short life span. Was working on angular and they made a significant structural change in angular 4 and had to learn it again.
    I hope Blazor will outlive other junks and wont die prematurely like silverlight.

  7. Thanks Tim. Just a bit of critque if you will allow it – would be helpful if you might focus on the subject matter. Just plain old white, ugly pages can get across all the points you need to make given the subject. Font Awesome and bootstrap may be helpful to your audience (I dont know) but the fluff up the video and distract from your points — which are otherwise good.

  8. I think your video has defined my ideal app! .NET Core, Blazor, Web Assembly and Dapper deployed to an Azure App Service, but I need some guidance. If I just take the provided Blazor wasm template and publish it to an Azure App Service I get some sort of HTTP or Routing issue. When I click on the Fetch Data button for the Weather Forecast it just hangs on Loading…
    This is because the GetJsonAsnyc fails with a "System.Text.Json.JsonReaderException: '<' is an invalid start of a value" which I've realised is the Page HTML being returned.
    I've tried using Kudu to add GET as a valid HTTP verb to the web.config just in case but no effect.
    Any ideas?

  9. thanks
    i am use Core 3.1 and vs 2019 on my local working fine but after publisher getting Error this
    HTTP Error 500.31 – ANCM Failed to Find Native Dependencies

    Common solutions to this issue:

    The specified version of Microsoft.NetCore.App or Microsoft.AspNetCore.App was not found.

    Troubleshooting steps:

    Check the system event log for error messages

    Enable logging the application process' stdout messages

    Attach a debugger to the application process and inspect

    For more information visit: https://go.microsoft.com/fwlink/?LinkID=2028526

    my website
    http://onifaie-001-site1.dtempurl.com/

    i don't why this Error and what's your eccpect the Error come from and where i can edit file

    i am install sdk 3.1
    i cheakbox enable prview
    but stll not work
    what's can i do
    i waiting your answer
    see soon

  10. So outside of the dev tools, how is caching set during runtime? For example, am I as the author of the web site able to tell the user's browser to cache Blazor stuff, instead of downloading each time? Or is that entirely dependent on the end user doing that? I realize 3 MB isn't that big in the grand scheme of things, but you can definitely see it on slower mobile connections.

  11. Hi, I'm getting an error when trying to run the command to install the blazor templates, do you have any idea how to fix this? here is a screenshot of the error msg: https://puu.sh/EH7Hc/8b129cb751.png

  12. Thank you for your work man, this is amazing. Do you have any Udemy C# .Net,Powershell stuff i can purchase? I have ALWAYS hated JavaScript, i hope Blazor stay relevant a few years.

  13. Damn you 're so good at this. been full stack developing for 4 years but I still learned a lot of basics or overlooked deltails from you. Keep up !

  14. 49:32 – 50:05 could you please explain your voodoo? how did it know it should remove/add/hide the elements from the DOM via a "if" statement?

  15. I think this is great, once they work out all the kinks. I hope it's running precompiled code instead of interpreted like JS. I've been working with TypeScript and Angular for a few years on the front-end. I love it but ultimately, it's still javascript under the hood. Working with large dynamic and editable grids was a challenge due to performance. Looking forward to playing with a stable version of this.

  16. It looks like there is a change since the video release in the project creation (as of October 2019): Download the 3.1 preview templates, Choose "Create a New Project", Choose "Blazor App" (not Web Application), Pick your project location/name, Choose "Blazor WebAssembly App" AND check the little "ASP.Net Core hosted" box on the right BEFORE clicking create. This gets you to the same place as the video. Thanks, Tim, for putting this together.

  17. I've got an issue installing the preview templates as seen in this video. When downloading the templates via nuget it displays the error regarding the restore.proj, that my installed .netcore verison netcoreapp1.0 isn't compatible to the required version netstandard2.0. BUT i have installed current netcore framework 3.0

  18. hi tim, i have a question….. at around 1:10:26 you talk about how you can't just called @onclick="@BuyNow(person)" and instead use an anonymous lambda function( i think that's what you do)….can you explain why you can't just put BuyNow(person)?

  19. This looks a lot like angular made in C# 😀 i love it and i hope this will take off i'm not a fan of client side at all but with this i think i will have lot of fun, only concern i have if they are not too late with this technology , because by now all C# webdevelopers use front-end like vue , angular or react… but this looks promising !

  20. Great video Tim. I get different project template results though, unfortunately not the useful (Core hosted) 3-in-1 Server/Shared/Client solution like you have. Interestingly I only get the Blazor server component, and the word 'blazor' appears to have been removed from the 'ASP.NET Core Web Application' description like you have at 4:54.
    I've updated VS2019Preview, latest Core 3.0 and Blazor templates 3.0.0-Preview9.19465.2 so I'm wondering surely they wouldn't have dropped the 3-in-1 template, I must just have an install problem.

  21. I've tried your installation command (but with latest version) + I updated VS 2019 to the latest version, downloaded latest .NET core 3 sdk + I downloaded blazor support for VS from here: https://marketplace.visualstudio.com/items?itemName=aspnet.blazor
    And I don't have blazor templates inside ASP.NET Core templates class, but I have a blazor templates class and there I only have blazor WebAssembly and blazor Server-side. Do you know how to fix it? I want the exact template you used – Blazor (ASP.NET Core hosted)

    Update: The way to get the same template as in your video is different now, now you go to Blazor App – Choose Blazor WebAssembly App – check the "Asp.net core hosted" checkbox.

  22. JavaScript is still behind the scene, just so everyone knows and this is just another useless layer on top of it. It comes down to the argument of using entity framework vs. stored procedures…Entity framework is nothing but garbage, extra layer which slows down the things.

  23. why are "Program.cs" and "Startup.cs" files available to the client? (They're visible inside the debugger window in chrome and they're in the blazordemo. client project)

  24. Tim, this seems quite promising for a project I'm working on NOW, but I heard your advice to NOT put this into production for a while. I have a Console Application that receives JSON data from an external application and it forms a handful of Lists, updating them as JSON data is received every few seconds. I'd love to make the contents of those Lists viewable from a webpage, and I am doing that VERY crudely by simply writing to a .htm file that is accessible to the Internet via IIS (http://97.105.242.110/occupancy.htm and http://97.105.242.110/displays.htm) but as you can see I have a hard refresh once every second so that I can display any changes as they occur "in real-time" so to speak. I'd love to simply update the counts or status without having to refresh the entire page, as well as allow the end-user to modify values such as background and text colors so they can tailor the appearance of those pages to their liking. What recommendations do you have for me to accomplish this more efficiently and elegantly? The hard refresh is killing me! LOL Thanks in advance for your time! LOVE YOUR VIDEOS!

  25. Whose brilliant idea was to name the file extension .razor? Why not name the freaking thing .blazor and done. Won't that make more sense?

  26. Tim since I am on a Mac and using the Command Line here is what you would run to get the same thing: dotnet new blazorwasm -ho

LEAVE A REPLY

Please enter your comment!
Please enter your name here