Blazor: Getting Started

View non-AMP version at androidpolice.com

Course Overview

Course Overview

Hi, everyone. My name is Jill Clearance and welcome to my calls. Blazer Getting stolen It. I am the CEO of Experience Belgium, and help customers with Web and mobile development, where applications are all from built using Java script train works to just angular off you Up until now, see shop could only be used to build the back end, but a new feature off a speeding at core named Blazer. Let's has built interactive weapon wise using C sharp and don't let coat using HTML CSS and See Shop. It now becomes possible to build the same experiences for user's, but now both the client and the server codes are written in C. Sharp Blazer is based on the Web assembly, which is an open standard and therefore does not require any plug in to be installed. This cause is aimed at getting you started with blazer in a very hands on way, you'll build together with me a full blaze replication using visions. Did your 2019 you'll learn, have a new project is created? How to use data binding howto excess data from a service in laser, how to create components and how to deploy the application. Some of the major topics that will cover include built a fully working application, starting from family project that you can use as the foundation for your own project. Understand the architecture of a new blaze. Replication. Learn about data binding in blazer and how to access real data from an A P. I see the differences between client and service and leisure and how to comfort APS from the one to the other. Integrate jobs good components such as a map. By the end of the schools, you'll know how you can build a full real bird blazer application. Using Fischer stood your 2019 Before beginning. The schools should be familiar with some See shop and each demo. I hope you will join me on this journey to learn blazer with the blazer getting started cause here at plural site.

Building Your First Blazor Application

Module Introduction

Hi there. And welcome to Blazer getting started. Hero Blue assigned. I'm excited that you have chosen to learn about Blazer Mike Soft. Also new framework to build Web applications using C shop. This course is your place to start building your first blazer up as that is exactly what we will be doing in this course. We're starting this model already building a working out and all the way through the schools Well, at new features to it by the end of the course. So in a few hours of your time, you'll be the proud creator off real world, fully functioning blazer app. How great is that? That is nice trading and see what we will be doing in this first module. Oh, and before I forget, I'm Jill clear in really pleased to meet you here on blue. Aside, free, free to reach out with any questions or comments you may have about this course. Always happy to help. I only start my courses by setting expectations. Right. So first I'm going to tell you briefly what you can expect to learn from this course. Then we'll see together what Blazer is all about. Next we'll take a brief look at Blazer and I'll be telling you also about the different hosting models off Laser. Next will make a way to visual studio and will run file New Project Blazer perhaps have some specifics that you need to understand, so I'll take you through this here. The next topic will be the meat off the module. We'll start building our first app. Will already built a layout for a list and a detail screen, complete with data binding. Answer from includes the marshal by showing you how to debunk your replication, as I'm sure you'll run into some issues here and there.

What Will You Learn from This Course?

as mentioned. That's kicked things off by looking at what you will be learning in this course. This is a practical course to learn all about blazer. In this getting started course, you'll be building a fully working blaze replication really cool if you ask me, you'll be a Blazer developer today, since I have made it. Schools of every practical and hands on will start together from far new Project and will be spending quite some time coding a different pages off the APP and the end result is a working application in Blazer. Although this is a beginner schools, I won't be explained you all the basics. There are some things that I assume that you are already familiar with. Blazer is used to build a better applications, and therefore some basic knowledge of HTML and CSS is a suit. I will also assume that you are familiar with C shop. Finally, you're soon see that laser you wise written using razor markup. While it's not required, some raisin knowledge will come in handy as well. To create absolute blazer, you'll need to have two following install arm using Visual Studio 2019 as that is the only version of visual Studio that supports plays a development that this partly because blazer comes with the darkness. Kortrijk 20190.1 sdk, which is also only supported two individuals to June 2019 version 16.60 higher. Indeed, you also need tohave the Darknet Kortrijk 0.1, as the gains don't for both visual studio and adult net core sdk have provided the link here on this light. Finally, you'll need a motive. Brows note that Blazer development is also fully supported from Vicious Did your coat. While this works flawlessly, I'll be using visuals to U 2019 for this course now I have been referring several times to the app that we will be building together. You must be thinking, Let me see that app that I'll be building now. Well, let's do exactly that. If you have seen some of my other courses here in Blue aside, you are probably familiar with Bethany's Pie Shop. Bethany is one of our best customers. We've built our side with a spin it score her mobile app with Zimmer informs answer. Bethany's business selling awesome Paice has grown quite a lot, and she now has stores all over the world, so she needs a way to keep track off all her stuff. She came to our office and asked if we could build her an H r M a human resource management application. Off course, we agreed, and this is what we will be building in this course. We'll add an overview and a detail page with an place, the ability to add a new employees and will at navigation between the different pages.

Demo: Looking at the Finished Application

let us take a look at the finished application that it will be building together in this course. What you see here is the application that we will be building together in this course called Bethany Spy Shop H Arm. We arrive here on the landing page that shows some introduction text on the left. We have a menu from where we can navigate to the employees screen and the add new employees screen that's first navigate to the employees scream on this overview pink. After a brief display off the loading text, the list off employees is shown from here. We can trick on the details button to show the details off the temporary we left. We see the details and underwrite to see a map that shows the current location off that employees. We can also click on this end button here, and then we can edit the details for the given and play. We changed the name here, for example, and taken safe. There We go to this status page that shows that the employee has been updated successfully and then we can navigate back to over you, and the employee has changed. They can also click on the action button here and that will display the employee quick at dialogue for where I can add a new employee well, quickly and enter some details here. And I'm taken safe employees and the list on our refresh and showed details off the employees. Finally, we can also navigated the at new employees scream where we can add all the details for any employee. So this is the app that we will be building together in this course. I'm excited, and I hope you are, too. Let's get started off course. You will want to follow along with everything I'm doing in this course. But if you want to skip apart, we'll get stuck somewhere. Don't worry. I have included all the intermediate steps and the final application in the downloads off this course.

Hello Blazor

with all the administration out of the way, it's time to get to know Blazer for completeness. Let me give you a high level overview off what Blazer is all about. Blazer is a new framework for Microsoft, which allows us to build interactive weapon wise using C shop and H demo. Let that sink in for a minute. You are going to build maps that run in the browser, using off course HTML but also using C chomp. Typically, you'd build this using Java script or typescript well, using Blazer, you can build a rich, interactive experience in the browser, but instead of writing JavaScript, you can now use see shop. How cool is that? Blazer currently exists in two flavors, and I'll come to that very soon. Using laser, we can choose to run our application locally, meaning that it will be downloaded to the client side and run from their. In this case will rely on weapons assembly or Wesam, an open standard that defines affordable binary quote. Former for execute Herbal programs in the schools were abusing the weapon assembly version off blazer. Alternatively, blazer. Absecon also run on the server boat will rely on look in it. And we can even share just about all the code between clients and laser and service side please. I will in discos show You also have to do that. The fact that in the case of Represent Lee, you'll be downloading an executable and running that from the browser may ring a bell with some of you. If you have ever developed using Flash or Silverlight, this model may seem familiar. Old Order is definitely a semblance using blazer. We don't need any plucking to be installed. All that has to do with the weapon Assembly is based one Web standards and runs in every browser. Even a MoMA and Wild Laser already has quite a large number of features from bold. It will be required to integrate with JavaScript to get access to some grounds or features. At least for now. Blazer doesn't have the intent to replace JavaScript development. It offers an alternative way to build browser maps and sparse so single based applications. Laser is authentically book meant, so that means that you can leverage all your dot net and visual studio knowledge to build Blazer APS libraries that your commonly used in both Net application development can be used in Blazer to create in browser client side caps. But know that all the goodness that dog not brings, including performers and security features, also apply in full in blazer. And not one importantly, because dot net core came used on Windows, Linux and Mac so can blazer, and you can even integrate it with docker containers if you want to. So the important take away is this. You will now using C shop, be capable of building interactive Web applications using C shown HTML and CSS If you don't know JavaScript, but you do know see shop Well, this must be your lucky day, as will now be able to write pretty much the same in browser up as a seasoned JavaScript developer, you may be thinking, Where did all this goodness come from? All of a sudden? Well, it turns out that Microsoft has been working on the technology for quite some time. Starting in 2018 Microsoft for the first time showed Blazer as a new plant full. It was, at the time, still an experimental product, and no one knew if they were ever going to release it or not. The response was, however, very positive. And in April of 2019 Microsoft announced that they were officially committing the shipping the product, and we got a first preview. Over the coming months. Several operated preview releases were announced, and in September 2019 together with police off the Net cord tree Bondo, we got the first official release off Laser. This was, however, Onley Service Side Laser, which was officially released. Then, in May 2020 blindside laser was also officially released, and it doesn't stop there. Mike's, it has announced. They are testing to bring Blazer toe other platforms, including the desktop and native mobile apps. We'll see what the future brings, but I can assure you that Blazer has an exciting future ahead. I'm not going to spend more time introducing Blazer here, my good friend and colleague very low. Brecht's already has a ghost in the library called Blazer. The big picture where he in much detail gives you more information about what blazer is. Take a look at this great goes via the link you see here on the slight

The Different Hosting Models of Blazor

I do want to spend a little bit of time explaining you a bit more about the different hosting models off laser we currently have. So let's take a look at that now. Has already mentioned a few times now have two flavors off. Later glowing signed laser and service side laser. The two models are basically two ways off hosting replication, and I want to emphasize here already that the coat is identical. Apart from a few startup funds will talk about this a lot more later. In this course, let me start by explaining the difference between the two options we have. The first model is guy inside, please, which, in my humble opinion, is the most exciting model. The model is pretty easy to understand. In this case. The application is running as a Web assembly directly in the browser applications coat and the doctor at Runtime to host your application are down into the browser and will run from there so locally on the machine, the APP isn't running on the server on the country. Your application is compiled on beforehand, and the compiled goat is then down into the kind and executes there. If the user now clicks on a button and is directly handled within the locally running instance off the application. Static Fars Stacy is, as far, or images will get down on it from the Web servers separately. Asset This mole is the principal way to build blazer implications. There are definitely a lot of benefits using clients hide laser. You may be thinking that the user needs to be installed something to run your application. Well, as I already mentioned, that is not the case. Just a modern browser will do, including browsers of mobile phones or on I pants. No need to install anything. Also says the APP is simply down under to the client. There's no need even to hurt it on a dot net enabled server. Simply serving the compiled app is enough, and we'll see this by the end of the course. The result is again an interactive experience, so the same experience as we can create using JavaScript. Since the APP is not running in full on the client, this will also bring down the load on the server. On the downside, there's still the issue that if users don't have a modern browser, they may not be able to run your application at the time of the creation of the schools. This is the case only for Internet Explorer. Other browses food support, WEP Assembly and therefore holster clients had laser with the current version. Also the first time that the user comes to the site. The application download will take some time since application simply. Instead, you download it. Finally, the debugging experience is still somewhat limited since the official release off clients had later. We do have food, the begging support, so including break points in visual studio. There are, however, some features around debugging which are still UN support. This will definitely be improved upon in the near future. The second model is service I Blazer, which was released earlier than clients had laser in the service signed hosting model. Our application will execute fully on the server within an A S P net core application from the browser. We can never get to the browser and see the HTML between the browser and the service site app, a signal our connection is created. Signal AR is a technology from Microsoft that allows us to add real time functionality to the application alarming the server to push updates to the client. That means that every time the user performs an action such as clicking a button in the browser, data about event will be sent over. Signal are to the blazer app of running on the server and resulting changes to be made on send back to the grind and are applied to the door. This whole orchestration is set in place by a file called Blazer told server dot Js. The server application remains in memory all the time. So in inside of the app is created per user while the indirection is happening. Using service and laser gives us to the browser the ability to see your application running on the server. The model is definitely different form, for example, and and spin it core NBC application ready, resulting HTML is created and that is admitted to the client, after which the service side state is discarded. Now, one of the benefits of this service site model, you may be asking isn't Klein site way cooler, but it may be cooler. That's true, but the service side model also has some clear benefits. The initial Dalit is small, just the original HTML will be downloaded, says the application runs on the server, although not a B I's are available to work with, including things such as and the different work core and many others, it seems, to a dis approach, as began now have the application running in the browser that gives us access to a service side database using the F court. While it seems that way, keep in mind that the APP UC is really running on the server Because of this approach. We also get other benefits, such as fully, but he support. We're just running the net coat on the server. And yes, this even works with older browsers, which don't support WEP assembly int. The process just shows the don't updates delivered over the signal, our connection off course that have some downsides as well. The application needs to be connected to the server in order to run and therefore does not offer offline support. Each indirection also needs to hold back to the server, and this can cause delays, finally says an instance runs per user. This approach 10 calls scalability issues. Max of has published guidance, right? Explain this in more decked the main message is, although the implication runs on the server, a regular application will typically only take about doing it 50 kilobytes off memory, so a regular server can easily support multiple thousands off simultaneous users. Originally, we released This goes on parole site as a service. I'm please, of course, since I believe that client signed Blazer will be more commonly used. We decided to update, of course, so it's not fully focused on clients had laser. However, as I already set the goat that you need to write to create a guy inside or service. That application and blazer is identical. Apart from some start up funds, that means if you want to learn about service and laser, you can do so with this ghost as well. In fact, the way that will organize the goat and that we will create the application in discourse allows for sharing all the Kurt and in a later module. I'll show you how you can easily switch from the one to the performance, so we have a model of lazy you want to use. This course has you covered. Now that you have all the foundation online of John Boutte, let's dive into the creation off our first Blazer application

