Blazor on ASP.NET Core 3.0 | Fiodar Sazanavets | Skillshare

Blazor on ASP.NET Core 3.0

Fiodar Sazanavets

Blazor on ASP.NET Core 3.0

Fiodar Sazanavets

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
14 Lessons (37m)
    • 1. 0 Introduction

      2:18
    • 2. WebAssembly Blazor

      2:09
    • 3. Server Blazor

      1:53
    • 4. Setting up the solution

      2:00
    • 5. Razor components overview

      3:59
    • 6. Componet parameters

      2:40
    • 7. Data binding

      1:54
    • 8. Nested components

      2:02
    • 9. Lifecycle events

      4:29
    • 10. Separating code from the markup

      2:46
    • 11. Cascading values

      2:21
    • 12. Template parameters

      3:25
    • 13. Layouts

      1:23
    • 14. Dependency injection

      3:24
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

54

Students

--

Projects

About This Class

This class will teach you Blazor - a software development platform from Microsoft that allows you to write client-side web applications without knowing any JavaScript.

There are two types of Blazor - client-side and server-side. Client-side Blazor allows you to compile C# code and run it on top of WebAsembly directly in the browser. Server-side Blazor keeps the persistent connection between the server application and the client application components, so any of your page elements can be manipulated asynchronously in real time from the code running on the server.


While client-side Blazor is not quite production ready, server-side Blazor has been released as a part of ASP.NET Core 3.0 release. Therefore, this what we will be focusing on in this class.

By the end of this class, you will know the fundamentals of Blazor and will build a weather application which can show temperature either in Celsius or Fahrenheit.

Meet Your Teacher

