Blazor Server Components - Making Razor Components Easy to Use
HTML-код
- Опубликовано: 27 июл 2024
- Blazor Server allows C# developers to create single page applications (SPA) on the web without using JavaScript. One of the features of a Blazor Server is the use of Razor Components. In fact, all pages in Blazor Server are actually just components. In this video, we are going to see how to layer these components together into a flexible, powerful page. Along the way, we will identify how to pass data into components, how to style them, and more.
Blazor Server In Depth course: www.iamtimcorey.com/p/blazor-...
Source Code: leadmagnets.app/?Resource=Bla...
Mailing List: signup.iamtimcorey.com/
0:00 - Intro
1:20 - Creating demo Blazor Server App
4:01 - New Blazor Server App page: Razor Component
6:49 - Building Blazor page: Edit Form
17:17 - Building Blazor page: Styling
21:11 - Building Blazor page: C# in Blazor Page
24:54 - Building Blazor page: Progress bar
30:33 - Add Blazor Page as a Component
33:54 - Turn off page route
34:28 - Updating the Component
40:54 - Summary and concluding remarks
Thanks to Ralfs HBK for the chapters breakdown
Hi Tim. I truly enjoy watching your tutorials. I can especially appreciate your production-use approach highlighting the do's & don't. Thank you so much.
Glad you like them!
Tim, you have an extraordinary gift to teach!
Thank you!
Tim the way you convey the concepts is exceptional. You are a teacher by heart no doubt. I've learned so much in just 42 minutes.
Awesome! I’m so glad.
I have never found someone better at teaching and dotnet than you are!!! What a gem! 💛💛
Thank you!
@@IAmTimCorey Please create more videos on Blazor. Especially CRUD tutorials.
Oh Tim this is so freaking cool, I love it! Thanks so much for sharing this. You can guarantee when I graduate this summer and get a comfy software developer position, I'm signing up for your courses.
I am glad you are getting so much value out of my content.
I always was put off by learning anything web related, but blazor got me absolutely excited! Thanks for the video, awesome introduction, as per usual!
This was taught very well! Thank you for going in-depth on why, and how the components interact. It's those kinds of explanations that make the good teachers really stand-out.
You're very welcome!
Can't wait to check out your new Blazor course when I get some free time. Thanks for all the great content, Tim, and I hope you and your family are staying safe.
You are most welcome and thanks for the well-wishes.
Excellent! Other blogs make these subjects seem very hard to grasp. Your presentation is easy to digest and leaves us confident that we have learned things new, exciting and valuable. Thanks.
Glad it was helpful!
Thanks for this Tim. I'm starting to use Blazor for my internship and the Pluralsight courses about Blazor was too advanced for me to start off. This helped to ease in better and made me more motivated to learn. Please make more of these videos!
Glad it was helpful!
When I discovered Interdev I was blown away , through the years I've been impressed, but with Blazor, again, I'm blown away. Tim amazing delivery. Thank you.
You are welcome.
Great intro and very interesting implementation. I can imagine very many static and dynamic components that could be built this way. Having the code and markup in the same place seems really retro, back to orignial active server pages.... wait long enough and everything comes back into fashion.
Right now it is a convenience thing but it really should be in its own class.
Maybe it's because I've spent hours researching the topic, but most of the things finally clicked just now! Thank you very much!
Awesome!
Great job Tim! Thanks for sharing your gift of teaching. Your tutorials are a masterpiece, I will start building blazing pages :) Blazor is indeed very powerful. Thank you
Great!
This looks great, I'm going to use it in my next project at work. Thanks for the video!
You are welcome.
Wow. I mean, WOW! First things first, this was the first tutorial of yours I have watched. You clearly have a grasp on the subject. You do more than explain what you are doing. You show very quickly the nuances of certain things that drive home important concepts and features of the language. I appreciate the discussions regarding why you might do something one way, the advantages, disadvantages and things to consider... Excellent.
As for Blazor, I have been waiting for its release and I am not disappointed. I love the componentized features and the reduction of server interaction for updates and changes. It seems much simpler than Angular or React where you are required to jump through hoops to componentize the application.
I will be taking your Blazor server course later this week. thank you for the work.
Glad you like it, thanks!
Very clearly explained, new technology. For 2020 it's one of my goals to learn blazor server and I will review these videos in detail.
Thank you!
This is awesome Tim !! I would love to see a course like TIMCO using this ! Thanks for sharing !
Thanks for the recommendation. I have added it to Tim's list of viewer suggestions for videos.
Excellent quality, Tim. Your lessons are helpful!
Thanks Mike! You doing well?
I took a udemy course on Vue.js a few years back and I find this framework to be very similar, except, you know, with a type-safe language. I also find it to be a bit simpler. I love it! This is a lot more understandable to me than a javascript based component framework. Additionally, I love your teaching style and I have been watching your tutorials like I'm netflix binging and building these apps along with you. Thank you!
You are welcome.
Outstanding video! Wish I watched it before I learned some of the things you showed in this video by trial and error. Also learned many new things on how one can implement OnClick property in unclickable things like unordered list. Progress bar is also cool and opportunity to nest component one in another is just a blast! Thank you so much Tim for your great lessons!
Excellent and well explained.
Thank you very much Tim, and please stay safe!!!
Thank you!
i have been working on passing data between components for couple of days, tried all sorts of code available online.. kind of a bugger that all you have to do is call the Parameter variable like an html attribute and pass the data.. but it makes life easier..
Good content as always, helpful as always..
Keep it going....
Great Video. Loving the Blazor Server course too.
Thank you!
This is great. Clearly presented and well explained- thanks!
You are welcome.
Great job Tim. Components behave same way as customized user interfaces we used to build in ASP.Net
Thanks!
Whooo, very very nice Tim.
Love it, and gonna use it !!
Great!
Dude, your tutorials are superb!
Thank you!
I know you get this a lot but you are doing a great job helping junior developers just starting out or using dotnet/blazor/etc for the first time! I wish I could actually afford the entire course. Qn: How do I pass a blazor component the same way we passed "Name". Like what if I want to pass a button? Maybe I want to have a table where one of the columns has a button for deleting that row (or something like that)? Thanks!
Nice tutorial, I was just looking for something like that.
Glad I could help
An excellent lecture on explaining the COMPONENT of Blazor.
Thank you!
I like your attitude towards learning and programming...
Thank you!
Yes, yes I am a blazor components fan at long, last. Fantastic module service, great tutor. Thanks Tim Bo(u)
You are welcome.
Thanks Tim, your channel is great. You have a very interesting videos. I have been using aspx(winforms with c#), but now I'm testing this framework for my future projects or migrations.
Great!
I love these components.. Great job Tim
Thanks!
Tim, this is a very nice feature for Blazor. Thanks for instruct us.
You are welcome.
oh man, these components are something great!. Thank you.
You are welcome.
Thank you Tim, very ver ywell understood by your crystal clear indications. Thank you!
Can somebody can help me understand why do we have to create a new TaskModel each time? Thanks!
Very well explained! Good Job!! Thank you!!!
You are most welcome. Thanks for watching.
this is very easy to follow through! i have tried different learning videos in YT but i find yours to be truly beginner friendly. Tho i still get confused by blazor's naming convention such as attaching method on events
I am glad it was helpful.
Thank you for defining the terms.
Always! I try to make learning easy.
Super tutorial as always. I think that blazor is great. Would be good to see how to run blazor on linux server as most of the web servers are based on linux. Great tutorial Tim. Thanks
I will add it to the list. Thanks for the suggestion.
Awesome presentation. Appreciate you share it.
Thank you and you are welcome.
very useful and very well explained, thanks!
We appreciate you sharing that, thanks!
Very well explained. It is really fun to follow! :)
Glad it was helpful!
Thanks a lot Tim, Very helpful Videos.....
You are welcome.
Going back to something you have preached over and over Tim, like in your Blazor WebAssembly course about learing to read code, well from another course I have taken in the past on Spring, well in there they reference the Spring Pet Clinic. I got to thinking it might be fun to do that in Blazor.
Give it a try and let us know how it goes! I am sure you can do it.
Very nice. Tempted to try out!
Go for it!
Worth to watch...thank you
You are welcome.
Wow! Tim Corey for President!!! I can't say enough good things about Tim and the content of these videos. I've watched dozens (and dozens)of Programming tutorials from sights like Pluralsite and lynda.com and they all pale in comparison to what Tim is doing! The audio and video are very professional. It's easy both see and hear. The pacing is also perfect... as well as Tims speaking cadence and pronunciation. What a breath of fresh air to not have to struggle trying to understand someone' who is not a native english speaker and has a thick accent. (nothing against foreigners, but it is a distraction when trying to learn something new).
Personally, i would love to see more Blazor content and perhaps some stuff on Azure. (I wonder if you do any live streaming?)
Thank you! ... and I added your suggestion to me list.
Hi Tim thanks for wonderful sample
My pleasure!
Another quality video. It would be good to extend the ideas to show a complex view model with nested objects. Also the use of material design (maybe using MatBlazor). Thanks
I will add it to the list. Thanks for the suggestion.
Blazor is fantastic. Thanks for sharing
You are welcome.
Great video man thanks for the help
No problem 👍
I wish i could explain something deep and detail just like you do. Thank you
You are welcome.
Great Video !!! Would you recommend a course or book that would give me more practice examples. Also, I am a little confused about how you would implement a datastore with these component, for example if the persons you used had an id in a database or some other storage. If I could describe components they would be like object reusability in OOP except in the case of components you also have a UI. Thanks !!!
Great video, super informative
Thanks!
Really wonderful! Thanks! César
You are welcome.
Thank you so much for this video! Could you please do a more advanced section too with two way data binding with parent-child components and more features we can do with components
I will add it to the list. Thanks for the suggestion.
same question here!
Very Nice Tim !
Thank you!
Excellent and very educational video as usual. Thank you for your work.
Have you thought about making a video about the preview releases of upcoming .NET 5?
I will at some point but for now it is too early to do so.
Great video loved it! I would love to see more on components especially when there are several components with a lot of binding values and [value]Changed logic going on... e.g. Could a Class be used to manage the binding values between components and make things easier?
I noted your recommendation by adding it to Tim's list of possible future topics, thanks.
0:00 - Intro
1:20 - Creating demo Blazor Server App
4:01 - New Blazor Server App page: Razor Component
6:49 - Building Blazor page: Edit Form
17:17 - Building Blazor page: Styling
21:11 - Building Blazor page: C# in Blazor Page
24:54 - Building Blazor page: Progress bar
30:33 - Add Blazor Page as a Component
33:54 - Turn off page route
34:28 - Updating the Component
40:54 - Summary and concluding remarks
Thanks again! Over 50 videos so far. You are amazing!
Great one !!!
Thanks ✌️
This look so nice for c# developers
It really is a great option.
I'm about a third way through, a n d Loving It! (that's Get Smart, for younger readers).
One thing though Tim, you're no doubt trying to keep this relatively brief and easy for beginners, but whenever you say things like "so the whole page doesn't need to be refreshed" my mind always says "but we've been using Ajax for ages within MVC pages etc, so don't often do whole page refreshes anyway". The ajax part is usually handled within Telerik components for me.
Anyway, just saying - this is the third video of yours I've watched and I don't think I've heard you say the "Ajax" word. Just interesting.
Finished the video now ... Wow! I looked briefly at Blazor a few weeks back and it just didn't grab me - I thought "Nah - too early, I'll stick with MVC for another year at least". But now, this video has shown so clearly the elegance and simplicity of the code required to make a sophisticated UI - it's a beautiful thing - my next app will be made with Blazor for sure. And it was great to see the use of Bootstrap styles demonstrated - I'll be using those more too.
Thanks for the endorsement. Very please you found it valuable
Thanks very much .. If you could please make a video of 3 nested components navigate between each of them and pass parameters between them. eg. Mail component
I can add that to the suggestion list.
Great tutorial. I've been on the fence about using Angular or ReactJS. Now with Blazor in the picture, it only makes sense that as a .net developer I use it. One thing I'm confused on is I don't see Observable with Blazor. Would love to see how you keep the objects in sync on the client with what you have on the database.
I'll be doing some deep-dives on Blazor in the near future. I'll add that to the list of things to cover.
Thank you so much for this! I had a basic understanding of these components before, but there were some simple tidbits I had overlooked that you explained very well. I was writing components and adding them to pages as shown and using controllers with end points to accept/send data, but any time I wanted components to talk to each other, I created a static class with the information mapped out as needed to talk between controllers for each component. Now that I know the public keyword still has the same meaning in the component as it is in C# classes, this would have saved me so much time on my project. Now I know what to do for future clients to pass, say, an ID around between the components on the host page and then retrieve the associated information from the local database for that ID. Thank you so much for clarifying not only how to do that, but the overall purpose of components and explaining why. As soon as I get to a point in my new job to get a raise, I will be purchasing the yearly plan from your website to continue to grow in my field.
I am glad it was so helpful.
Thank you Tim
You are welcome.
“Poor Mary’s typecast” LOL. Nice informative video. I’d still like to see something on authentication/authorization in server side Blazor, since my default go to (ASP.NET Core Identity) fails because of the HTTP headers already being sent due to the SignalR connection.
I cover that in the Blazor Server In Depth course. You can definitely use ASP.NET Core Identity with Blazor. We set it up during template creation as well as adding it in to an existing project. We also walk through how to use the authorization (including role-based authorization) on pages and in code.
Hello Tim, i started learning C# and found your videos very good and well made, i would like to know if you are planning any Blazor Server Side gloalization tutorial to make globalized Blazor apps, good job anyway
It is on my want to do list but I need to invest more time to learn more about it before I teach it.
Great!! You have a new Subscriber 🙂
Welcome aboard!
Very well thought-out lesson, talented teacher indeed.
One tiny problem with a percentage sign punctuation in VS 2019 (ver. 16.11.10): it works only as
@($"{percentDone}%")
Usability hint: it would be nice to have a mouse cursor back on a text field after each task's addition.
Taking control of the mouse cursor location on the web isn't something that should be done (even if it can be, which I don't believe it can be). Remember that the web isn't supposed to be intrusive into your system.
Tim, thanks so much,
You are very welcome
For the section on the dashboard being dynamic for a meeting, I understand if this was to be on one browser page that everyone was looking at together. But in the case of multiple people accessing it at the same time, would the functionality to have them auto update everyone's local when an edit is made be simple as well? I suppose this is more of a signalR question... What comes to my mind is that you would have to implement something in the onclick that tells signalR to do a push of the update to all linked users in a hub. But maybe I am mistaken in the process and what exactly you were trying to express as the ability of the dynamic dashboard.
Great video! The only speed bump seems to be state management in Blazor!
How so?
Besides database storage for permanent state, you can create a class to hold some state and then just set the class as singleton service for app state or scoped for user state.
@@IAmTimCorey Blazor doesn't have session state like in MVC, so you have to roll your own or use a 3rd party library. Blazor circuits are not reliable.
awesome! thanks so much
You are welcome.
You showed a way to view the c# in the browser. I assume that only work when debugging? Using blazor is secure? Thanks for the video!
Awesome video, Blazor is going to be a game-changer !!! Question: can the components on a page share data with the main page and each other? Thanks !!
Yes. Can pass parameters into components, and components can emit events back to main page.
Tim, a quick aside here: I usually see and hear you talk about using Kestrel, but to the best of my knowledge, I have never seen you explain how to setup it for debugging. If you have not before, then I think you should seriously consider it. If you have already, then please point me to it. Thanks in advance.
Well, I go into depth about it in my Blazor Server In Depth course. I have touched on it in other videos but not fully. I can add that to the suggestion list.
@@IAmTimCorey Is this course already released or is it one of those ''for pay" courses? Thanks.
This is great! But what I really miss in this framework is the missing INotificationProperty and the use of icommand to use it in MVVM out of the box maybe is not needed for now but I miss it
Why do you miss it?
Hi Tim, thanks for this video! How can I do to pass data between two components does not have any relation? I mean those who do not have a parent-child bond.
This is outstanding :) I've been building some apps in asp.net core with some simple CRUD actions. Do you think it's a better decision to learn blazor instead?
I think both have their place. Don’t learn only one web UI. Learn all five ASP.NET Core web project types.
hi tim! i´d like to know if in the paid course we can ask you any questions that we have in the tecnology in case we´re trying to do something slightly diferent of the tutorial...
thanks for all the great contents that you always share.
You can definitely email me questions. I don't have time to give specific answers but I can usually point you in the right direction. I am working on a course-specific forum as well.
Thank you so much
You are welcome.
As a .Net developer who has been dealing with Angular for a while, I might give this a try for some (smaller) projects. Seems like a faster way to get things done.
Blazor WebAssembly seems promising too, but I worry a bit about the initial load times.
It definitely is faster to get going when you are already working with C#. I love it for getting a project up and running quickly.
Thanks a lot !
You are welcome!
They look easy to use. You showed us how to get data into the component but it would be nice to know how to get info back out to the parent page/component.
I will add it to the list. Thanks for the suggestion.
hey tim, I just got into your blazor course! and i´m very excited with it,because I´ve always struggled on learning javascript.... reading in the net i´ve seen something about using blazor to write mobile apps and got curiurs about xamarins future.... that´s because i´m also learning xaml... do you think xaml will loose it´s worth with blazor growing? thanks again
I don't think so. I don't see Blazor as competition to Xamarin or WPF/UWP. Instead, I see it as a complementary option. We now have more of a spectrum of options. That's a good thing. There is no one perfect option for every scenario so having multiple means we cover more scenarios better.
Very nice Tim!
Thoughts on the components: the bootstrap portion of this gives responsive pages out of the box. Multiple components can turn a page into chaos on a small screen. Further, I would prefer to test a component as a page first, then test a page with multiple components (isolate bugs).
Suggestions: I understand that .net core 3.2 and the blazor client will be released in May. Could you be so kind to give a video on the migration from 3.1 to 3.2 and a video on .net core client? I suspect there will be many youtube videos on .net core client when it is released but I like your teaching approach.
Yes, you always need to think about who is going to use your page and design as such. In this case, our task lists would stack if you were on a phone so it would look fine. You would just need to scroll a bit more. As for upgrading to .NET Core 3.2, this demo wouldn't change much at all. Changing to Razor Client Side would change some things, though. I will be going over that as we get closer to launch.
I would love to see an example of blazor being used with MVVM.
Or even better yet, using caliburn micro with blazor so you can use the same view models with wpf as you do with blazor to have more code sharing and not violating the dry principle and being able to do view model first approach.
I can add that as a suggestion, although I don't usually encourage reuse of the ViewModels. The VM is part of the UI (not a separate layer) and I often find that it is not usually a good idea to reuse it. Doing so means you make compromises in your View or VM so that it works in both places. That isn't following DRY, that is really a violation of OOP principles.
Hi Tim, great tutorial! Quick question, what approach should I use to go about generating word/excel documents from a template using blazor? I want to gather input from the user, and use those inputs to fill out a forum which the user can then download. The closest thing I've found has been using syncfusion however it appears a license for them is quite expensive. Do you have any suggestions? Again thanks for the tutorial!
You will probably have to use a third-party system. You might try EPPlus for Excel (but they don't do Word). They still cost, though. Syncfusion does have a free version for personal and limited commercial use, so that can get you started. If you are using this for a business, though, you are probably going to need to pay for it.
Thanks!
Thank you!
Thank you
You are welcome.
I would love to see a video on adding blazor components to an existing ASP.net core MVC application.
Thank you. I have added this to Tim's list of possible future topics.
Thanks Tim. I'd be curious about a database update event triggering without having to refresh the page to see that update. Is that something that is possible?
It is tricky but possible. You can listen to the database changes via an event and then trigger the change or you can periodically check the database for changes and, if there are some, update the page.
38:02 when you say from a db, what else do you need to get the new updated tasks as soon as they are updated or inserted on the database?
I'm assuming you mean that someone else updates the database and you want your screen to reflect that. If so, you would need to poll the database or create a service that watches for database changes and triggers an update on your computer. Usually this is done using SignalR to tell the UI that a change has been received. The database polling or listening for database events is up to you.
Was hoping you'd do a java one for april fools! :)
Excellent suggestion! Maybe next year.
Great!
Can you do a tutorial on dynamic form generation based upon xml/jason feed or data from db?
Topic suggestion noted and added to my list, thanks.