Understanding File New Project

to create. Yet we'll start where every major obligation once started, and that is found new project at the time of the creation off this course visual studio has tree options to create a new blazer application. First, we have client side laser, So the weapons assembly version as a stand alone application in this case, will just haven't aged Immelt Base that will host our application the second time. But this again, a client sideways X template. But in this case, the application will be hosted inside oven A s peanut court application, so that will also be generated as part of the template. Finally, we'll have the service at laser app template, since I want to focus as much as possible on Blazer itself. The first template is the cleanest with the least amount of extra overhead generated. So we'll use that one in this course. Having resisted you, execute the new project template for every purse. Emily Blazer application results in a working application that I'll show you in the next demo. You can see only right the created false and as you can see there, quite a few. You'll see that amongst others, see shop and raise our fast have been generated. We'll see which ones in the demo. If you have been working with a SP Net core before, you'll see that the project actually looks quite similar to an ESPN article application. Most notably is also the presence off the program ____ s Cost, which you indeed also half with an ASP in its core application off all the files that have been generated the most striking ones. Other razor funds. These applications are composed out of you I elements called components. Such a component contains raise a manga C sharp coat and possibly other nested components. We'll see the options that we have in razor coat later on, you can see that under the pages directory, some components have already been generated, and although they are pages, there really components to creating a bonus is something will be doing all the time. And then doing so, we must ensure that the name of the components starts with an upper case a uncomfortable Later, a component class will be generated matching the file name and you see some razor coat that was generated when executing. Find new project. This is the coat for the countered Old Razor far and it is indeed a component. It's a component we can navigate to, since it has at the top a page directive. As you can see here, this means that it can be reached by browsing. Do slash counter. In the component, you can see HTML markup and see shop coat. The big itself is showing the value off a counter that will be incremental when we click owned the bottom. This happens boat inclined and service and laser without Java script. The good that will make this work is inside off the code block, and that is indeed see shop coat. Every time we now collect the bottom, the counter value will be increased and automatically the you I will show the new value. Blazer does this by comparing the new content with the old content, and it will apply the changes to the dome. In most cases, it is not required toe. Ask blazer to perform this check. It will do so automatically. Using the component is done. As you can see here, simply used a counter component by dropping the counter element onto another component inside the dubbed up the root folder. There was one plain html fa called injected ex _____. Think back off what I explained a few minutes ago. A client side places APP is compiled on the server and will then be downloaded to the client off course. The user off your application needs to browse the way webpage that host your that page is the index dot html and it will contain coat that will trigger the launch off your blazer application. This is done to the EU's off a built in JavaScript file called Blazer. Don't wipe assembly dot Js

Demo: Exploring a New Blazor Project

Let us Now go Divisions Studio and Explored Created project. When we execute file New project we'll start on Blaze Exploration adventure in visual studio. I'll go to file new project and in the create a new project dialogue, I'll select Blazer app out and under the name of the project we're gonna be building. But any spy shop H R M so called Project Bethany's parents up a tram dot app will also need to select the location for the project. Analytic can create. Officials did. He will ask us another question. Which type of Blazer application do we want to create? I currently have two options in dot net core treatment for I guess selective laser server app over the blaze of warp assembly up. It was like the blaze of weapons assembly at for now, here under out, you have a couple more options begin. Choose to host our blazer application inside and a Speedo Manticore application. I choose not to do so. Do basically focus on the Blazer ______ itself, and then we can also enable our application to become a progressive Web application. Again, I'll choose not to do so. For now, Endemically can create and visual studio will execute the template and create on your project debut. Fisher Studio has executed the template, and a couple of fast have been generated. We'll look at those fast in just a minute, but let's start by running the application first. So just like ____ I as expressed and our application will launch. If you have seen just any them off basic, perhaps at a conference, you'll probably have seen this template already. This is what Microsoft includes in the family protect temperature. It's already a small application, and it contains well, a number off pages. In fact, those are components. But you see, here is Emmanuel the left and the in next component loaded on the right and I'll show you where it is coming from. Include in just a minute. Now this index does not have a lot of interactivity. Let's click on this counter menu item, and here you can see that I can click on this better and the counter value will be increasing. This is something that you would typically do with Java script. However, we're running a blazer application, a client side blazer over perceptibly application that is going to use our C sharp Kurt to execute dysfunctionality. His counted page is actually a component. Components will be the building blocks for any blazer. Application will be building quite a few. In this course. This fact data is yet another. Let's say Page. You see that the browsers navigating to friends later and I will see a list off better. Four costs. Now One thing is important to take a look at as well. I'll open the browser tools. I will go to network now. I don't see anything here, but if we reload the page, then you'll see that a lot of files are getting downloaded. You see you that betting is partial. A DRAM don't have adult dino has been downloaded together. Weight. Typical other client side files, such as a CSS file or JavaScript. Fast. Now this is, in fact, the compound good of her application, and it gets downloaded to get away. Typical don't net stuff like Emma's cool IP, that standard system core and so on and so on. This is actually the runtime over blazer client side application that will be hosting our actual Blazer application. This is how blazer client side applications execute. That's no See how this is done in coat. Nowhere does a typical websites talked. Well, if you know anything about ____ development, I think your answer would be an index dot html. Perhaps. Well, indeed. If we go to the duct up the fruit, you'll see that there isn't index dot html fa now the doctor, but uproot. If you know a spin, a court will sound familiar. This is the route off the static fast in an SP net core application and in fact, in a blaze application. It also will contain static files such as images, CSS Falls and indeed, also this index of HTML. So, when I started the application are closer was actually navigating to index dot html that index dot html contains typical html nous. You see nothing special is going on here. It contains at the top a couple off links to see assessments, and then it contains this APP attack and this tank is specifying where blazer application will be rendered are ablaze. Application will contain a route component which is called Abdel Razor, and it will be associated. Let's say with this app attack our show you that in the program claws in just a minute. Now down here at the bottom. You see also Kate Reference, do a Java script. Far that's fine. Also got downloaded when we were running our Blazer application at this blazer. Remember, somebody dot Js file is a very important file. It will be responsible to download the runtime for our place application as well as the compiled blaze application. Because keep in mind blazer representing applications Arkham part and then downloaded as a deal to decline side. It's not explored. Arrest off the coat again. The Blazer Weap assembly application has a lot in common with an SP Net core replication project. It also contains a program that CS, for example, the program clauses again, like a set very similar to what we have in a SP Net core. It contains a static before two main. So that's really the entry offer. Replication in this mainly see a couple of things happening and let me take it, Dude, it's going to set up the Web assembly host. Basically, this will host our rep assembly application, and it's doing a couple more things. But this line says here is that the app component, which I'll show you in just a second. You can already see it in the solution. Explorer is going to be the root component, and it is going to be associated with the APP tag air in our index dot html. So this is how it knows which is the root component and where it needs to go in the hosting in exchange. And just like a s peanut court itself. Laser also comes with a dependency injection container Here, for example, the sample application already is injecting. The agency declined into the services collection off our blazer. Implication. I will explain your dependency injection in much detail later on. Don't worry, if this is still a bit unclear at this point, and I finally will start running the Assembly host now, at this point, the application is up and running, and the application knows that razor is gonna be its root component. Did I already mention that components are important if I haven't Well, they are. Anything in blazer is a component. In fact, there is a good component and that is this. AP got razor component and that is going to contain the route. The heart it is, says the name is giving away going to be another Blazer component that is going to be handling rounding within the application. When I was browsing do that counter pitch, but actually the browser was making it request, and that was intercepted by this road, and it was going to search if it could find a component that said, Well, when someone's browses to counter come to me. But actually what happens is that at the start of the application, our assembly is going to be scanned four components that say that we can be rented to and that is then contained in a list off pages. And it is handled by this router component. When the baby's slash component is front, well, we'll navigate to it and it will pass also some extra para meters and also specify what is going to be the default layout. In fact, we can define in the Blazer application are component to be a layout that is just for all pages within the application that is actually this mainly out that you see here it is located in the shared folder here. It may not astonish you that indeed a male out is in fact, also a component, you see that it has the extension. Razor Razor follows our components. Now this main layout defines basically the structure off any page in my blazer. Application is like the master template, and of course, we can define multiple ones if we want. This contains the never menu. That was the menu that we saw on the left here, and it also contains then the structure for what is shown on the right that's a in the main and that contains an a body placeholder that is going to be replaced with the actual content off our component. The actual components that we have seen running are located in this Pages folder. When we opened the application, we were actually automatically around to do the index razor component. You see here that it has a page directive saying that if someone browses through the route while then this component should be sure this page directive is used by the operator, and it knows now that when someone browses to the route, they should be seeing this index. Don't raise a component, and I'll take a look at the structure. This is just playing html rent well, ofcourse, this is a very, very basic component. A realized blazer component will contain functionality and after can already see, for example, in this counter component, the counter component also has a page directive that says that when someone browses to slash counter, they were going to disk opponent and now we see a mixture off markup HTML and coat See shop coat, not java. Skipped coat. This is wipe assembly during its thing here. Now we have a button, and typically you would expect that when I have a click event, I would need to handle that with a JavaScript code. Look now, instead of having jobs keep you have see shop having on click event and at all point to the increment count mattered. And that you see here in this at code book, this is C shop Kurt, this is the thing that was during that functionality in the application when it was running. So basically, what is happening here is that every time I now click on that button, increment count is fired. That will call this in current account method. The current Karen property is increased and the component will render again basically because of the fact that triggered an event. The ground count value is increased and blazer will detect a change and automatically updated value in this current account. Here, this is automatically happening because an event is fired. Blazer will do the change detection for you. We don't have to tell it to do so. This is Blazer, data Mining. I will see that in a lot of detail in this course. And the syntax that we are going to be using in these components is raises. Syntex. It's in fact, pretty much the same as we have has been at the core razor pages or a spin it court and V c u can if blocks you can do y loops and so on. All of that will see throughout the course now actual component will contain more code and the counter. The French data is already a good example of that. The feds data against onto the base directive saying that it can be reached by calling slash veg data and it is also in using that http client this is using again dependency injection again will come to that. But this is using dependency injection that was set up over here in this program close. It is going to use the 80 to be client to go out and make a rep request to adjacent endpoint again. As you see, this is just plain market plain HTML combined with razor coat as an F block. There's a for each block that is going to loop over all the forecasts to show that table off four costs down at the bottom again. Code. Look with some more rely functionality to go out to adjacent follow, which is included here in the project in the sample data folder, and it will down it from there. The full costs. Now let me show you one more thing has go back to the index page. Let's not say that we want to use the country component. We can very simply do that my same here. I want to include the counter here. If we now run the blaze application again, we'll see the counter to be on the index page. Hey casino, the contents off this counter page now included in the index itself. Although this was defined with page directive, it is still usable as a component that we can plug, let's say into another component components really are the building bucket blazer. I think I've shown you pretty much every far except this imported razor farm again. If you know a spin at court, you'll kind of get what it is doing. It will bring in using statements and all the components will be able to access the closest within these names space that I'm bringing in here. So we're that I've shown you pretty much what a final project is going to do. Let us not stalled building the application of it. Before we're going to do that, I'm going to clean up a couple of things. So I'm going to draw out the counter. I'm going to throw out the French data. I'm also going to clean up the index of razor again because that doesn't know about can't anymore, so that's pretty much it. So now we can start building our first blaze application together. One more thing. As you may have noticed, I'm referring quite a few times, toe a speed on that court. A lot of the concepts that are used in Malaysia ABS, are indeed coming from ESPN in court. We have a full learning part here in blue aside, So if anything is unclean at this point about a Speedo net core, please refer to that path.

Creating Your First Blazor App

now that you have seen what gets created and you understand what is the function of the different funds, and it's no start with the creation off our first app. There's one more thing I want to point out here before we start building the application in the generated project will have noticed that the coat for the functionality of the application is placed inside and at code block, in this case, the mark about defection. And if you are mixed in just one farm, while that works for launcher applications, it might not be the breast approach. I suggest using a goat behind, approach by removal, see shop goat to a separate class, and that is actually what I'm going to be doing in this course as well. In fact, the glass we will create will now be a partial class, just like the glass that is created when the component gets compound for reference. Here you see the mixed approach in the same file. We have the market coat at the top and a code block. Rather is really nothing wrong with this approach. I don't think that for a real application, you'll want all your co two being one far. I therefore advocate to move your code to a separate class in this approach. Are good, will live in a separate fund containing a partial class razor components themselves on generated as a partial class upon compilation, alarming us as blazed developers to create a partial class that will be combined with the main component class. If we are creating a component called employees overview, then they can simply create a not a partial class with the same name. So employees overview as you can see here where we can then at our Kurt, you see me use this throughout the course.

Demo: Creating Your First App