Senior software developer specializing in .NET with several years of experience

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. 0 Introduction: welcome to my course on many things were signing up for it. Traditionally, if you wanted to build a browser based application, you needed to use JavaScript on one of its many frameworks. However, not all developments. No job script I Knew Technology released by Microsoft. Norma's Blazer eliminates this problem for that, not developers who are only familiar with C shop. Nothing else. You can now write C sharp cold on rather from your browser. My name is Shoulder says On of us. I'm gonna see yourself development. I've been specializing dot net for several years since Blazer was made available in preview . I was really excited about this technology. Blazer is a technology of is extremely useful in many of real life situations, so I can't wait to my knowledge of it to you since dot Net core Version three was released , Please, it was made available is the production of any technology. However, as of today, the only place a type it was gratefully available production. It's service side laser Glenside Blazer is still being worked on, even though it's available in preview like yourself does not recommend to use the production. One way is a product initially started, the initial intent of it was to make the net run on top of whoever someone directly in the browser. This is exactly what Glance side lays. It does. However, even though Clan said blaze is not fully available in production, there's nothing to worry about as it uses exactly the same courting Parton's Sarah Side Blazer does. So once clients have, Blazer has been made available in production. You're cold can easily deported on, even several said blazing. She's the same goal. That class I blaze. A well designed ful. You'll still be able to write your client side applications without the use of any job skin . So let's have a look of blazing a bit more details. 2. WebAssembly Blazor: The initial in terms behind Blazer project was to make it run on Web assembly in the browser directly. However, since the team has encountered some technical difficulties implementing it, they came up with the service side blazer. Remember the technology production a lot quicker. Web assembly is a new Imagine Web standard that allows its around compiled cold in the browser in the bus. To do so, you have to install various plug ins such as flush several light or java With Web assembly , you can just write any compiled called on any evergreen browsers. Any more than browser will support it. You may ask, When would you need to replace JavaScript? Doesn't do everything that you would need to do. Well, it's sort of death. However, JavaScript is an interpreted language. Interpreted means that every single statement gets examined. I'm converted into bite cold before it runs with compelled language. The whole software is already in by cold. Therefore, very little interpretation is required on the software will run as near native speed. Another advantage of Web assembly is to enable back and developers who only knew some compelled back and language to be able to write ups for front end without having to learn JavaScript. And, of course, as a mechanism that enables its around compiled software, the assembly will enable you to do many things in the browser that you couldn't do before. For example, you will be able to run high and games definitely in the browser. You will be able to use augmented reality. I do many other things that you could only previously do inside of desktop applications on the intention to hand blazer. He's still enable you to do all of that by using Dartmouth inside of the browser. That is the main advantage off using Blazer. 3. Server Blazor: suicide blazer use exactly the same cold off the client side blazing, but the whole thing. What? It is different. It will give you the same advantage as a black and developer to enable you to write from applications. However, your cold logic will not be executed in browser instead of that. Your hasty more components, which, by the way, you don't always have the right from scratch, as the medication will help us in, raise a sentence that you can use will be connected in real time to your service side components. But, well, it's not this connection known. A sing along signal Our allows its transfer data between client and the server in both directions in real time. So as long as you have a reliable Web connection, your service, I believe Czar will be working and you call deployed on the server will be when you make your browser based components in real time. Since I blaze is something that is available in production today, it has been made available with dot net core version 3.0, so it is a better established technology, them client side blazing. In any case, even if you start a seven side blazer. Today you will be able to easily port called clients I blazer later if you need to. Even when both types of blazer make full production ready, they're still advantages and disadvantages of each one of those. Precisely because satisfied place is better established technology, we will focus now. Of course, in tough, however, we will demonstrate to the differences between client side answers and blazer, so this course will make it from anywhere with both blazer types. 4. Setting up the solution: just started. We'll need to create replace the service side project. To do so, we need to open Visual Studio 2019 Uncle. You can create new project Blazer opposite simply that we are using, even though service Side Blazer uses a spirit net score well. Application as a base template. Visual studio has organized those two templates really nicely, so you can easily so this have blazer components to it. Next, we need to name our project. I'm naming mine raising components finally, and here we are selecting the blaze of appetite blazer. Web assembly up is the client side blazer, while Senator Side Blazer is known as Blazers Server up. We'll select this. We will have a look at Blazer Web assembly up later. I'll just live life completely for hashish appears because everything will be doing is done purely locally, and I don't need hasty peers for that, and now we'll wait for the projects to be created. So here's our project on most of the Blazer components, which have raised extension, I look at it and pages folder. There are some top level components, such as imports on up, which I use for configuring the entire application, and there are also some shared Leo's. So now we're ready to start 5. Razor components overview: The most basic component of blazer is a component close, which will be contained within the file with razor extension. Component class is a mixture off C Sharp raises Syntex on the HTML. Once you compile the application behind the scenes, it will be compiled into C sharp class on Hasty ML Page. Whatever your file is called, the C Sharp Glass will have the same name after the compilation. Normally raise a component class will have some raise. The directive, such as page on Cold Page directive, provides the route to your page. So essentially it specifies with path to use after the domain name of the application itself. Cold directive. We'll have the C sharp cold. It is essentially the content off your C sharp glass. I'm gonna various other directives in the system of itself that link your HTML components with C sharp cold. For example, in this case, here on click action on the button with the title Click Me will execute This particular void method on the current count will be implemented, and then whatever the value of the current count variable is, it will be instantly displayed in this element here. Every action in razor component. Israel Time. Whenever you use this art characters two point your heads symbol mark up to your variables . Any manipulation off mark up will be reflected in C Sharp on vice versa, as well as having counter raise a component. There's some other razor components as well. So here's your index page. And, as you can tell, it's route is just a default route. Here's the first data page with some more complex logic and so on. Just like you can do with Raise the Pages M. V. C. Webb, a p I or any other types off sp dot net applications. You can have some shared components in our case, we have this layout layout will be a shares component that will be used by all raising components. Likewise, we have a novel menu, which is in the vocational menu that will be used regardless off what raise a component ur own. As you have probably figured out by now. In our example here, each raise a component is its own page. Even though you can mess different razor components together, abduct razor file tells it which layout to use as a default layout. Let's build our application and see it in action. So here is a collection of Fraser components that we had a look out previously. If you remember, we have this bottom, which model directly to a C sharp method that will be located on the set of A. If I click on it, it changes the value of the variable, which is displayed here straight away. And there's a fresh data which is way more complex. Razor components I love concludes our overview off a basic structure off a raise the application. 6. Componet parameters: to make razor components really useful. You can pass parameters into them from other components. And another thing that we'll talk about in this lecture is the ability to nest. One raise a component within another one to do so. You just use a center similar to cage him well, but instead of your normal hey html tag names, you are the razor component name. So while we are looking at Index page which is our home page where reference encounter raise a component, so then they should be exactly the same. I'm by convention the all start with capital letter on you so called possible case and then in in here we're passing increment amount parameter, which has a value of 10. So we are rendering counsel rise a component, another person parameter into it. Let's open counter, raise a component and see what it does. So as you can see, we have modified it slightly. On. Here is a parameter that were passing into it. Please know that it absolutely must be public, otherwise it just will not work. It is an integer on default value of it is one. Any parameter is marked with parameter attribute. Otherwise you wouldn't be able to use it as a parameter. So by default, if we just rented this counter somewhere without passing any parameters into it, the whole logical work exactly the same way. We are adding value off increment amount to current count, which by the fault will do one which will be exactly the same as incremental current count by one. However, in our case, as we're setting this follows to 10. We will be increasing current count value by 10 Every time we click the bottom, let's launch the application and see how it works. So as you can see it, we now have counter on the home page. If you click on it, it does indeed implement the value by 10. However, if we take ourselves to counter Page, which doesn't have any parameters passed into it because it's a standalone page, it's still increments by one because one is the default value off that particular variable . And this is how you use component parameters and blazer 7. Data binding: practice this, we have seen two examples of data binding in Blazer. Direct data binding in paragraph like this, with the current value of particular variable, gets updated in real time. I'm on click event, which is attached to a service side Implement count auction as well as this. You can also tie any of your controls. So any particular variable, you know, case here we have others and checkbooks, which, if checked, will apply inclement amount. Other husband passed from index page because it's tied to use increments parameter variable . If it's unchecked, however, it will just return one so the logic will operate as if we've never passed any parameters into the counter. Let's build our solution and see what it does exactly. So our label shows us what is the value. That's what husband passed as a parameter value into all raise a component because we haven't check this check box. The value isn't used on default value if one is used instead, if we do check this check box, however, the value of 10 is being used. When I was stunned alone Counter page because nothing has been passed US default value. It's just a default Institute value of zero. As you can see, it doesn't get implemented if you check this box. There are many other ways you can bind your HTML elements to your C sharp methods and variables the ones that showed you here, but the most widely used ones. 8. Nested components: because raising components are written us. Hey, HTML elements inside of other razor components. You can let them together. You can just open the talk and close it as you would have done in either XML or HTML. In our case, we are in certain his Tamil into this council. Raise a component. But you might ask, This is just a Hesham el, this is isn't actually a raise a component, right? Let's have a look at our counter. Raise a component to see what's going on. As you can see here, as well as having increment amount parameter as we always had, we have another parameter off type run the fragment aunt around the fragment. It's something that allows it to insert any arbitrary hedge. Tim. Well, in any other razor component, if we have a look at where child content is actually being used, it's here. It's just a development of the bottom of the page. So essentially, what will happen now is council raise a component will surrender, as it previously did. On at the bottom of it. You will see this message here, and this is what I meant on if I once again navigator standalone counter page because nothing is being passed into his child context. Nothing is being displayed here. Of course, this is just a simple example. It has some more razor components. You could just unless them inside one another. In that case, invariable type will be the component class that is generated from that razor component. 9. Lifecycle events: each raise a component has life cycle events, which you can modify as a component is being initialized inventors. If you have ever called it in a speeded net, webpages or reservations, you will be fully familiar with this concept. And this was the events every razor component inherits from base component class. This is why these events are over. Rights of the matters present there on each of these life cycle events comes as either synchronous roid method or asynchronous task method. It will have exactly the same name, but the task version will have a sink. Advance on initialized is being called first when least lifecycle event is called The razor component hasn't rendered yet, which means that you can't manipulate see shop variables already, but you cannot manipulate any dumb HTML elements. In our case, we're certain years increments parameter too true by default, because otherwise it's just falls by the fold. Set promises. It's something that is being called us promises of being said Parameter View is an object that contains all the parameters that are being being passing. To raise a component, you can override the values at any point once parameters have been set on parameters. Set event is fired where you can modify the values off existing variables that have already hard parameters applied to them. So in our case here, this how it it will work, barometer amount is just a variable. If you would have this logic inside of set parameters, it would initially be set to zero because default value off and is zero on zero multiplied by hundreds is your After that, barometer man will be just over written by whatever volume is passing to implement amount parameter, so that logic would be completely useless. However, if we do execute this logic after parameters have been set, it is still valid on after render gets executed once all history well off the razor component has been invented. This is where you can start manipulating national dump components and finally should render is the bullion value that will either force or prevent refresh off the user interface off the razor component. So, you know, logic here, This is what we expect to happen. The checkbooks will be set to check by default and then whatever parameters passed into our component, it will be multiplied by hundreds, which in our case, will be 1000. Other than that, it will work as before. Also, please note, but we have this functions directive instead of cold functions. I'm cold. Exactly the same functions is directive that was used in the preview version of Blazer because many developers started using blazer while I was still in preview, the development team of Blazer decided to keep functions available. Therefore, you could either use cold or functions. Let's build our application and see if it does exactly what we expected to do. Yes, as you can see, the check boxes checked by default on the parameters multiplied by 10. Other than that, it works exactly as before in here because the default parameter value zero because it's just a default into your value. Multiplying zero by 100 gives you zero, and this is how you handle life cycle events in each plays a component 10. Separating code from the markup: Because each raise a component is just a C sharp class, you can put the entire C sharp logic into a separate C sharp class. So you're cold is much more Kalina. The easiest way of doing so is to have it as a base class and then inherited a raise, a component from it. So in our case, as you can see here now, our hasty Mile Andres Syntex logic hasn't changed at all in our counter raise a component. But the functions or cold element has disappeared completely, and this is because we're now inheriting from based counter the classes. We added instead, the root folder off our project on all the logic is now present here. Please know that if you do so, you need to extent component based class explicitly. Every file with Razor Centex will do so implicitly. But if you are moving your logic into a C sharp class, you have to let the seizure cross know that it's a super class of component base. This way, you can still do over right on life cycle events and so on. Other than that, the logic inside of this class is identical to what we used to have inside of a little function directive off counts of razor component. And to prove that, let's lunch hour application. As you can see here, the original value of term gets multiplied by hundreds. The only difference you may encounter is the fact that it's not checked anymore. You know, they would have previously checked it by the fold. Let's have a look at our base counter and see it was going on here. And this is the reason for that use. Inclement parameter value was set to false inside of on the initialized method, so it wasn't identical after all. But now it should be. And it is indeed, which demonstrates that if you do have your session up logic in a separate based class, it will looking exactly the same way with your razor component as it did when you have the all your logic inside of the razor component itself. But now you have an additional advantage off having your class very easily. Unit testable 11. Cascading values: as well as having promises as we covered before. Blazer also has a concept off cascading values and parameters. Cascading values and promises is something that is used in nested razor components. For example, if there's a particular value that you want to pass to any child components, this is what you use. You pass cascades and valuably, writing your razor components in cascading value. Element of the element has key value per off name on value. Name is your promise. The name on value is value of it. In our case, where citizens value to green so essentially, what we're doing here it's busting a variable called buttoned collar, So any child raise the components on the value of it is a text that says Green. If you have a look at our council, raise a component. We will have this additional variable, which has cascade in parameter. Actually it attitude that has a name attribute that is set to button color, which in our case, is redundant. But that is just to demonstrate. That doesn't matter what cascade in parameter is actually called. You can overwrite it. I'm called a variable whatever you want, as long as the base value. Much is the cascade in parameter name. This is what it's used. We have it inside of in line style, actually good on the button. So, essentially, in our case, if everything works as expected, we expect the bottom color to be set to green as long as counter raise a component is initiated from the index page. Let's launch outraged to see if it's the case on indeed, Remember how it used to be blue by the fold. It is now green, and if you have a look at our counter without any parameters being passed into it, it's still blue, which is bootstrap default. I'm There are so many other interesting things you can do with cascading values in Blazer. 12. Template parameters: as well as having Cascadian values. Razor allows us to use template parameters. Well, you can basically use generics inside of the promises. So in our case, here you have this fresh data template on the template itself. Doesn't care what kind of face time I was being passed into every roll over it accepts two parameters which of both generic. I have exactly the same item type. Even though there is no such class as T item, the item is essentially the same us using tion notation as is used by default in C sharp to indicate that particular classes generic and accept pretty much any data type. In our case, run The fragment roll template accepts a singular off T item element while I read only leased items is the list off T items of the logic goes as follows If the list is no empty which is displaying loaded message and nothing else. However, if we do have some elements, we display the following table. So first, where displaying the headers and then for every item we're just initiating a single roll item on our first date. A class is the one that populates everything. This is just the same class that was provided to us in the template. Once it's initialized, it is calling Weather Forecast service to get focus, which is an array off where the forecast item Well, here's how old some places populated. You remember that it's a render fragments, so it accepts HTML. So inside a friend of fragment, we're creating five cell ISMs. The way this logic works is as follows items is a full list of items for Lisa Focus on context. In this particular context, no pun intended is a singular forecast. So into the first cell were in certain the date of the forecast. There were incessant. The value off temperature in Celsius field, then is followed by temperature and fun height, and then it's followed by summary field. Essentially, it does exactly the same thing as it did when we got it in our original template, but you have restructured its two, demonstrated the functionality off template, promises a little lunch hour application to see it in action. First date is the pressure be interested in, and as you can see, the functionality is identical. But now, because we all of this started making a generic, we can make this template even more generic. Even those temperatures specific values. What we have here, we can just replace with other parameters. This is exactly what template parameters are needed for. 13. Layouts: in a blazer layoff component is something that the old pages share configured by Abdel Razor file. So in our case here, we have added a new layout. We called it sub layout. It uses main layout as its base. So we have to have this layout directive to use a particular layout and to make it a layout it has to inherit from layoff component based on, if you understand HTM Well, what we're doing here is making the bugger on color off your razor components yellow to make sure that we are applying this layout, we have modified our Abdul Razak file. How it as default layout. We're doing it by having it as a value of default layout. Actually, it on the road for you element, Um, let's see it in action. Obviously, yellow color was chosen because the difference will be very obvious. A. So you can see here the insides about razor components. I indeed yellow, and that's how you apply layouts. You may wanted to change the doctor mainly, although unless yellow is something that you want to see on your pages. 14. Dependency injection: with blaze, you can use dependency injection just like you can use in any other C sharp publication. So this time we have other interface. I were the forecast to our weather forecast service so innocent of his due to use where the forecast service on the references of interface. So, in theory, you can inject absolutely anything that implement this interface. As long as dependency injection system has mocked it to a proper implementation, we do the map in via standard expected net core dependency injection mopping system. However, you can hear some third party libraries to achieve the same goal in our case where I just I didn't think of him up in this particular decorative here means that whatever service uses I wear the forecast service, it will receive whether focused service has its implementation. I'll fetch data Class is the class that uses I were the forecast service. I would have changes to use the interface rather than the actual implementation. But the cost of where I'm up in all interface to exactly the same service, the actual logic will be exactly the same on as you can see. Here it is. Why use interfaces instead off the actual implementations. Well, there are many reasons for it. It's one of the best program in practices, and it's one of five soldiers principles known as dependency innovation. Perhaps the most compelling reason why you need to use interfaces. It's for unit Dustin, for example, a class with the actual implementation maybe too complex. Or it may be executed. Some long running logic, which will be unfeasible. Tow launch June unit destined. So instead of having the actual class, you can just small copper interface. You can't, for example, right on implementation of interface with a very simple logic. If you're not testing the class itself and you are only testing the component that uses that class, it doesn't really matter. Was the actual implementation of the interface is, But it does monster with a particular methods on that interface are cold. I'm there some other reasons as well. For example, dot net core is operating system independent. However, there are certain components that only work on a particular operating system to make sure your selection of with the right one you may have an interface, but the application, called will call on each operating system will have its own implementation of that Interface junior application startup. There will be some logic which will detect the operating system you're running on and will select the implementation accordingly. So if you're just starting out as a developer, you're not yet familiar with full benefits of dependency injection. I suggest that you learn them because those will be extremely useful in your future career .