all right. Time for action was tall. Building or application will create the overview and the detail page. We are gonna build the Blazer application together now, so I hope that you follow along with me again. Take a look at the downloads for this course to follow along with everything I'm doing. This is the best way for you to learn Blazer. Alright, let's do this. I'm going to start by adding a separate project to my solution where I am going to store code that can also be used later on from Anay beyond. And that is going to be the shared project so rightly here on the solution. And I'm going to say at new project, I'm going to search for dotnet standard. I'm going to select here a glass library dot net standard. Of course. See shop. And I'm going to call this better the spy shop. Hmm. Don't shut. Endemically can create Class one is always very optimistic, but we're not going to use it. So we're going to delete it and we're going to bring in our own classes with the downloads of the course. I have included also assets. Take a look at the assets for em to That is this module. And in there you will find a couple off C sharp classes. You see them here? Copy these into this new shared project. So what are these glasses containing? Well, they contain and say the model that we are going to be using in our place replication. Now, everything starts with an employee, we're going to be managing employees. So, as you see here in the name space Bethany, Spanish of hmm, not Chad have an employee which has an i. D. First name, last name and so on. Quite a few properties than I have here that we're gonna be using in the application. Also noticed there's a marital status That's an N. Um, here as well for the gender hose have created another in, um here. And we also have a country and a job category. Also classes that have created here as part off the domain off my application. So this one are going to use from a blazer application. And to do so, I'm going to add a project reference here. So, under dependencies, we add this reference to the shared project. There you go. So now our blades application knows about all these classes that they just added, So we're gonna use them in here. The first component that we are going to be creating is the employee overview I'm going to create in your component under the Pages folder. Why on the pages? Because it's a page component. It's a component that I will be able to navigate to in my application. So that's basically the convention. To put it on under pages as well is going to go here and say at new razor component, I'm going to call this component that set and play overview. Click on add, and this is going to create our component, the code. Look as mentioned in the slides I don't prefer to use, I think when the real life application this becomes quite confusing to have the code as well as the layered in one far. But it is good for small applications. I don't think for a real life application, this makes a lot of sense. So what I'll do is I'll create also a clause with the same name also, employees, both of you, at this point where your studio will start complaining. There we go. We see that it adds the reds quickly saying that Hey, you already have this class. Why is that? Well, at compile time, the employee overview component will also be compared into a class A partial class. I should say employees overview. We can make this plants partial. And so now we can add code here that at computer will be merged with the code that is generated when the component itself is compiled. Now I do want to be able to navigate to this component. And I hope you remember from the previous demo that we can do this by adding a page directive. The page directive allows me to specify the U. R L that I can browse 22 weeks this component every component does not have a page directive. You can by default, not navigate to it. Let's create our components functionality. I'm going to go to my class here again. I'm going to For now, add some fake data will change it later on in the next module with riel data coming from arrest. FBI. But for now, let's focus on creating the component with some hard coded data. I don't want you to type too much. There is actually a snippets folded in the assets as well. And in there, go to the M two folder and you'll find a snippets file that contains the snippets arm using here. In this demo, I will start using it. Right now. I've brought in a list off employees, countries and drop categories again, hard coded for now, so we don't need to focus on anything else. At this point, let's make sure that the type can be found. So we're bringing a using statement for Britain's spy shop. Hmm, not chat. And how we used to do is happy again. I've also added, and it is part of the snippet, a couple of methods to initialize the list of job categories, countries and employees. I have two employees in here, as you can see here. So this list of employees I need to visualize somehow in my component, So let's do that. Next are components have a life cycle. There is a number off methods that are going to be called as part of the initialization, for example, of the component automatically by the Blazer framework, and one of the most important ones is the own initialized a thing which I'm going to overwrite. This is really the place where you are going to be calling methods that are going to be initializing data. For example, if we need to go out to an actual Web service to download data also going to be doing that rat in this method here, the constructor is in many cases, not the best choice in blazes to do so, I'm going to be calling this tree initialization methods from the own initialized a sink. And the next task is visualizing the list of employees in our employees overview. I'm going to start by getting rid of this code here that was generated automatically, and I'm going to start bringing in blazer coat. In fact, I should say, raise a coat. The razor component contains just plain HTML. I'm gonna add an H one here to say that this is going to contain a list of all employees now in my blazer. Good. I'm going to be using data binding. I'm going to be binding to this list of employees. How am I going to do that? I'm going to start by adding this table here, which is just a plain HTML table. And in there I'm going to be visualizing my employees in razor. We can do this as follows. I'm going to loop over all the employees in the employee's collection. I'm doing that with an ad for reach. That is racist syntax for each employee that I can find. I'm gonna add a new role and therefore, each employee. I'm gonna be showing an image. I'm going to show the employee I d. First name and last name and notice. Always the ad symbol here. That is the way to make sure that blazer I should say. Actually, Razor knows that this is code and not blame Markup. Now we can run the coat as is. I'm gonna add something around this table now, for now, we have heart. Go to data and you won't probably really see it. But in a real life application, downloading this list of data is going to take a while. So what I'm going to do is I'm going to surround this with the following If block, I'm going to check if employees is no initially, it will be no. And then I'm going to show loading. If employees changes Blazer will detect that, and then it will switch and make sure that our table gets visualized. Let's not forget to close the curly brace here, so this block is really allowing me to show something while the data is still being fetched, Downloaded from the server. I think at this point we should already see something. Let's run the application. We arrive again on the blame page, but we should actually now never get to slash employee overview. And there we go. We see the list of employees showing nicely. We actually have created our first laser component. Congratulations. But it's not what we really want. We want to have a lot more. I believe the next thing I want to do is I want to allow the user to click on one of the employees and then navigate to the details. So how we're going to do that? So we start with the creation of yet another component. I said this is going to contain the details. Often employees, I think employees detail is a good name for it. And just like we did before, our code is going to be in a separate class. Also called employees detail and let's make it partial to begin with. And I hope you remember one other thing we need to do. We need to be able to navigate to this page. Can you think what we need to do? Indeed, we need to go back here and we need to add a page directive on this page. Directive is going to be a bit special already because it is going to accept the employee I d. That was selected in the master Baking the overview. So the employee I d. Is going to be a para meter, and I'm going to be able to pass in from my overview and then captured here in the detail. For now, I again need to use the hard coded data. So let's start by pasting in the hard coded data in the employee details. This is the exact same good as we had already in the employee overview again will change it in the next module. Let's not forget to bring in the correct using statement, I said this employee detail will need to know which employees details it needs to visualize. It is passed in here as an employee, I d parameter and that can automatically be captured by adding a property with parameter attribute with the same name. So this parameters employee i d. That's the exact same notation as I have here in my page directive I need attributed with parameters, which is part off a spin it core components that we get. So now when I brought to this page with an employee, I d. In there this valuable automatically be captured in this employee I d string here, not employees. Detailed Page is going to be, Let's say data bound is going to be bound to an employee. Instance, I'm going to initialize that here already as a public property nowadays, employees I need to fetch from the list off employees I have. So I'm going to add this line of code here, let me take you through it. I'm going to search in my list of employees that was initialized the line above for the employees that has the employees. I mean, it is the same as the employee I d. That was passed in the parameter here, so I think the coat looks okay. Let's now go and build up to you. I Let's again get rid of the default generated coat. So now I want to add a title that displace first the employee, first name and last name. How can I do that? Well, in Blazer, we can actually bind to properties using data binding. And I can do so by adding again the ad symbol here which is going to search for the employees. And that is this employee here which is loaded here in the own initialized a sink. And then I can say that I want to have the first name here. I had a space, and I also say Bring me in the last name that is not visualized a few more properties off the employee. I'm using some plain bootstrap code here to show the details off the employees. As you can see here, I'm showing the employee I d first name and last name in pretty much the same way as I used it here at the top of the page. So my detail page is already looking good, but I cannot navigate to it. So I'm going to go back to my overview. I'm going to go here and add a new TV which is gonna continue just a plain HTML link it is going to link to employees. Detail on that link is going to be built up dynamically passing in the employee i d here. So when you use it in clicks on that link showing detail here it is going to navigate to the employee detail page. Let's try and see if we haven't made any mistakes at this point, so we still need to manually go to employ overview. And then we see the detail button that is coming from this angle tank. I can click on that, and I will navigate to the detail page. It doesn't look nice yet, but we'll fix that very soon. But you do see that you have navigation between different components now baked into our application, and you also see that the details of the employees are visualized. This is data binding, working in blazer. Let's continue with our detail page. We need to add a few more properties. I've added some more code here that is going to visualize the birth date, and as you can see, I can do it too. Short dates doing onto it. I'm also visualizing the email. The street zip Code City phone number. The gender, which was actually in in in value. I can also do a check if the user is a ______. I then use this label, and otherwise I used the other one. I can also do a null check for the date, and that's pretty much it. And let's visualize our detail page once more. So we are here again In the employee overview. We click again and we see all the details off our employees. And as you can see at the bottom, there is no date for left us. So that is left empty. So we have at this point already created our first laser application together. But it doesn't look anything like what I showed you in the beginning, so let's fix that in the next demo.

Demo: Adding Your Own Layout

I think you'll agree that our works, but it doesn't look like would have shown you in the beginning. That's at some layout coat next. This is how we left a replication in the previous Denver, and I said, It doesn't look anything like what I showed you in the beginning, but it's pretty much styling, which is missing. So let us fix that. Just like a blazer component is just HTML markup. Styling and laser application is just adding CSS. As you can see, I've already added quite a few references to classes, boot step classes, and I'm going to add my own CSS. If you remember the dubbed up, the fruit is the place to good static fast. In fact, under the CSS folder, there is already an Abdel CIA's as far, and I'm going to replace the code that is in here with my own coat again. The code that you see here is a snippet and is included in the down. It, of course, had embassy, it says was already referenced in the index dot html. If you at news, he is as far you need to add them here also in the index. This is the place where your reference static fast. Such s CSS fast. Now, of course, the layout was also part off what is created with the default template. I'm going to create my own instance off this mainly In fact, I'm going to remove what it's already in here and replace it with my own coat again. We can find this as a snippet in the course downloads, that is, is my general layout. And I also need to include again a menu. I'm going to bring in the knave menu again. And as the menu that you see over here will change that in just a minute. And I also need to specify here that this is going to be the place in this def where the main content off my component is gonna be shown. And for that I can use the at a body that's the placeholder for the actual component visualisation. Here at the top, you can see a directive that inherits directive. This is razor coat that indicates that this component is inheriting from the layered component base, a glass included by default blazer. So if we want to create inheritance in our blazer components, we can use this inherits because we include that inherits that component base. This component is now also allowed, and that's exactly what you want here. Remember, this was referenced in the abduct razor as the default layered all page components in my Blazer application will use this layout unless they specify a different one themselves, and he gets off schools possible, have multiple layers within the same blaze application. I'm going to update also the menu, then never menu. I'm going to again removed to go to this in here, and I'm going to use my own goat in here. This is a game playing HTML coat that is going to show the logo off Bethany and the profile picture and notice here at the bottom. I'm using the Netflix. There were already some math feelings in here. The knife link is actually a built in component part of Microsoft, a spin, a core component routing, and it is a component that will run there in the end as an anchor tank. But it will automatically add an active close if the name of the page that we're on is the same as what this snuffling is pointing to using its A treff attributes. I am pointing here through a couple of images. I don't have those images yet in my project. So again go to the assets and corporate the images folder into destructive the fruit. They're so morally and stuff I wanted to do at this point. To me, the application look really nice has go back to the index, and I'm also using some Google forms hearer and formed awesome again plain HTML things that have nothing to do with blazer, but we can definitely use them. Emblazon, if you don't know for Awesome is going to bring in a lot off Aikens for application on Google phones, Link is going to bring in support for custom forms in her application. I'm going to use from awesome right away I'm going to go back to my overview page. I'm going to replace the detail, but in here with a fund awesome info button. As you see here that is not going to appear as the link. I can then click and a final thing I want to do before running, application and checking. If everything is working, I want to go back to the inn next base because that is still not updated. I'm going to replace the goat in here with a welcome to pattern is part of atrium title and some explanation text that's run the application and prepared to Beacon all because it now go to look a lot different. And there we go. The application looks fantastic. We can click here on employees now. We don't have to manually navigate to the link, and he received a list of employees. I can click on one of the employees and see the nicely former to deter pitch as well. Here on the left, you see the Netflix. I noticed that when the Bakers corresponding with the baffling a draft, it will automatically be highlight. That's because an active class has been added on to it. I'm happy with the result, and I hope you are happy with the result, too, because you're a blazer. Application already looks fantastic.

Demo: Debugging a Blazor App

in the final them off this module, I will show you how to debug your plays application using visual studio One issue we had with Blazer Rep Assembly before its final release was that the debugging experience waas Very hard to say the least Now with the final release off Blazer which came out that built in May 2020 we now have the full debug experience in visual studio, so I could not put the break point and for example, I have one already I can click on this employees link and automatically I will hit the brake born here in the own initialized a sink. It was also support, for example, for the locals window. I can, for example, now inspect what my local values will be. In this case, the country's is still no and please is to look and drop categories is still no. But if I step through again, look at the locals, you will see their values. So we now have a full debugging experience inside off blaze applications. You do need a recent version off chrome or etch the chromium ______. That is to make this debug experience work for you as well


Yes, we've reached the end of this module by now. You have a good understanding off blazer and know what go it serves Using laser, we can finally build rich interactive experiences for the browser using C shop and H _____. You know also have understood that there are basically two flavors of blazer, client side and service I blazer. Both models use the same coat. Everything that you ran in clients and lasers can be used in service and laser and vice versa. If at this point just used clients and later. But we will convert our app in a later model to service site. Keep in mind it's the same product it just has to different hosting models. You've also seen and actually build your first components. These are the basic building blocks for blaze replications. Su far. We have worked with moke data that needs to change. I will do exactly that in the next module. Well, French data from a service and use that data in her application

Working with Data

Module Introduction

all right. Time for another blaze and model here in the Blazer. Getting started course on blue. Aside in the last module, we have already created an app, but it works with Mark data that is not mine definition off a real application. So in this module we'll take a look at how we can work with real data and also at other ways to interact with that data. Let's take a quick look at what we will be learning in. This module, as mentioned was started by changing the application. So it's not just showing mock date but instead will try to fetch real data for May rest. Eight Beyond Next will extend the application by adding a form that the loans users to enter a new employees to better nous staff list. And we all know that users make mistakes when entering data, so we should and force certain rules. This can be done using validation, and that's the final thing will do in this model. At the end of the Marshall, the application will look already much more complete. Let's get started

Accessing Real Data from a REST API

first things first. I want to get real data into my application. Blazer applications Can French data from a database using a number of ways, including the use off arrest Abia? Let's take a look to work with real data in a Blazer application. We have a set a couple of options. In most cases, the application will need access to serve a sign data so up to date data, and it needs to retrieve somewhere a client signed weapons assembly Blazer application won't be connecting using, for example, entity framework or toe a service scientist the base directly. In this case, ah Blazer application would need database credentials to log in to remove database on. I don't think that is a good Andy, so we'll need a better way. And that is using arrest. A p I, in this case will use http communication to French data from a database that sits behind a service. A second option to work with data is using local storage so purely on the client side. In this case, we can use the local storage feature of the browser to store data, for example in Jason Fulmer and use that monopolies replication off course, this is just local later. It's not going to give us the option to get up to date data from our beckoned. But it's interesting to know that basic had work, which is as well. This is also a very useful feature. Should you decide to create a blaze replication that needs toe have or flying capabilities, you can indeed used local storage to store data and when a connection is available again sent the changes made in an offline mode active the server. So as mentioned in this schools, we are going to be using a rest A p I. Another benefit off using arrest A. B I is that this dude is full supported in both client and service and laser. I'm not going to dig into any details of rest here. There were many other resource is available here on blueness that that will teach you how to work with the rest. A p I I'm going to limit myself to the signal slide here to ensure that everyone understands how arrest a B I can be used in general. So not only from laser. So in general, what happens is the following we have on the server a rest a P I rest is based on each of EastEnders. The application that uses the resting guy will therefore sent and thank you to be request so including a your eye and an 80 to be verb to request your I typically indicates which data we want to access The Web can be. Get if what you want to do is retrieving later, but will be post toe insert Tater Put to update existing data or delete to delete date here, for example. We want to retrieve the list of employees, so we're sending a get request. Do Slash ap I slash amply the server. If all goes well. Wilbur Pilot A Status coat 200 response, typically in Jason containing the employees.

Demo: Exploring the API

Since this isn't the cause on building an A P. I have for the purpose of this course included a fully working A p I that you can use as well. I've used a speeding at court to build his a p I. And in this demo, let me show you how you can use this a p I and this demo I'm going to guide you how toe add the A p i to your solution and also explain you the A P I in some details, go to the assets folder again that come with down. It's off the schools and in there you'll find the better news by shop a trembled ap I folder. Copy that to the place where your solution is located. Please note that the solution in this demo is called, but any Spanish Hmm, not server while in under demos. In this course, it's called Bethany's Partial a charmed app. This is the result off updating this course to clients had laser in June 2020. Apart from the name of the solution that is different in this demo, nothing else has changed. So I go back to visual studio and open the folder of the current solution and be based in the A P I folder. I give them before at the project to your solution by going to add existing project and then select the A P I folder and a P I project. Now, this is not a course on building AP ice. We have a lot of great courses on that own floor aside, but I want to give you the necessary information to get the FBI working all your machine and also a little bit information on how it's actually set up. That the FBI is built with a speed and at court and contains also a program and a start up costs. Let me start by adding a dependency to the shad project because the FBI is also going to be using the classes that have added before in the Shan't Library. You see that it's really valuable to extract the model classes and put them in a separate library, because we cannot use them from both the A B I and the Blazers. Application on the eight beyond is an expedient court, a p I, and it contains therefore, some controllers. The country controller allows me to work with the countries that we have in the database. I will create a database in just a minute. Just bear with me. The country controller can be accessed by navigating to slash AP. I slash country, because that's a placeholder for the name of two controller. It uses itself a repository and I'll show you that one in just a minute. And it also defines two methods. Get countries angered Country by D. H. Accessible By sending a get request to this eight behind, they will get back a list of all countries or the country specified by the I. D. The drop category controller is very similar, but will return drop categories. The employee controller is probably the heart of our A p I. It also worked with the repository again are showing that in just a minute, and it has a couple of methods to get a list of all employees to get an employee by i D. To create an employee. It expects a post request to be sent to the FBI and also expects that the employees in the form of Jason will be posted to this end point. We didn't perform some checks to see. For example, if the first name and the lost name aren't empty and if all of that is okay, then you will create the employees in the repository. We don't send back the created response. The update employee is very similar, but does expect an 80 to be put on. Also expects an employee to be sent in in the delete employing. We specify the idea off the operate to be deleted and then we go to the repository to delete the employee. The rest. You see, I'm not writing a lot of Kurt in the control itself. All the code at Interact With the Data store will be located in a repository. In the Models folder. You'll find different repositories at us. For example, take the country repository. The country repository implements the country repository interface and uses the AB __ context. That is the context it is used for. Entity framework core in the repository have to get all countries method which uses the context to get back all countries or gets the country by i d. The under a poster is all similar. The Abitibi context is a regular DB context that specifies a TV set for the employees countries and drop categories, and also in the tone will creating uses. The has data matted to load in data if there's no data yet in the corresponding tables in the database. Matthew Song, for example, the country repository implements that I, country repository and country controller uses the I country repository and gets in an instance via its constructor that this is typical for a spin in court applications. Because, just like Blazer ABS, ESP in its core, uses dependency injection quite frequently as it gets in your IndyCar Vegas services method. We used the services of an scope to register the interface with its concrete implementation. We also add to the services collection support for entity framework using this line here, and we specify that you want to use sequel server and until used, that connection string specified here in the app settings in the upset things you'll see that I'm using locally be here, and I specify the name off the database that will want to use our order follow along. I suggest that you also create this database now you don't need to do death manually. I have included an F core migration called initial, and we can simply execute that on local DB. If you don't have local to be installed, you can also specify another sequel database here. How to execute this migration. Make sure that you set the A P I as a starter project. Go to the package manager console if you don't find it, by the way it is located Under view are the Windows Package manager console and in here make sure that the D for project is set to the A P I project and then execute the command of the database. This will now check of the database exists, created, if not and also add, the default data specified in the own model, creating off the DB context and it isn't place that's not Run the FBI and see if we get back some data. If you're not, browse to a B I slash country nicely See a list of all countries included in the database. This means that our data has been added and our a b I is working. I know that the FBI is running on port 44340 in the project that you've added. I've hard coded inside off the properties launch settings that Asa's airport to 4 44 0 because we'll need to from our blaze application in the next demo access the A P I.

Working with the HttpClient

How did have seen the rest? FBI inaction. Let us use it from Blazer in general, The way to interact with the rest. A p I is using the agency be climbed close. Since a lot of blazer applications will work with the http coined Microsoft has made that http kind service available out of the box and we can just inject it through dependency injection into our components. This works perfectly fine and is, let's say, the standard approach when you need in your component and http kind instance in a blaze of where perceptibly application. However, as I mentioned already, I want to re use my coat for boat, a client and a service advisor app. And then this approach is and the perfect solution for service and laser mikes left recommends using the http client factory. This is a clause that was introduced with a speed in a court to and can be used to retrieve a managed instance off. The teacher to be client Feinstein Blazer also supports this since its final release, and I will be using this approach since it will give us the best compatibility between client and service hand plays, a coat Now, before I show you how will use the http kind and the xdb kind factory, I need to inform you that which every report you choose to make use of the agency behind it will always be given us through dependency injection. These applications, as I already mentioned, are very similar to a speed in court. And Dan Drew, everything evolves around dependency injection. It is built into the powerful as a small side note. Let me explain dependency injection so that you have the required understanding of what the I minus injection for short is all about dependency. Injection will help us creating more loosely coupled coat. Imagine if you have a close named here, my close, and it needs to work with a longer instant off instance hating the longer directly in the Michaels, which creates a hard dependency between the two. We bring in do things an interface I longer and a dependency injection container. The container can be seen as the central point off information. We register their that when so one ox for I longer that will get back a longer instance. My girls will then ask the container. Can I please get I looker and based on the registration that have happened, the container will return a concrete longer instance. We've now decoupled things and that makes testing so much easier. Also, we don't need to create all the required object ourselves anymore. This is handled by the container. The good news has said, is that ace peanut core comes with a D. I containers bundled into the package and blazer. ABS will make use of that container as well. So let's now see how we can from gold work with the http can't and I start with the basic approach where we use the http kind service directly. First, we must in the program close register that HDB kind service with the services collection. This is the pre configured age to be kind that comes with blazer 1% we only the services collection that you see here is the collection off services registered with the dependency injection container, part off blazer with the lines of code you see here on the slide, we are registering the service. Using the ad transient matter at transient is a matter that registers types with the dependency injection container with a transient lifetime, meaning that every time that we ask, for instance off the type, it will give us back a new one. We're also passing the base interest, right? A FBI resigns. Defeated This endpoint address cannot also be retrieved from a Jason settings far, but for simplicity's sake, I've hard coded it here. Once you have registered to service, you can now use it directly in your component. In a component, we can access the service inside the collection off services registered in the dependency injection container using that inject attribute, which is what you see here. This will get from the collection off services the requested service if it can find it. Otherwise, you'll get an exception. Now that the dependency injection system gave us access to the http client instance, we can start using it. We blends a rep assembly, a set off help and methods was added that makes interacting with the rest. FBI over Jason. Very simple. Take a look at the snippet. You see your home to slight. I'm using the get from Jason. A sink method, which is a generic, meant it as a type diameter. We specify that will want to response to be returned as an A off in place. This will result now in an 80 to be request being sent to the a P I slash employee endpoint. Because the http client instance was configured with its base and was already in the program caused the full euro will be used to make the agent being quest to There are quite a few methods available on the agent. Be kind to help us with the communication With arrest beckoned, we've already seen that get from Jason a sink which, as the name implies, is used to retrieve adjacent string from the FBI. There was also the post as Jason instinct method available to this method. We passed the date that we want to insert on our beckoned as adjacent strength. Similarly, the foot as Jason a sink method is used to populate an instance and to this matter, to we passed the object you want to update as Jason. There is no real alternative for deleting Ince's or third reason extension method called the elite, a sink available that can be used to send a delete request to the FBI. Now, the http client a b I works fine directly in components, however, since I want to show that we can share code between the service, that laser and the client side Laser app I will, is that he was a second approach based on the 80 to be kind factory, which is, in my humble opinion, the best approach to use. And this goat can be shared in full between the do blazer models. One more thing, you're good behind. Kloss needs to remain clean, and I suggest not writing. Do much code in there are therefore suggest writing coat that interact with arrest a B I in a separate class. This can be easily achieved. Using the HDB client factory, the agency began factory is a very clean way to create http client instances. Basically, it offers us a way to go figure in a central location. Echoed how the agency be kind instances should be instance e ated in s peanut core. It also manages the lifetime off these instances making sure that we don't run into issues. That, however, is less important in blazer weap assembly to instead use the agent be kind factory who will need to go back first to our program, comes and register the agency be kind factory with the services collection. That is what you see you on the flight. I now use that at its to be client method, and indeed, it's a bit confusing when it comes to the name off the methods that, at age to be kind extension method is used to bring in support for the KGB guy in factory. For this matter to become available, you'll need to add a reference to the Microsoft out. Extensions are 80 to be package we all using here the Type H two B client approach. As I just mentioned, I don't like to put do much goat in my components and definitely not the code that will indirect with my rest. A p I therefore suggests writing code that interact with the rest a p I in a separate close, I think, to call these classes service costs says they have a single task. Typically, in this case, in directing with the A P I to send and get data here, we are registering that the Employee Data Service, which will see in the Demmer, will be registered with the services collection, and it will get an atypical and incense from the agency declined. Factory injected again. The configuration is done here that an phone and optionally other configuration to connect with the FBI is all at it here. You see then that MPRI data service implementation implementing the interface I am for you data service which were used to register the service in the services collection. This girls will contain the actual logic to interact with the rest A b I and therefore will also need an H to be kind. Now the inject attribute that I just showed you only works in a component cost. This class is not a component, so we'll need to use a different way to get in the http kind when I'm using here is constructor injection. As you can see, I'm using a constructor perimeter. Http Client this will be injected since we registered that HDB client factory in the program close at the start up off a replication

Demo: Accessing Data from the REST API

let us return to the demo and replace are hard. Go to data with real date. Well there for bringing support for the 80. Declined. Create a new data service and use that from a master and detail page have shown you in the previous model that in the program class there is a services collection on the rep assembly host builder that allows us to add services to the dependency injection collection that comes with Blazer and the default generated. TEMPTED already ants support for the agency be kind passing in the address off the end point. So the rest a p i. Now we can use the aged to be kind this way that it's perfectly possible if you want to do so in our component. For example, let's go to the employee overview. We can bring in their 80 to be kind through dependency injection. This line will do so let's bring in the critic using statements. So now I have, in my component access to the 80 to be kind because it was injected here in the services collection. I cannot inject it here in my component and then use it, for example, like so I can use the H two b client and get data using the get from Jason a sink for my http one point automatically they get from Jason Facing will convert my data into a list of employees. Course registered your complaint because I haven't Oh, wait. I haven't made this method asynchronous it, but we'll do that in just a second. I'm not going to be using agent behind this way in our application here. The reason is that I want to build my applications so that it can easily be converted between client side and service and blazer. And this approach does not allow me to do so. Instead, I'll use that HDB kind factory. So let me undo these changes here. There we go. And now we're back where we started. So now we will use the agency behind factory. I'm not going to use the H began in factory directly from my employees overview component. I prefer to do things right like a set in this lines. I prefer not to do data access directly for my component, but I prefer to separate that in due to a specific clause that will do just the data access and I'm going to call these glasses service glasses and I'm gonna put them in a separate folder and I think services is a good name for that. So let's create our first service gas that we're going to use toe access the eight behind that we saw in the previous demo and we're going toe create a class that is going to focus on accessing the employee data. I'm going to create the employee data service. In fact, I'm going to start by creating that I m Pary data service, which is an interface. I use interfaces for almost services. Since this way, I can more easily inject them in the dependency injection, contain our show you that in just a minute. Now, what is this Employee data service going to have to do? Well when talking with my data service? I probably want to get a list off all employees. I may want to get an employee details. So by passing in the employee, I d. I can add update or delete simply via my FBI as well. So I'm going to create methods for all these actions. Let's bring in off course the great using statement next Of course, we need to create the actual complete data service, which, of course, needs to implement the I am for you data service. And of course, we need to bring in the implementation of the interface as well. Now in my employee data service, I'll now need the cage to be quite. I can't use the inject a tribute here that only works in components. So how do I get access to my HDP kind? Well, let's go back to the program class instead of using that HDB kind directly as you saw here. I'm going to replace this by a new line that is going to inject the age to be kind factory. The agency big giant factory, as the name gives away, is going to create new instances off the 80 to be kind by default. The HDP clients factory is not referenced inside off my Blazer project. I'm going to start by adding a new dependency. I'm going to add and you get package. I'm going to bring in the Microsoft Extensions age to be Package has bringing it in. Let's go back to the program. Clubs can comment out this line because we're not going to use the H two b client directly, and instead I'm going to use this line here. I'm going to be bringing in the HDP kind factory and its related services. And so what I'm going to do is I'm going to register that employee data service with its interface, and it will automatically get injected on HDB kind Instance that is created by H to be kind factory. And I've set it up so that the base address is the endpoint off my a p i. This should be the same for your application as well. They should be the end point. Always the FBI is running. Of course, we just use complaining little bit because it doesn't know about the services name space. So let's bring that in. So really, what I've done is I've introduced now that agent behind factory and I'm using the typed blind approach here. This is going to registered these types and the HDP kind that is required inside of them is going to be injected and created by the HDP kind automatically as well. With its default configuration is also a very good approach because I can not configure my agency kind in a central place here in the program, close and Configured insists will then be passed into my services in my application. So that's not benefit from this does not go to our employees, date the service and let's bring in an aged to be kind, which will be injected through constructor injection. So I just did. You can now automatically generate constructor. There we go. You see, not at the HDP client is going to be injected to construct the injection. And that will be working because of the fact that we added 80 to be kind here passing in these types. So now we can implement. They get all employees method using our newly created 80 to be kind. Instance, Let me first make sure that we get rid of the Reds. Quigley's how many has made it a sing because it's going to use in a weight. I'll bring in the correct using statements, so I'm going to do now. I'm going to use my HDP kind pointed to do the A B I slash employees and get a stream a synchronously. I'm going to get data from the A P I end point as a passed in that I'm going to use a case insensitive approach here that is going to return adjacent string a synchronously. I'm coming to d. C realize that in an eye inimitable off employees and that I'm going to return So this method is now working is going to fetch the data for my a p i n point on return me an eye inimitable off employees in a very similar way. I'm going to use to get employees details, which is expecting an employee I d make it a synchronous to start with, and then it works in pretty much the same way we're not going to use to get stream a sink pointing to the FBI temporary passing in the employee i D. And it is going to return a single employee instance. So with this, my employee data services ready, that is now, go to the component and get rid of that hard coded data and use instead this employee data service. So that is the lead. All these initialize methods here in the employee overview. Also, let's get rid of this, and I can also get rid of this list of countries and list of job categories So now we have a very bare bones component again. It will now need to rely on the employee data Service to get its data. How am I going to get in an employee data service? It is. Start by bringing in an employee data service. Property now that is not going toe automatically. Appear here. I need to inject it. Remember, in the program clause, I've registered it with a dependency injection container. And in my component, I don't need to use constructor injection. I can actually rely again on the inject a tribute to inject in this case. Now that employee data service, Let's bring in the correct using statement for that that we go. So now where my component is initialized, an instant of the employee data service will be initialized and passed into dependency injection. I can now, in my own initialized facing ask the employee Data Service to get all the employees and we've heard him as a list. Of course, is no needs to become an asynchronous method as well. I also need to get rid of the heart, go to data in the employee detail. So let me do that quickly. Here. Let's get rid of this as well. We still need the employees in the paramedics, so we need to leave those in in the exact same way will bring in support for the employee data service every game. Now use that in our own initialized a sink to get the employees with the idea that was passed through the Pammy. That's what I'm doing over here. I need to make this method now asynchronous as well, and he moved this return statement. Now, before we run the application, it's a good I d to start your A P I as well as your blazer application at the same time. And you can do it is by going to the properties of the solution and then selecting multiple started projects like here to a P I, as well as the APP project. And you're good to give has now run the solution, and you should now connect to your baby I from your blazer app. So there's the blaze replication running, and here we go. We now are loading in. Data from a local database are a PR is now being asked for data and other eight beyond the service side data is being used in the application. How great is that often will need to connect with the services in a secure way We have another port in the blaze about that goes deep into connecting it AP eyes securely By Kevin Docks

Creating a Form

we've updated the application so it fetches riel. Data from a service that's already a big improvement in the next part will extend on the use of the FBI will bring in the ability to add a new employees, but for that will also need a form. Now, before we look at the actual creation of the form, it makes sense to explode. Options. Blazer has to work with data in component coat. Blazer comes with support for data binding, making it easy for us to expose, for example, string property. And they collaboratively bind to the property in the market coat without knowing. Really, you have already in the previous module used Data Bunny when you created the details screen of the employees. Blazer actually has different options for data, but we can do one way binding to weigh, binding and binding to a component. Pam it. Let's take a look at these options and how we can use them using a one way binding. As the name implies, data will flow in one direction, meaning that updates to the value will happen in just one single way. In the snippet. You see her on the slide. We are displaying the value off the first name and last name off the employees. No doubt employees should be a public property for the binding to work. We're using data binding here using the at symbol. This indicates that the value should be retrieved dynamically if the value of the first name of lost name changes, for example, by a user interaction. So just clicking on the button, do you? I will also be updated in blazer. Executing event hand, such as clicking a button, will automatically rear ender to you. Why we don't need to ask specifically in code for this. Using data mining makes sense. Really, when we want this link to exist between the source, so the employees and the target, so do you want. It's also possible to use this index for one way binding inside a form control such as a label. Here we are setting the value of the label again to the first name off the employees, next to one way binding. We also have, quite logically, a two way binding. I think the name really makes clear what is type of binding is going to do. It will allow for a bi directional flow of data, the over dates off. The data will not be possible in two directions. If the user makes it change in the value in the U. Y. In the form such as a textbooks, the underlying value will also get updated. You can see how this works on an input. We now use the at bind attributes and again specifying the property we want combined to. By default, the original value will be displayed, but if the user makes it changed to it, the value will also get updated. The default behavior will be that the value will get updated when the user taps out off the import, and the latter we can also influence. If you, for example, want to populate the value while you're is typing, we can add the bind value event and specify the event we want to trigger the binding. The result of the coach you see her is that every time the user will type a character, the property value will be update

Demo: Testing the Data Binding Features of Blazor

let us return to visual studio and explore data binding in action. I'm gonna show you data binding in a standalone demo. Have here again a component basic laws image. I'm creating a public property and play and then in the own initialized a sink. Initializing that employees so well. Now use data mining Indio y of the application to show the data or change it at stake. Click. Here you see the razor component, which is linked to the component based class using the inherits directive. First, let's take a look at one way data mining. I want to display the first name and the last name off the employees Endy y, and we can use data mining for that simple used the at symbol, which is played razor sin. Thanks to display these two properties, let's take a look at the result you're now seeing that first name and last name have been filled in correctly. Then we can also use one way data binding statements on, for example, regular import controls on form controls. Here. You see that I'm using the same Syntex at employees, first name and last name on an input. This again is a one way data binding and you can see the result here are start changing the values in just a minute. Now it gets really interesting ring we can do to a data mining to radiate a binding in blazer will let their value from the source flow to the target. So we will still see the value appear in the wind. But when I change the value in the Y, the value will also be updated in the component based class. So owner ample your property. For that, we use a different syntax, the two way bindings in Texas. And you see here that I'm doing that using the and find attribute that specifies again, Mr Value to bind, do at Empoli first name and last name. Of course, the result is pretty much the same. But now let me change the value here I type of new value and notice what happens when I step out of this field. You see that all the other fields which are bound to the same property to the same employees first thing have also been objected. That is two way data mining have changed the value in your eye and it updated in the component business property. I was added this button Here, let me click on that. I will hit the brake bond and you'll notice here that Army Inspector Value George has indeed been set as the first thing. So data has flown from the UAE to our property. Now, you also saw that the default behavior is that the data binding triggers Onatopp out of the field. It is also possible to influence this here. You see that I'm no longer using the plane bind, attribute, but amusing the byte value. And I also add buying value event. What I'm doing here is I'm overriding which event should trigger the binding off the value in this case, I want this to happen when their own input triggers. In other words, as soon as that type, the data will be updated that cities in action. You see that automatically when I type, the value gets updated and all data blandings are updating as well

Forms in Blazor

as mentioned when I'm working towards is the ability for a user to create a new employees data entry and HTML applications is always going to be based on a form why we can use the regular HTML form tank and the input tank blaze. It comes with a number off ready made import components that we can use in a foam and these will help us in creating our forms. The form itself will be an edit form and import components will get support data binding. On top of that, they will also support validation which will see in the final point off. This module asset laser comes with a set off import components that you get for free. These basically wrapped the standard HTML form controls to use an input to capture. Text will use the imp a text component, to work with the multiplying text field. In html, we have the text area on em blazer. We have the input text area to allow own in American, but we can use the input number and to use a drop down, we can use the input. Select a date picker option is available to the input date and the in protect books will allow us to present a cheque books to the user. You can see an example off using the edit for the former, specifying what will be the model for the form. This means which object will. It's Children. So the form components be data binding to that's here again, an employee property that we have defined in the code behind for all properties off the employees we want to use to be able to enter data. We now use an input component as an example have used here an input text and I'm binding its value to the last name property off the employees. This is again a two way binding notice. We have also specified what needs to happen when the phone is submitted. The event handler specified in own valid submit, so handle valid submit will be triggered. Render form submits without validation. Errors will come back to validation

Demo: Adding the Add Employee Form

and the next demo we are going to extend our application with a new page will allow users to enter a new employees using the edit form and other input components. We're going to see data mining in action in a new component, the employees at it component like we've already done before. We're going to create a new component. This is a component I want to be able to navigate to. So I put it under the pages directory and we call it the employees at it component again, like give them before will make another partial clause the same name, of course. Get to make it partial on a wise vicious. Did you really remember you by giving you a red squiggly? How are we here? That's already bring in a couple of things in this employee at it, partial close, that employing added component is gonna be used to work with employees, the great new employees and added existing ones. So, in other words, what are we going to need for that? Well, we've already created the employee data service and remember, this has methods such as updating and adding an employee, so I think we need the employee data service in him as well. So I'm gonna bring in the employee Data Service, bring in the correct using statement. And that's what the same thing also for the inject when we are in edit mode and you'll see later on that this page can be in two modes. When we are in edit mode, we're gonna need that. I d the idea off the employee that's being edited, that is, are using in a string for that and add the Pam it attributes onto it this way. Leasable search for the employee i d. In the query string when this component is being evoked and no matter in what mode my component will be doing at or edit mode, I will always be data binding home to an employee. So I created as a public property here as well, so that we can data mine onto it now buying away. Since this is a partial glass with the compliant cause of the component itself, you could make it into a protected property or even a private property boat will actually work in. Blazer has now go do D U y off my blazer components like I already said, I'm going to use this page to both add an employee or did an existing employees. This basically means I will need to be able to address this component in two ways. With or without a perimeter I need to make. Let's say, an optional, passionate optional perimeters are not available at this point in Blazer. But we can define like you see here to page directors, one that has no employee I D segment and one that has one. So this way the router in my glaze application will know that these DuPage directors thes two addresses, let's say, can be used to navigate to disk amply at it component on Let's get rid of the DIF alternated court again. I'm going to start building at my why by handing a section where I'm going to put all the code for my employees at it, you are. I'm going to start the page by adding an H one a title that is, which will again display the employee first name and last name. And that is, of course, this employee property that behalf it's post here in the M plea, and it cost we want to add or edit a new employees. This means that we'll need to bring in a full now. We could do a regular forming blazer that would work. However, Blazer has support for this edit, for that's a built in component that has a lot off extras, including things like validation. And so we'll use that in our application. I own this form are specified that will bind do the employee property. So I specify here at the model will be the employees that we have defined as a public property, these employees going to be used later on to do validation upon to see if the data and denial the field is effectively correct. Now we want added the first name, the last name. How can we do that in HTML in a regular form that would be using a regular input? And again we can use that in place, and we've already seen that. But Blazer comes with some built in components that again have more options, including validation, and will use those again. These components, such as Thean Pretext, can only be used within a blazer at it for said, start by bringing in the u I. We were going to be able to add it. The last name. As you can see, I'm using an input text for that. I specify that I d to be the last name, and now I need to bind it to the last name property off my employees effect. I need too great a two way binding. Another one way mining know when the data is loaded. Initially, it needs to flow from my employees to my wine. But when the user then changes the value that value needs to go back to the employee instance, that is what a two way binding is all about. And we can create a two way binding by using the ad bind value. This indicates that we are in a two way mode, binding to the employees last name. The initial value will be shown when the form is loaded, but when the user then changes, the value taps out of the input, then the value will be sent back to the last in property off the employees. Now this will need to do for pretty much all the properties. So I'm going to paste into snippet that again you can find with the snippets off this course to show more in good texts for the employees. So here was our last name. We do the same for first thing. We also want to display the birthday, but that's actually a date. So for that alone, use an input date, which will run there in the end as an input type is date. I don't have the in protects for email, street, zip, code and city, so that is pretty much all the same. Now, before I can actually run this, I actually need to go back to my components partial class and load in the employees based on the idea that's passed in just like we did before. I need to use for that the own initialized a sink. So I'm going to again use the Employee data service, ask for details based on the idea that is passed in, said that value as the employees, which is then used as the source for money at it full. If we not run the application, we should effectively be already able to see our for with the correct inputs being generated. Let's take a look if a now brash to employees at it. One. I will see your former appearing. There we go. We see the correct inputs showing the correct data and for the input eight, We also see the date picker being rendered. So our form is already working. That's great.

Demo: Adding More Components

We already have a bar of the screen working that's now continue by adding more import components, but there are more feels. I want to show it on this ad it form. Let's continue with those next, and the next thing I want to bring in is the ability for a select a drop down that is to select the country off our employees. In HTML. That would be an input type selector sent in blazer. We have an input select. Your study is already suggesting that we have made a mistake here. Some things are missing. Indeed, we need to include a list of possible options as well as bind to the country. Andy off the employees. Now let's first focus on getting in the list off all countries to show in the ____ to show based off options status. For that, I'm going to bring in in my amply at it. A list of countries on that list of countries needs to be loaded. Also from my a B I. I have, as you remember, the country controller that is going to return me a list of all countries now, just like we did to the employee data service will need to bring in another service to work with the country's. So let's do that Next. I start by adding an iron Country data service. So let's go to the services folder. Bring in an interface that I Country data service and this will be interface. Of course, every contained two methods to return all countries or just one individual country by i d. Also bringing the implementation cause that would be the Country data service which will implement, of course, the I Country data Service, and the implementation of this one is very similar. I'll paste it in. It's again a snippet. It's going to use the http client again, which is injected two constructor injection in the Get Poor Countries method. I will use the Jason serialized to D. C. Realize the list off countries which is retrieved by making HDB call to a P. I stash country because doing to retrieve all countries and I returned Indian as an economical off all countries before we can actually work with this, we need to go back to a program class and in the program class, we need to register that I country data service with its implementation again to pretty much the same line as we had here. So duplicate this and make these I Country data service and let it be implemented through the Country Data Service. And the basic idea is the same for both. So we are creating a new registration for each type client that is going to work with our age to be kind so they'll get a new HDP client individually. Next, we can return back to our component and in here we're going to use the country data service. We'll bring it in to the dependency injection again on our able to fill the list of countries by making a call to our country data service ghetto countries. With that in place, I can now go back to my select and bind its options to this country's list. So let's go back to the component. You. Why, as a now have added to my input, select this before each, which is going to loop over all the countries displaying an option binding to the country i d. And displaying the country name my visions did You are still not happy and it factory correct because you haven't bound to a selected value. Now we would think that we can do the following. We should actually be able to do in a two way moat buying to do the employees that country I D. However, if he would run the application now, we've got an exceptionally runtime exception because at the time of the creation of the schools, the input select cannot in a two way mode bind to an indeed your value. So instead, what I need to do is I need to create a helper field, a string convert that into any teacher, and vice versa for the two way binding to work. So let me go back to my employees, edit and let me bring in a country I d. That country Eddie and then going to set to the employee. Contrary to string that I cannot use in my binding in my select and so I can replace this with country I D. At this point, our input select is correct. That's at a couple more fields, and then we'll run the application again to see the result. I run in some more fields, for example, for the employees phone number. As against year, there's nothing special with that one. The latitude and a longitude are using an input number so they will render as an input type is number. Have a cheque books that allows me to check if the user is a ______ or not. Then I have the same input. Select that offer drop categories. I was standing to bring in a drop category data service. I'll do that in just a minute. Have another input selectors going to bind duty, gender options. And the general was actually in Denham in my shan't codes. So I need to bring in the pattern. Is Spanish shop hmm, not shed Ning space for this to work. So let's go all the way to the top again. And bring in a using statement for Bethany Spy Shop, a traveler chant and a soft that it couldn't find it have been the same for the input. Select for marital status. Never have another important date for the joint date and exit eight and finally have used to input text area, which is, you can guess, renders a text area for a comment. So everything is working apart from this job category, which also requires the job category data service to be set up. Let me do that and then come back to you. So I've now added the I Drop category data service. That's not another interface that's doing pretty much the same as a country data service. It's going to get all the job categories and job category i d have implemented it. And a coat is very similar to what we had to the country's again have registered that with the program close and then in my employees at it have also brought in an eyedropper category data service to dependency injection have brought in a list of job categories, and because it's an input select, I'll also need to bind onto a string Rotterdam and indeed your value in the own initialized. I think at an initial as a drop categories from the rest FBI and I said the drop category Heidi. Different, unconnected employees edit. We should not be getting any ariz anymore that we go. And so here is the input select that was still causing exceptions. So now also get a select for the job categories, and I finally want to test my work. I'm gonna go to the employee overview again, and I'll bring in another link that is going to go to the employee edit page, passing in the I D and showing at night. So I'm ready to test this. Fingers crossed and let's go. Let's go to the employees page, Click on Add it here and he was either component, showing all the data off these employees. I can see the country is being filled in on. That seems to be working. I think we've done a good job. We've actually created that added page over it.

Demo: Saving the Data

older. A screen now looks good. We can't save yet. That's now that support for saving data. So what do we have? A working edit? Page it gone. Save the employees just yet. I don't see that is a really good added page. So let's continue on our page and also bring in the at functionality. So I go back to the form and I want to drinker code when submission is being triggered, Have for that in blazer on my adit form, Do build in methods own planet Submit and own invalid Submit The own valid submit will, of course, be triggered when the use of submits the four and the data is violet invalid. Submit. I think you get what this is going to do is going to trigger when you're submitting the form. But data is invalid in fort still, so we need to handle those. I'll come to those in just a minute. Let's go back into coat, and that is go back here in my own initialized a sink. I actually comment out this line here. What I need to do is I need to check in which moat. Let's say my form is going to be, and there are definitely other ways of doing that. But I'm simply going to check if the employee I d is zero, meaning that it couldn't be passed from the employee i d para Meter. If that is the case, we're actually adding a new employees. And then I'm going to initialize the new employees with some defaults. Otherwise, we leave things as is, and we load the employees from the data service like we did before. So that's not already now my own initialized. I think it's pretty much OK. So not only to bringing support to handle these dramatic here, their own violent submit on on invited segment. So I created matted handle Valets admit, what is this guy going to do? Is gonna be triggered when submission on the form is happening? What is going to do? It's going to again past the country i d. That was the value set in the input Select and specify that on the country i d for the employees and the same will happen for the job category. I d Ever employee I d. Was zero mean that we're adding an employee will now go out to our employee at the service, and we'll try adding the employee otherwise will update the existing employees. Now I have a couple of things missing. I think in my form, let me validate. I don't have a submit button yet. Indeed. So inside of the form, I can only do submission if I actually have a button to submit the phone. So simple button types of Mitt plain HTML. But And that is, well, actually trinket submission on my phone. And if I'm not mistaking on my employee data service, I don't have an implementation for the ad. The leader update yet indeed. So let's add those as well. So here we now have the implementation off the ad employee is going to get in and employees, which that needs to be converted into Jason that string and then going to use all my 80 to be kind and pass that to the FBI employees and front. Since we are sending data, hair will use the boast a segmented off the http client. If that was success, it means that our employees was added and we are getting back that added employees, and we are returning that hear it from the at employees met it. Let's take a look at the update. Temporary next update. Temporary is going to get also an employee, and it's going to update using the foot facing Method employees on the end point and elitist. Simply going to try deleting the employees based on the idea. Let's go back to our component. There's a few more things I need to do to polish it. I'm going to on my component. Bring in a couple of fields to work with the status off my form. You'll see them being used in just a minute. I have a Boolean Safed, which I'm going to use to check if my phone was already submitted or not. House. I have a status close and message field that I use in just a minute as well. In the old initialized a sink I'm going to set safe to false, and I'm going to use the extra fields. Also in my handle. Velits admit, Let me show you what I've changed here in the handover. It's admit I'm again going to try to convert the values for the country in job category. Andy, If the employee I d was zero, it means that we need to add them for you. And if that went OK so that an employee was returned, wasn't no. We update the state. Disclose alert success, and you'll see that that will be used in a minute to visualize a green status. Bart in my application. I'll also specify the message, and I said safety to truth. Otherwise, I set the status to alert danger, showing her message and said, Safe to falls so that my full can be edited again by the user. The case that her updating an employee and that trend successfully I'll do pretty much the same thing here in the handle. In violence of mint, I also stepped these status class and message at a safe field to save brilliant here is actually going to be used in my u Y to hide or show the form. So I'm gonna scroll all the way to the top again. And over here I'm going to check the status off the safe boom. If safeties falls meaning that we're still editing, we should show our employees at it form. So have now surrounded that within. If Safed in the case that it was Safed well then we show on alert with status class value. That's the one I said here alerts, accessory, alert, Danger and I also specify the message. We're nearly there. I now need to go back to my menu, my Neff menu, that is, and I bring in another knave. Ling showed every edit bake in my menu without a permit, So this will them used to add new employees. Let's run the application at this point and see freakin successfully at a new employee or update an existing one. So let's first try editing. That's added Bethany here and Jane Bethany's last name Kings. This address here. Er change. Also, the country can change many more field, but that's only save the employees we see now. The status was successfully Safed. We click on employees again. You see the change name so effectively are changes received has taken at new employees, and I've already entered here. The new user details click on safe and go back to the employees page, and they're based on new User. Our new employee has been at it. We're nearly there. I'm gonna add a couple more things to really polish the edit page. I also want to bring in support to be able to delete my employees now that the lead button should only be shown if I'm currently anything an employee. In other words, I'm going to check the status that I've used for that. The employee i D. And if that is longer than zero, it means that we're anything an employee. I'm then going to show a button that allows me to delete that employees. So in the own click, I'm going to call detail it, implement it in the delete employees method because automatically gonna be invoked. When I click on this button, we will call the employee Data Service, don't delete employees passing in the I D and also set the status and the message and is one more. But I want to show here because now basically, when I'm in the screen, I cannot never get out of it. So I won't do basically add like a cancel Navigate back to the over you. But so I'm adding here yet another button that is not going to triggered and navigate to over you method here. In this case, I'm going to need to manually from code navigate. I haven't done that yet, but it is available Built into blazer using a cough. Kulti Navigation manager The navigation manager can be injected automatically and you don't have to add anything to do services collection yourself. It is there by default, and it is the clause to allow you to do navigation from coat. So in the implementation of Navigator overview, I'm going to hear use the navigation manager and use its navigate to method to never get back. Do the overview. That's try it one more time and see the result. The flock click again on employees I can click on employee, I'm gonna delete Jonah can hear. So here are the details of John How are we going to say goodbye to Joan? So I'm gonna delete here, did it successfully and, as you can see has been removed. And if I didn't know myself here and I can come back to overview, we go back to the overview. So now we have implemented a full ad and added functionality in our blaze replication in the blaze apart, we have another course that goes deep into working with forms and data binding created by a whole long shirt. Take a look at the schools to learn more about this vital feature to build laser APS

Adding Validation to the Form

in the final part of this model will look at how we can extend our form so that it will also support validation. First, the good news blazer comes with support of validation built in. The reason that we used the edit form and import components before is also probably this validation is automatically included for these components. If you are familiar with how validation happens in a Speedo Net Court, NBC, you'll again see a lot of similarities. First, on a model type, we can add data annotations. For example, if a property is required, we can add the required attributes. Once we have decorated our Model B two required attributes we can extend the edit form will bring in the data annotations validator component, which will attach validations support using data annotations and secondly, will bring in the validation summary, which is used to display validation messages

Demo: Adding Validation

in the last them off this module will at support for validation. In the At new employees page, our phone can be submitted even if there are things not ended in the correct way. In fact, at this point or application doesn't even know if the data is correct. So I'm gonna be using some data annotations and show you that my edit form adds support for validation. Now, my entities were located in the shed project on gonna add some data annotations on to them. But to bring in support for that, I need to bring in and you get package and it'll be the system component little annotations package. I'm gonna bring that into my shed project returning place. I can go to my I'm for you have had some data annotations onto it. So now replaced my employees and I've added some data annotations. I've added some validations onto my properties so that the first name is required and should not be longer than 50. Characters have done the same thing for last name. I've made email address required as well, and I've also made sure that the comments should not be longer than 1000 characters if it is to be picked up in my employees edit screen, I need to bring in support for foundations as well. For that, we can use the data annotations, fella data. It is a built in component that will bring in data annotations support in my head It for now, I still need a way to visualize thes. And for that I can use the validation summary as the name gives away. It is is a summary off all validation errors that have happened in my fault. If I won't do, I can also visualize validation. Harassed won't do my individual imprints. For example. My last name also can have a validation message that specifies that this message should show the validation Paris on the employee last name. And I can do pretty much the same for first name, email and government. And if we're not run, the application validations will trigger. So let's add a new employees or at least trying to do so. I'm not gonna enter just anything. I'm going to directly click on save employees. And as you can see, the validation Harris are showing here, that is the validation summary on the ones showing over here All the validation messages. So now, if effectively added support for validations in or form because of the support for validations built into the edit fall.

Adding Features to the App

Module Introduction

hi there. And welcome to another exciting module off the blazer. Getting started. Course here. Implore site. I hope you are enjoying discourse and that you are getting more and more excited about building your first average blazer in the last module. You've learned a lot about forms and data mining. Do very important features of laser applications in this model will extend their application with some new functionalities at stake. A. Look what These will be the pick of the model By exploring components in some more detail, you already know that the building book of Blazer applications are components in this mortal. I'll show you some more cool things we can do when building a dialogue component. Next, still based on components, really will bring in a component that integrates with Java script and adds a map to a replication, a feature that is currently not supported out of the box, with pleasure hand for which will need to rely on Java script

Adding a Dialog Component

as permits that will start a model by exploring some more features around components. Amel duties while adding a new dial of component to our application. It should by now have already understood that components are a vital part off any blazer application. Basically, each blazer replication is build up out of components. There's no difference in this for client side of service and laser APS. All components can be reused. Components consists out of you. I code so html Annika logic that makes a component IQ. So the seashore kit each page that have built so far is infected component the M but component, such as the input text refused to the previous module. That's also a component, so components can be used within other components. But really, building in this model is a dialogue component. Again, a self contained entities off you buy and functionality that can be invoked in replication has hope. You understand components how important in place. Perhaps they also give us the ability to reuse functionality. The import components that refused in the previous module are very good example of this because we wrap functionality inside a component, we don't need to repeat the coat every time and does the pages. Or should I say components become smaller components? Of course, Support nesting. We used the input components. If Houston wouldn't another component, Lasting components is a natural thing to do. Finally, I will see this in this. Mortal components can be part of the application itself, but they can also be placed in a library, and we do the letter. We can create a component library, which can be then shared across projects, hence increasing their reuse. Technically, we can place components wherever we want in our project, since the RC shop classes now, while that works, it's probably not a good I D, and it's much better do group your components. You'll see a lot of applications having a pages directory, including Better nous Bachop atrium. The pages directory will also contain components, but these component generate pages rather than just part of a page. The other components are typically placed in a shared folder on a Components folder in the everything working Well so far, we have just a bigot in the Shad folder will create a Components folder in the next demo, where we build our dialogue component grimy place components in a sub folder off the project. We need to make sure that Blazer can find the components when using them within another component when we work with blame. Code Fast in C shop have the concept of a name space that can be used to bring in different classes in a similar way. Blazer comes with an imports far, I should actually say underscored imports in the imports file. We can add one or more using directives that declare that we want to enable the use off components located in a different folder or neck space. Alternatively, this abusing statement can also be added to the component itself to bring in components in another folder. In the previous model, we've added the coat that fatuous data from the A P I. I haven't placed that coat in the constructor after is it instead in the own initialized facing method? This is a life cycle method, part of the components rendering time lamb, and it will be called automatically as the name is giving away. It's used to contain code that is required to initialize the component at a time the matter is called. We can be sure that all child components, for example, have Bean created. If you were trying using the same court from the constructor will get an exception. As you can see, you have put its synchronous and asynchronous version if used in a demo here, the a sink version. The reason for that is that we are clawing or FBI, and that is by default a synchronous. Therefore, we have also used a sing first. Next. After this call, the own para meters set is called at this point in the life cycle of a component, all permitted that component will get in from apparent component has been set. We haven't used that in this course. Finally, there's also the own after render method, and again the racing for Ryan own after under a sink. These are called late in the life cycle. After the component has been rendered, we won't be using this one either. In discourse. Now I have briefly mentioned that a component can receive para meters. Indeed, medical Bonin is being used in a nest that way, so permitting a parent component, it's very common that the parent component will pass para meters to influence how the component behaves, creating a component pyramid is done using the perimeter attributes, and we'll see that in the upcoming dinner next to passing in values. Components will also, in some cases, need to communicate with one another through event binding is becomes possible. In this case, the component exposes an event as spare a meter. The parent component can subscribe to that event and passing tote that will be invoked when a child component raises the event. This, too, will see in the demo.

Demo: Adding the Add Employee Dialog

it seems that this is the perfect time to jump back into Fisher's studio and extend the replication with another component. What we're going to do is create the At Employees dialogue, a component that are used from the overview page to allow users of the application to quickly added amply, This will be used in the context of the parent component, and we'll see how it can work with para meters and component communication. So in this demo, I'm gonna show you how to create a separate component, a component that is not page filling. That is because the components so far have been mostly pages, and this component is more or less a standalone component, and a component will look at is the add new employees component and will add it on this employee overview screen. When I click on this button here, this dialogue is gonna appear upgrade. It is as a separate component, partly because I may want to re use these over multiple other pages. So reusability definitely plays a role to decide if something becomes a component or not, but on your hand, by separating my code into multiple components that can then work together. I also made my components code simpler. That is a second very important goal off creating components. So let's see how we can create this component together. I'm going to create this component as part off the Bethany's partial Atrium Blazer application. I'm going to create my component as part off the blazing application that we've been working on. But keep in mind that it also would make sense to put it in a separate library, a component library. If I want to re use my components across multiple projects, well, then this would be the best decision. But let's keep things simple out and let's put it inside of the place application. But as mentioned, this component is not going to be a page. I'm not going to be able to browse to it separately, so I'm not gonna put it under the pages directory. Instead, I'm going to put it under a Components folder, and that folded Is that, say the best practice to put your regular components in. So my component is going to be again a very simple component. We're going to start again by adding, and you raise a component and it's going is component at employees die. Look, that will just like we had before, create Dureza component. And just like with our page components will also create a class that will contain the functionality. And it will again have the same name Adam three dialogue and will need to make it far show just like we've done before. That says this component is not going to be. That's a addressable user will not be able to browse to disk opponent via a cresting. I don't eat a page directive. I'm only going to use this component That s part off another component. Now, this is also going to be used to create a new employee. So I also don't need any para meter to pass in the idea of an employee that I'm going to add it. So it's a very simple component. So what? I'm going to do it again. Data binding. I will need to capture the data entered in the component so back and then save it via my data service. And to capture that datable you stay the binding so will be binding again to a public property off type employees. This is my property. Let's bring in the correct using statements. And as you can see, I'm already initializing this employee with some default data. This is necessary for data binding to work correctly at the time off the initialization off my component. When the data binding is happening, the data that I'm binding to should not be no. And therefore, I'm initializing things such as the country and the the job category. I d to a default value. Now this dialogue is also going to be working again with the employee data service. So just like we've done before, I'm going to be using my eye employee data service bring into correct using statement and I'm going to inject that again using dependency injection. This is going to be necessary so that this component can also save this. New employees do or beckoned. So the blooming is pretty much ready now that's focused on working with the component, as you saw in the small demo that has started with, I am going to be able to hide and show my dialogue. That's exactly what I'm giving to be doing. That component is basically going to be just in plain html, but I'm going to be hiding and showing it. So this I'm going to support by bringing in a simple Boolean property called show dial Up that you're going to see appearing in the blaze of market coat. Let's take a look at that code. First had a dialogue itself is very simple. What I'm using is a bootstrap dialogue. I didn't create that nice looking you by myself. I simply browsed to the bootstrap website and searched for a dialogue component. It's a component that comes with boots that by default, and so I created my component. Based on this bootstrap coat, I'm using a deaf, and that is going to be the outer border off my component off my daniela component, that is. And in there you see the title, the close button. So that's a little cross at the top right corner and inside of my component, I'm using again a plane at it form, which is going to be using do a data binding to bind your employees, and that is this employee here. My component has again support for data validations, and it's using again a couple of input text fields to capture the last name, the first name and email I'm just adding an employee. Feed some basic data here, so I don't need to fetch all the date. Finally have a submit and a close button at the bottom of the screen and is HTML code. I'm not going to be showing all the time. I'm only going to be showing it when this Boolean show dialogue is true. Now, using Blazer, I can very simply react in the Y. Two changes off that property blazer will basically automatically agree French, do you? I when the value of show dialogue changes. So in other words, I can simply use some raise the syntax again that is saying that this diff this entire dialogue component should only be showing when the bullion show dialogue is true. And that's what I've done here. So in other words, this def is always gonna be there. But it's not going to be showing when the value of show dialogue is false. The next will beat some code that can ask to change the value of showed. I look from the outside. So, in other words, our parent component, the one that will be using our and employees Diallo component. We'll need a way to change this value. So I'll do that. Using these methods have a show method which is going to set to show Diane look to truth House. Have a close meant that week is going to hide it. And I also have this reset dialogue method, which is simply going to reset. The employees do is default values, and it's gonna be called from the show and the close methods. Now there's a one on the line here calling State has changed. And what is this all about? Estate has changes. A built in method that can be called hermit in a component toe asked laser to redraw the component to refresh. Do you? Why are? In most cases blazer will detect if, through data mining, for example, the value has changed and you I will need to be redrawn here. However, I do need to ask blazer, Do check if changes have been made to the state and therefore take it a redraw. Do you want? Otherwise the dialogue won't be hiding or showing, so I do need to call. State has changed here explicitly. You're going to see the state has changed being necessary. In a rare number of cases. But if you need to give blazer helping hand to say now I want to redraw the you I detect all change that I've happened and update my Y accordingly. Well, then the state has changed. Is your best friend I'm going to call the close mattered in two places already here when I click on the close button. So the one on the top right off the dialogue. I'm going to stay here on click, and I want you to call the clothes method and let me copy this because I need to do the exact same thing when they use a fix on the regular clothes bottom. And that would be this one. I also need to handle, of course, when the user clicks on the submit, but and just like we did in the previous module on Goto, handle that with the own violet submit that is going to be triggered when submit button on the form is clicked and all they that piece from it. Let's include the handle fell it submit. I'm going to use again my employee data service toe at the newly added employees on. I'm also going to set the show dialogue to False and I'm going toe also place to detect changes so that it sees that show dialogue has changed and it will again hide my dialogue here. Now, at this point, my dialogue is already in a working state. Let's now use it because I place my component in the Components folder when I want to use it from the components in the Pages folder. I need to bring it in. I need to make it known in there Well, that I can do by adding a using statement. And if I want to make my component, that's a globally known. I can add a line here in the imports razor form in your I can add another using statement. I can say that I want to bring in all the classes within the bitterness, partial pay, traveled apple components, name space. This makes them now known in all the razor components with in my application. Now we are going to use the component from the employee overview, so I will bring in a button that has some CSS do visualize it at the bottom right of the screen, and I have a plus sign in the middle for This is my button that was floating on the bottom right of the screen have already included the own clique, which will invoke a method in just a minute in my partial class. Now I do need to include directly Indies employees, overview component, my at employees dialogue and because I have brought it in in the imports. Razor farm Blazer already knows about it. So I'm going to include my at employees dialogue here directly in my overview component. Now you may be thinking, Is it not going to be showing automatically? Well, no. Remember dad in the at Employees dialogue have the show dialect property and it defaults to falls. Therefore, not showing the dialogue automatically only ran that value becomes true was showed a dialogue. But we need to work with this from the employee overview component. So I need a handle to this component and then I can do using the following notation. We can use the at Ralf and then giving it the name. So that is basically the name off the instance off my at employees dialogue and this I can now use to get access. Do this at employees dialogue in my code behind. So in my partial component costs, this is really giving that instance and name are still needed at the code for the quick at employment as a death in the code behind off the employees. Overview. Now in here, I'll need access to my at employees. Dialogue has bring in the using statement on because I've named this also at employees dialogue. This property will actually point to this instance off the at employees dialogue. So when I give this the at ref, attribute that at employees dialogue will automatically be wind up with this at employees dialogue. This is how blazer gives me access two components used a My component you I coat finally will now implement the quick at employees method is gonna be very simple method which is just going to show the ant employee dialogue and call the show matted onto it on the show made. It is just going to set the show dialect to true and then almost laser to take a look at the Y and refresh it so that our dialect is going to be showing. So it is in place. I think we should now actually cr at employees dialogue appearing when we click on the bottom should be able to add the employees to the database, and then our component is going to be hiding when we close it or have submitted something successfully. Let's try that out. So let's go to employees. And there we see the button and now you can see our component appearing when we click it. So let's try it out. That's add new employees. I'm gonna add Dave here and then save the employees, and our dialogue is successfully hiding great. But our list of employees not updating did it save correctly speaking home and go back to in place? And indeed, Dave has been at it. But the list was not automatically updating, so we can find you on our component a little bit more by adding communication between the two components. So the problem that we're facing is that our at employing dialogue component is not informing my overview component, that it has changed and that the overview component should actually react to that. We need to set up communication between our two components this weaken Dubai, including an event called Back in our ads employee dialogue component. I'm going to use the baked in event callback type. This is going to be, let's say, an event which is going to be raised by my component so that our parents component the overview component can be notified about changes happening in the at employees. Diallo component. So in the child component for this to work correctly is also needs to be attributed with the perimeter attributes because then I can subscribe to this car back in my parents component. So when a man now going to do well when my data has changed. So in other words in the handle valid submit After successfully adding the employee, I'm going to raise the close event comic. I'm going to call him to it. The invoke a sink if necessary. We can also pass with the invoke. Other data than this Boolean, even into, for example, include the added employees. We can also do that here. If I had a pair a meter, let's go back to the overview component now in here. I cannot say that I want to subscribe to the close event callback being fired from the child components from the ad employee dialogue component. When that event is raised. I want to handle that with a matted here on my parent component that employees overview in here. I'm then going to in the event handler. Refresh the list of employees, and Blazer is going to show them the full list off all employees again in my overview. With that in place, we shouldn't have actually be able to see the list off employees automatically. Refreshing. Let's try that. Let's go back to employees at a new employees. Let's add the date of the employees and click on safe and now automatically the list off the employees is refreshing in my overview component. So Nam have successfully set up communication between do components using the big in event callback.

Integrating a JavaScript Component

in the second part of this model, I want to show you another option. We have em blazer to bring in JavaScript components. Let's take a look at what this can help us with now that you have a good understanding off blazer already. I think it's easy to understand that although we can create rich experiences with Blazer in the end there just by publications a red blazer we could run the application eater on the service side, which is what we've been doing so far. Or alternatively, we can run the application directly in the visor to represent Lee. No matter how you look at it, it's still a weapon, but it's regiment html unsee shop instead of Java script. Although we can already build really nice things with laser, it's a P. I can't do everything. Yet that is currently possible with Java script. There are quite a few things which are possible in an impressive app for because there's nobody is a P, I at least not yet. Does that mean we're stuck? You may be thinking, Well, good question, and the answer is no, we're not stuck. Raise. It comes with the ability to do Java script. Interrupt like the name is saying it's going to allow us from C sharp code to evoke Java script functions. So if you have already written an existing JavaScript library, you can just add it to the AB and invoke it from the blazer up. Similarly, you can interact with native jobs, get AP eyes such as local storage from a blazer. App. What you need is some jobs skipped that you can then invoke and call from the Blazer. Application. That's it is, of course, extends the reach of a blazer application quiet law and will make sure that there won't be any scenarios that you can't build using blazer. Keep in mind this is all happening in browser. So even if you run a service side Laser AB, the actual jobs kept is running on the current machine. Laser coat will indirect with it. There are effect different ways to interact with John escaped from later. Like I just mentioned, it's possible to make a call into JavaScript code from DOT net. That's the most common approach. This enables you to extend to reach of blazer code, since you're now from your C sharp code calling a JavaScript function that otherwise wouldn't be accessible from blazer. It doesn't stop the other. You can also do the opposite. Her job skipped. You can also call into dot net so into blazer Kurt. In the end, what we're building will also be components. And just like with regular components, these two can be placed in a separate lie Marie, to enable reuse across projects. So how does this work then? Well, do indirectly. Java script blazer comes with the I. G s runtime interface. These interfaces included in blazer by default but to work with an instance of it will need to go through dependency injection again. If you want to get access to an RGs runtime instance will need to use the inject attributes again which indicates to blazer that we want an instance to be injected here. The job, Mr Truncheon, we want to be folk needs to be available from within the Blazer application. We can choose to include a script file in the Dept of the Root folder and reference the far from the host of CS HTML. Alternatively, we can place the script in line in the host, not CHD mouthful itself. You can see the only window object after find a function called Do Something in the component coat. Once we have the instance through D I, we can use it to invoke the JavaScript function. That's what you see happening here on the Js runtime instance. I'm now calling invoke a sink passing in the name of the function will want to invoke and the JavaScript function itself. We can expose whatever gyroscope functionality we want and does invoke it through our Blazek coat.

Demo: Adding a Map

in the next and final them off this module. We're going to work with job script. I'm going to return to the details screen oven employees and show his or her location on a map blazer at this point doesn't contain a map. But of course, to JavaScript we can at one for the purpose of discourse. I'm not going to create a component manually. I'm going to bring in a general skip component and show you how you can add it to a replication. The map component that were used in this demo comes from a great open source tutorial created by Microsoft Cold Raising Peter, and it's available on Get up. I will show you the link at the end of this demo, where you can download the entire tutorial so will extend their application in an already existing component library. We're not going to create a component library are south here. It is already part off the assets that come with the down. It's off the course, so take a look again at the assets holder, and in there you'll see D components library. Copy that folder and now go to the folder where your current solution is in. I'm going to go here and right click on the solution and say Open Folder and File Explorer. It is my current application. I based in my components library that we go and I'm a right click on my solution again and then say at existing project in there will not find the components library and we add DCs brush far. So now you should see in here that the Component Library has been at it. I need to use this from my Blazer application. So from the APP Project, start by adding a project reference to the Components library. Now that's Explorer, the components library. In there you'll find two folders. The map folder and the Dub Dub Uproot folder. In the Map folder, you'll find they raise a component called map as well as some helper glasses. Under doublet Uproot, you'll find a JavaScript file and some more JavaScript and CSS static fast on this leaflet folder. Let's take a look at the map component. The map component does. The name is giving away is going to be responsible for drawing a map. Drawing a map is something that is not included out of the books yet in Blazer, so we'll use javascript in drop to draw a map. How about doing that? As you see here, the u I is very simple And by the way, we're using the code block approach here, reusing the code directly without a good behind. For so at the top, we have a diff which has an element I d suggest you can see here is a dynamically generated I d. Then the component also contains two para meters zoom and Marcus zoom will be the level of resume that we can pass to the component to indicate what is going to be the level off. Zoom on the map and the markers will contain the list off markers points we want to highlight on our map. You can see the market class here. It will contain a value for the X and y position readies. Marker needs to be placed now at the bottom. You see these own after render a sink and there will use javascript interrupt to draw the map. As mentioned, Blazer does not know how to draw a map. But John was kept does and to javascript in drop. Who made this possible in blazer as well. I had to do this. We are going to use the J s. Renta and you see at the top that ideas runtime is being injected to dependency injection indeed. Renouncing the use off Another directive the inject directive. Using at inject, we can inject instances off types registered with the dependency injection container. The ideas runtime is available by default. We don't need to add anything in the program close. It comes by default in any place, an application. And I use the Js runtime and I use It's invoked for a saint method to invoke JavaScript from a place of applications that this is gonna be the javascript interrupt doing its job. Now know that we do not do this in the own initialize a sink. The Jonah scapegoat can only be rendered after the component is ready. So in the own after render a sink, we can invoke that job because at that point we know that our component is ready. Now what are we going to pass to the invoke for a sink method? At first is the name off the function, the JavaScript function that is that we want to invoke the second baron meter is then the element i. D. This is the razor element that the JavaScript will need to work on. And it's a perimeter off the javascript function. As you'll see in just a minute. The third perimeter is the list off markers. So the points we want to highlight on the map these two will be passed to Jarvis Construction. Now, it is sure update function in the delivery map. That is the job. A scapegoat that will invoke this. Included Here in the delivery map. Adult Js file in here, you see that I have included the delivery map. And on there we have a function gold show or update that expects that I d off the diff where we are going to draw the map on and the markers. And that's what you see here. I'm not gonna bother explaining your all the java skip that is in here. But you do see here that we are calling the function with Element idea and Marcus. So the idea with a component library Is that you at the library? You don't need to know all the inner workings of the library. We can now use this library from our Blazer application. So that's what we'll do now that is. Go to our laser application and let's first make sure that all the static files will be referenced from a Blazer application. That's what we'll be doing now, and the first time that I'll do is I'll go to my index file again under double uproot. And in there I'll bring in all the aesthetic farmers necessary for my components library to work correctly under the developed uproot. It includes a CSS far and do jobs kept fast. Those are necessary for my component to work, so I'll need to reference those from my index in my blazer application. So here at the top will start by bringing into CIA's s for and note a special notation here underscore content slash than the name of the component library, and then the part relative to dub the fruit is used here. This is how Blazer knows where to look for the static fuss. I will do something very similar for the job script fast. They need to go at the bottom of the page so they're do will use this underscore content, then the name of the components library and in the part under dubbed of the Pret Our Aesthetic Final Surrender, we have added a reference, but still my Blazer coat does not know about the map component that's fake, that in the previous demo we added to the import file, Our custom components names pace. Well, we'll do something very similar here. I'm going to bring in the components library and the components live remap name space names basis off my external components library that I'm going to use from my blaze replication by doing this inside of my blazer components. These names bases are now known. So now I'm going to use my map components, and I suggest that we do this in the employee detail component. So when I click on employee, I not only want to see their details, I also want to see the map where that employees lifts, I'm going to reorganize my Y a little bit. I'm going to include a section here that surrounds the entire contents that we had so far. That is again, of course, a blame HTML element now on the employee detail page I'm going to bring in my map component have now brought in some coat that places this def on the same row and inside of it. I have a map component, and at this point, Fisher studio is panicking. It doesn't know about the map component that's normal. I haven't done a built yet, so let me do that first. As soon as the bill has finished, you see that intelligence has recognized the map component, so we can now be sure that my blaze application knows about the map component. The last thing that will no need to bring in his adding these map markers. That is a way for my laser application to pass bones of interests markers do my map, so we'll go back to the employee detail and we'll bring in a list of markers. Student doesn't know about this, so we'll bring in the correct using statement, have a go and then in the own initialized a sink. I'm going to set up my markers. I'm going to use just one marker, which is going to show on a map, the latitude and the longitude off the employees, and I'm also going to pass in the description the first name and the last name. I can't pass multiple markets, but we're fine with just that one. So with that out of the way, we have now been able to pass data from my Blazer application to my external map component in the library. Let's now see if it can visualize the map correctly on the detail Page has go to employees. Click on the detail of Bethany here and there we go. We indeed see the map showing correctly on the right here. So this way Blazer applications can be extended, which functionality they don't know about. But that already exists in JavaScript to JavaScript interrupt, which is pretty simple. As you can see here, I can invoke a JavaScript function in a blazer application, and since it's wrapped in an external component library, we don't even need to know how it works because it's wrapped as a component to be just used in our own plays. Application as mentioned, we are in the demo using a component that comes from an open source project created by Microsoft and reviewed it here. You can find your original source for this component in the link you see here on the slide