Blazor Course - Build an e-Commerce Web App with Clean Architecture | ASP.NET Core Blazor Tutorial

are you a c-sharp developer who dreamed to become a full-stack web developer without writing too much javascript asp.net corp laser is microsoft's newest application framework that allows you to execute c sharp codes in the browsers with helps from existing mature technologies all you need to do is to write beautiful c-sharp codes that you always enjoy doing my name is frank liu i'm senior software developer i will be your instructor in this complete laser course where i will guide you step by step to understand blazer in death this is not just a theoretical course this is also a hands-on course you will actually get your hands dirty and work with me to develop a real world e-commerce web application with clean architecture on both the customer portal and the admin portal we will start with a simplified implementation of part of the application and then slowly we will refactor the code and improve by the end of the course you will know every aspect of blazer in das and you will be able to independently build web applications with asp.net core later you will be able to analyze requirements and design software and you will understand and be able to implement a use case driven and plug-in based clean architecture that is highly testable and extremely flexible for future extensions feel free to take a look at the course description i am excited to take this journey with you and i'll see you in the course the blazer application framework is based on asp.net core platform i think it will help us a lot if we spend just about five minutes understand how a speedometer core works so let's do just that blazer is used to create web applications all web applications process http requests and return http responses users send http requests typically from a browser and corresponding responses contain information that the users requested in asp.net core once the request is routed to the web server the http request is then encapsulated in the http context object after that the context object is passed through one middleware after another each middleware takes different responsibilities in processing the request for example some middleware take care of loading static resources some take care of generating dynamic contents some take care of logging and some others may take care of error handling middleware should be made according to the single responsibility principle when processing the request middleware may write to the http context object for generating the final http response since all the middleware is linked together we call the linked middleware the middleware pipeline web developers are responsible to choose what middleware to use in order to solve their particular problems and they're also responsible for configuring the chosen middleware in asp.net core the web server is actually a console application that runs in an infinite loop while listening to your chosen port for http requests when the console application starts the first thing it needs to do is to configure the middleware pipeline sp9 core instantiate the startup class automatically and calls the configure services method to import the middleware packages and their dependencies and then it automatically cause the configure method for developers to configure the middleware in the middleware pipeline it might be helpful for understanding the purpose of the two methods if you imagine the configure services method contains the import statement in javascript and configure method is where you use those javascript modules but officially the configure services methods where developers do dependency injections in order to plug in the services that the middleware will use for processing the http requests so you may ask as an asp.net core web developer is it true that my job is to create middleware and configure them actually most of the time you work within the framework of a certain set of middleware because in asp.net core above the asp.net core platform there are three different application frameworks mvc reader pages and later each framework uses a set of middleware when creating mbc web applications or web apis you work with model classes razer views and controller methods when creating reasoner pages applications you work with reader view and their corresponding code behind model classes when creating blazer applications you work with later components aka reserve component in the next lecture let's see how blazer application framework works while we are creating our first laser application let's jump into video studio and create our first blazer application so this is future studio 2019 the version i have is virtual studio community edition and this edition is free for anyone to download so i would suggest you to use video studio as well so first go to file menu and create a new project and here type in blazer application right i have already displayed here click on next and then give it a name my first laser app and then click on create so blazer comes with two flavors first display their server app so second is blazer web assembly they are pretty similar although they work differently in this course i'm gonna use later server application when you created a blazer application with blader server app it's not very difficult to convert it to blazer web assembly later or vice versa during this course i'm gonna talk about the differences for now let's choose later server application with the default settings here and click on create okay so let's quickly take a look at what we have in the project we have a program file which if you have done any c sharp application this looks like a console application but this is a little bit confusing we wanted to come create a web application but why it has a main method here which totally looks like a console application okay so the thing is any web application needs to have a web server or i can call it a service blazer is based on asb dyna core and asp.net core is using console application to host asp.net platform and asp.net core platform will in turn host the laser application framework all right that's why we're seeing the main application so when we deploy this blazer application on-prem or on cloud this console application runs as a web server and that web server hosts the asp.net core platform right so this is how we bootstrap laser application the starting point is the main method and the main method creates the web server and the web server calls the run method the run method runs the web server in an infinite loop and listens to the web request to come in and process the request when creating the web server the create host builder method is called and create host builder load the startup project by convention and it has two main method configure services and configure like i said in my previous lecture the configure services is mainly for dependency injections it injects the components that we want to use in asp.net core as well as in blazer and the configure method is to configure the asp.net core middleware pipeline let's take a look so under the configure method we're configuring a field middleware basically anywhere we say use like use exception handler use hts hsts use https redirection use static files all of these are middleware the most important part is here this is where we configure our blazer middleware we're basically saying that map all requests to this host page because laser application framework is a framework for a single page application that's why we're mapping all of the requests to this one single page since the http request is routed to the host file this is entry point of our blazer application you can see that this uses a root component which is the app component and that is at the root folder so let's take a look at the app components which is the component it's basically saying that we are running this assembly right which is the assembly that the program that cs file belongs to and we're using this main layout file as the layout and and this actually set up the router configuration once asp.net core platform runs the http request to the host file the router component takes care of the rest of the routing tasks we will look at the url and raise our request to corresponding laser components that's that we found the location that the user requests then we're displaying the main layout component and we cannot find it we also display the main layout component wasting this information in it sorry there's nothing at this address so let's go inside here and look at what the main layout component looks like that's inside the shared folder right the main layout component actually uses a nav menu component and a body placeholder and this body placeholder is the key here that all of our pages and components will go inside the body placeholder and we can see we have all these four pages here under the page folder they're all blazer components and there they will be all displayed under the body case holder let's run our application with control f5 and let's see what happens okay so this is the default application that inside the blazer template in visual studio which gives us a sample application it not only has the hollow world application but also has its calendar page and this fetch data page that actually has some functionality here so this counter page basically when you click on click me it increases the current column the fetch data retrieves data and display it in a grid all our future component or pages will go in will be displayed in here so we can actually change the layout right we can even remove the navigation menu and use whatever components or whatever html here but i want to emphasize that our future components will be displayed in the body placeholder the whole point of creating a web application with a application framework like blazer is to create dynamic content so let's go ahead and create our first dynamic page so if i go to pages folder right click on it and click on add and click on new item and click on reader component don't select the reader page because reader page is a completely different application framework within asp.net core and let's name this as dynamic component of course all the component can be dynamic component but let's just name it as dynamic component click on add in order for a component to be rotted by using the water component defined in the app component right here we have to put a page directive which is add page and then we can say dai and that's it so when we run this i'm doing control i five if we put slash dynamic which is the page directive rotting pass that we put just now going hit enter you see this dynamic component title is displayed which is right here right so to prove this you can say our first dynamic component and then we go over here and refresh the page and we can see this now what we want to do is that we want to go to we want to display a menu item right over here for that we want to go to our main layout and then we see that the menu item is on the left hand side right sidebar and we go to our nav menu component we can see all of the links right here in order to display that dynamic page that we just created we can just copy this this is the path that we put in for the page directive so here we want to put that whatever pass that we give our page and then this is the name of that we're going to say dynamic page and now if we refresh our page we can see that the dynamic page is right here so we can navigate to other page and then navigate back we can see our dynamic page so if we go back to our nav menu component right here which is the sidebar here we can see this is what we did we use we use this nav link component which is a pre-built component in blazer and we use this component to navigate to our dynamic page so this is something we also need to remember is that whenever in our blazer application we want to navigate to somewhere on the page you can use the nav link component next we want to add some dynamic contents on our dynamic page because our dynamic page is actually current very much static so what i want to do is i want to add two buttons according to which button you just clicked on we want to display different contents on the page right here i want to add two line breaks and then i want to add the buttons so one button and then the button says laser server and then i have another button it says laser web assembly so these are two elements that we're going to use next i want to just i want to declare two variables one is for the title that we want to display the other is the content that we want to display how we want to display it is that after to another to line breaks i want to display the title right here i want to use header h3 and the way i display it is to use reader syntax so we put f sign here and put title uh this is actually c sharp code okay everything that has add sign means it's a c sharp code and this is reader syntax so after this i'll display another line break and then here i want to display a diff and inside the div i want to also display the content so how do we do that you guess right use add content and then we are going to handle event handlers in here and event handlers we don't want to just play just use on click because this is going to be javascript so in order to use later it has to be at on click and here we can handle laser server click over here again that unclick i'm going to say hando laser what sm lead click and then the squiggly line is complaining about the method is actually missing so we're going to just we're going to declare a method right over here and then you will see that right after that the the frequency line is disappearing right and just disappeared so over here we're going to copy this name and put it over here and pause the scripted line will disappear right it disappeared so here because we are clicking on the s play the server button we want to assign the title we'll call it laser server and then content and the content is this and for handling the blazer web assembly button click i'm just going to paste that over here so basically uh the content is just saying what later server is and what play the web assembly is and i actually encourage you guys to read what i wrote here now we click on the save button and we go to the we'll go to the page and click on the refresh button remember if you do control f5 you actually can do hot reload you just refresh and you don't have to recompile right now because i did not click on any of the buttons so you don't see anything here right because the title and the content the two variables are empty having empty strings so as soon as i click on play the server you can see play the server and then what it is and if you click on player web assembly it's gonna change the value of those two variables again i encourage you guys to read what i wrote to understand the differences between the two different flavor of blazer but what i'm trying to demonstrate here is actually what i call the triology of displaying dynamic content on the ui which i'm going to talk about in the next lecture in a component of any type of single page applications you have three different things we have view here and the view is what the user see and we have the state here which holds the data that needs to be displayed in the view and we have events here this is when user interact with the view and generates the events the events are handled and the states get updated when the states get updated the view of song gets updated because the view displays the data inside the state so this is what i call the triology of the component development in single page applications our laser application is a single page application so in this lesson we are going to learn about the three different parts of component development so let's look at our page component that we just created so we have our view right here these html markup represent the view of the component and these two variables they represent the state of the component and then these are event handlers okay they're handling different kinds of events we're displaying the data from the state these two state variables displaying them and the event handlers mutate the states and once the states are mutated it laser application framework automatically update the view that's why you will see the the page gets updated when we click on different buttons so these are the three main aspects of component development in blazer and all of our front-end development is around these three aspects this is the end of section one we have covered some basic but very important topics about laser application development in the next section we're going to start implementing our first application i'll see you the next section we have a lot of topics to cover for blazer applications in order to fast track or learning process i wanted to start developing a small part of our application we are creating a e-commerce website any e-commerce website should allow our users to browse our product catalogs in this first part of our application we want the user to be able to search our products in our product product catalog page and be able to see the details of the products that the users are interested in so we need to have two pages one is the product catalog page that allows users to search the products and the other one is the product detail page to display the details of the product so let's get started with that requirement is very clear so let's actually start with a mock-up so the first page is actually a product catalog search page so we have a page here and then we have a title here below the title we're gonna have our search box and beside the search box we have our search button and on the button we're going to say search and below we're going to have a list of products one thing i want to emphasize for blazer applications and this is actually true for all other single page applications is that all the three main aspects that we have talked about the state the view and events are in the same file unlike some other frameworks like model view controllers mvc framework you have all those three things in three different places the models hold the state and the view represents the view and the controller handles those events so those three things are in three separate places it will help you to enforce the separation of concerns here in different time frameworks including laser you have all three things in the same file so you're gonna see the file becomes very big very quickly very messy and that's one of the reasons main reasons to have component as small as possible that's why we need to break this screen down into different components on the top we're gonna have a search component and here is our product item component at least we're gonna have two components on the screen let's go to visual studio and start our development for this course i'll loosely follow the clean architecture and in clean architecture we have two type of business logic one is application business logic the other is the domain business logic and in application business logic everything starts with use cases for our search product page we have search product and view product to use cases and then in the view product page we'll currently only have navigate back to search page because the user will just on that page and look at the details of that product so far we don't want to add any complicated business logic on this view product page the only thing the user can do is to navigate back to the search page so we have two pages and three use cases there is no domain business logic the data will just flow from the data source to the data repository objects and then flow into our application business logic objects let me clarify what i mean by data repository a repository class is where i encapsulate all of the data access codes so that i don't have to write those codes in the application logic layer basically follows the facade pattern to hide the details of data access so far we're not touching later yet because in clean architecture later will belong to the ui layer when we develop any applications no matter what type of applications it's better to encapsulate the application business logic and domain business logic in a separate layer than the ui so that we can we can have a nice separation of concerns in this first two pages that we're gonna we're gonna develop we don't have any domain business logic so let's get started implementing the three different use cases under our application business logic layer although we don't have any query business rules we do have to implement the core business models right in this case we're dealing with products so we have to create that so let's go ahead and create that let's reuse the application that we created last time and we click on this and click on new add new product and we're going to use this first one the class library was done extender because we started standard you can use it anywhere and let's click on next and this let's call it eshop so our application name and uh let's call a core business like i said i'm loosely following the clean architecture and i don't want to use uh like domain business because for anyone who does not know clean architecture very well they may not know what domain business is so with core business people will immediately understand that the core business business class library contains those core business logic and i just want to give you a very brief overview of what core business logic is a coordinates logic exists with or without the existence of the application right so it's those business people who follows the business coordinates and rules to carry out the business every day they can use pen and paper they can use phone calls they do not have to rely on any of the newer technology let alone uh application and credit with computers right so the query business rules exist for the businesses they don't actually depend on the applications right whether without existence application department's rules are of course going to be core business rules so we're going to create this layer to encapsulate that part of the business in this case for our search product catalog application actually we don't have any core business rules right here all we have are search and view and they all belong to the application business logic right the application business logic are business logic that exists because of the application right so because of the existing application you are able to to search uh and you are able to view so so now let's define the core businesses created for business class library that contains there's no business logic but there is the domain model which is the product so let's delete this class default class and let's create two folders one is the models the other is the services folder so the models contains the domain models and the services folder for now will be empty because we don't have any core business logic we will have our product class and i have it in my clipboard and right over here the product will have id brand name brand name price and image link so we have this and the next we're gonna implement the use cases okay we have just implemented our product model in our core business layer although we don't have any business logic yet the reason why we implemented the product model first is because our use cases depend on the models so let's go ahead and create another library to encapsulate the use cases again we're going to use the class library.standard we're going to call it eshop.use cases i don't want to call it application layer because application is from the clean architecture but use case is also from clean architecture but use case is more intuitive it's more client-facing everybody that knows business knows about use cases whereas application is less intuitive than use cases so this is the application business logic layer that encapsulate all of the business logic that exists because of the application let's actually delete this as well we have two screens let's call it search product screen because yeah i want to call it screen because these use cases can be used by any type of project or applications though this is a web application but these use cases can be used by like a mobile application or a watch or any type of iot devices so let's call it search product screen and then we have another one which is going to be a view product screen under the search product screen we have two use cases i want to use one class for each use case so that when we open the folder we immediately know how many use cases we're dealing with and this is also very good for unit testing although we're not going to do unit testing in this course in this course i want to i don't wanna introduce any other frameworks or patterns typically i would use the mediator package from jb bulgar but in this course i just wanna use a very straightforward to represent the use cases so that we can focus more on so that i can focus on what i want to teach instead of spending too much time on introducing other frameworks so the search product use case will have just one method which is going to be the execute and it will return a list of product for searching we're going to have a filter and for now we're returning now so that we know it's not implemented we're going to add a dependency to the query business project making sure that the dependency is pointing to the right direction our use cases points to the quarter business we add that we come over here and press on control dot and we import the namespaces and that resolves our dependency problems here from the view product actually let's copy uh from the search product because they all have the same method which is the execute method just return different things in this case it's returning just the product because we want to see the product detail we do ctrl dot and enter and let's resolve the dependency problem too now we have these two methods to use cases how do we implement these two methods the data actually comes from the data store wherever the data store is so next let's think about how we're going to implement the data store the most tricky part of understanding the clean architecture is to understand the data stores in my own opinion whether it's a database or file system or any any other io devices it's easier to understand the dependency direction if you think the use cases layer or the application layer is the core and the io devices or data store is a plugin order in order for the data store layer to plug into the use cases we need to define interfaces inside the use cases layer which serves as an abstraction let's go ahead and create another folder and let's call it plugin interfaces now we are going to create another subfolder and within here we're going to call it datastore we are going to create a bunch of interfaces to represent the abstraction okay we're going to create our first interface for our data store let's call it product repository we're not going to implement the generic repository pattern because that's not necessary i just want to have a very straightforward implementation so let's change this to public what we are going to have inside here is search product and we are going to have get product we are going to have an enumeration of product and let's call it get product and within here we're going to have a filter and ctrl dot to use the model and the other one is just the get product without filter but with a id we are now going to implement the interfaces within the use cases we're going to do that within the plug-in layer so once we have the interfaces here an interface represents the abstraction we can go ahead and implement the use cases with the help of dependency injection and for that i'll come over here and create our dependency injection to inject the datastore plugin into our use cases although we haven't implemented the datastore plugin yet but that does not matter and that's the advantage of having a plugin based architecture i assume you know about dependency injection at this moment but but don't worry if you don't i have a full section to talk about dependency injection later in the course so we use constructor dependence injection and right here within the execute method we can use product repository and we call the gut products to return the emulation of products because we don't have any core business logic here so we go straight from data store to user cases and then passing through the use cases to the ui now we go to our view product use case and we're going to do our dependency injection right here so that we can use the abstraction of our data store we initialize the private field then we can use the private field to get the particular product and here we need to change the parameter so that it passing the id and then we feed the id to the gut product method it returns the particular product based on the id so at this point without implementing the data store itself with the help of the abstraction within the interfaces we are already able to do our testing this is the use case is already implemented although in this course i'm not doing any unit testing maybe in future courses but i want you to understand that because of the cleaning architecture and the plugin based architecture we are able to test it and it's highly testable and when we're doing our testing we can mock our data repository by implementing a mock repository and that is the power of this plug-in based clean architecture so that our core business logic which is the core business logic layer and the application business logic layer they don't actually depend on the data store now let's go ahead and implement our data store it is very important to understand that database or data stores are i o devices any io devices should be implemented as plugins i want to add a description field here i forgot to add that so we go to our eshop core business and go to under models folder so we add the description to the product model once we've done that we need to implement a implementation of the plugin datastore plugin interface which is the i product repository that has two methods we are going to copy this into our clipboard and then we go ahead and click uh go ahead and add a new project and that's again is going to be done at standard plus library click on next and then i'm going to say e shop dot data store and for this exercise i'm going to provide hard-coded data so i'm going to just say hard coded ankle bob said a good architecture is a architecture that allows you to delay making decisions so instead of implementing a real data store of any kind let's make a hard-coded data store and then later we are going to implement a real data store that pulling data from a database or some kind of web service so for now let's implement a hard-coded data store where we are going to delete this right and then change this because we we have the interface in our clipboard i just pasted it over here and then it's going to change this and we are going to add a dependency project depend project reference and i'm going to reference the use cases class library because it contains the plugin interface so i click on that and then go over here to control dot and then hit enter to import the using namespace and over here i'm going to implement this and also implementing this as well and i added a optional parameter just so that if the filter is now or empty then you know we can we don't have to filter the the product so this one should implement the eye product repository repository interface and then we are also doing control dot to implement to import the interfaces namespace let's change this class name the file name to also product repository and import the generic collection namespace as well and now what we need to do is that we need to have we need to initialize the data so because we're going to hard code it so i'm going to initialize the data in the constructor so i did the ctor tab tab so i have this product repository constructor and i am going to declare a private variable called product and it's going to be a list of product i'm going to initialize this over here and i have it in my clipboard and you will have it in the github repository so i have all these products where i found the data somewhere online and i'm going to provide that link to the json file that i found online as well it's complaining that it does not implement the interface so let's go ahead and delete this and then control i'm going to say implement interface right now it stopped complaining i think there's something wrong with intelligence okay so here we are going to get the product by id where we're just going to say products dot first or default i'm going to use link and then let's say x dot id equals id all right so i'm going to return this this one over here again we're going to use we're going to use id so we're going to say products.where x dot name so this one is a little bit we need to add some conditions so if string is null or empty or west space so if the filter has nothing in it we're just going to return the product otherwise we are going to say in order to make it case insensitive i'm going to do two lower and contains filter to lower as well so that's our implementation with the hard-coded data so now that we have our query business use cases and data store layers implemented let's go ahead and actually test the implementation all right so we need to connect our laser application with the use cases when we want to connect that we have a dependency from our laser application to the class in the use cases and the way to implement that dependency injection is to go to startup.cs file and in the configuration configuration services method we need to add our dependencies you see we need to use the classes in the use cases but our use cases they don't have interfaces for dependency injection we need to implement interfaces so let's actually implement interfaces for each one of these use cases okay i created these two interfaces now we can add the dependencies and if we look at our search search product we can see that number structure we also added the dependency to the datastore plugin interface so this datastore plugin faces also needs to be registered in our dependency injection place so let's go to the startup.cs and then let's add our dependencies here so we can add them as transient which means that every time you require the class it's going to be created right so a new instance will be created every time so we rely on the product okay so before we do that actually we need to add the dependencies okay so you can go to add product dependencies actually we need to add all of them i'm going to say product repository and the implementation of this is product repository right and then that's it basically what it does is that whenever we need to have implementation in this interface it's going to create an instance of this class and the same thing is going to be done to to the use cases where we have you know search product right the search product use case and then we also have our view product use case all right so now that we've done that let's go to go ahead and create a new page and let's call it search product new item a razer component and let's call this a search product and this is going to be a page component means that you need to rot to this component and this component is going to be used as a page so we're going to say add page and then say slash product remember that a component has three parts right the view the state and the events let's quickly test our use case class libraries by overriding a one of the lifecycle event which is override only initialize so provide this then they will stop complaining and now what we need to do is to inject our use case inside here so i'm going to say inject let's say i search product and then you can see that it's actually pulling all of the namespace here right so in order to do it without namespace we can go to imports in blazer this is where we import all of the namespace and once we import here we can use the any components within the project we don't have to specifically import the namespace so as you can see the script line is gone so here we can say search product and and then we can get over here and say search product dot cute and then we can provide a filter but in this case i'm to provide nothing and i'm going to return a list of products and what i'm going to do is i'm going to run this run this project right now and set a breakpoint here i need to make sure that everything is returned all right there's no compilation errors just manually type in the url and then hit enter so let's go to our breakpoint and let's see whether we want to press on f10 whether there's any error there's no errors and let's check our products we have 20 products so and that's exactly what we are expecting right so it's working now that we know our use cases are working the data is properly returned and the data store plug-in is also working now let's go ahead and implement our search products component like i mentioned before we have three different parts within our blader component we have view we have state and we have event let's go ahead and implement a very simple view to see our data so we are going to have a ordered list an order list we need to have a list of items for that we need to loop through all of the products let's actually first implement our state we're going to have a list of products and products we can import the namespace here and we save it and go back and here the search product use case return the list of products within the uninitialized method this is a lifecycle event so we have our event and we have our state and we just need to go ahead and put in our view on the top so first let's implement a simple view just to test our component so let's have a an ordered list and we need to have a list of list items in here and for that we're going to use razer syntax any c sharp code we'll start with the add sign so in c sharp we have four each so we can use for each here and we're gonna do for each product within the list of products and within the loop we need to output the list items and let's output the name of the product and again we need to use add sign here and let's go ahead and test that and let's do control i5 without debugging and we go to our products page by the url and we see a list of products and now let's add the search product page into the navigation menu so that we don't have to manually type in the url so let's go to our shared folder and then go to navigation menu and in here we are going to reuse this dynamic page the path here is going to be products because if we go back to our product component we can see the page rotting here is product so that's why we use products here and it corresponds to the rotting pass on the component so we change to search products and here we're going to remove the component from the title and now let's continue implementing our view let's add a line break here and here we're going to have our search box we are going to have a layout just like this we have a div and within here we say search and we're going to have an input element the type will be text and then after that we're gonna have a button and text will be search and let's take a look at the look and view doesn't have any functionality yet let's refresh the page and see the result okay that doesn't look too bad let's add a line break so actually remember at the beginning we're saying that we're going to have a separate component for the search box so let's go ahead and do that in the next lesson now let's extract the search bar to a different component and again the reason why we want to do this is because we have all three things the view the state and the events all within the same file comparing with something like mvc that all three things are separate this is gonna get messy very quickly so we need to break down a page into different reusable components as small as possible so let's go ahead and implement this search box so who knows that in the future if we need to search something else then we can reuse this search bar let's go to our solution folder and see you have pages so since we have pages let's use controls as a terminology so we have controls which contains the reusable components right over here we're going to create our new razer component and let's call it search bar and it's going to have no title and we can copy this into our search bar component as the view and what we need to implement is the event because when the user clicks on the search button we need to filter product catalog for that we need to do assign again this is going to be c sharp code so that's why we use assign so assign unclick and then we're going to say search actually we're going to say handle search right and then we go to our code block where we write our c sharp logic c sharp code here so in here we're going to say it's going to be a private function so we use private white handle search so we have this event also we need the data come from the input box so for that we also need to implement the state which is going to be a string and we are going to say filter right so how do we bind this filter to the input box and this is where the data binding comes into play here it's actually pretty easy we're going to do at and then we're going to say bind value and we can put filter directly in here we don't have to say add sign anymore because we already have that sign here right so in order to test the data binding what we can do is below here we're going to put our filter directly into view so and then let's without doing any implement any functionality let's use this component so in order to use component we also need to import namespace because this is under the controls folder so we need to go to our imports and we need to import the using my first blazer app dot controls so that's good enough and let's go back to our search product component where we can here we can just say you know search bar component that's it and let's refresh our screen and see whether everything works all right so we still have the search bar right and because we implemented the data binding here and we also put the filter directly on the search bar let's see if we type what happens so nothing happens right so what if we step what if we tap out now we can see right so it's automatically bound to the filter so it's automatically bound to the footer and that's good and you also notice if you put in you know some other things here and then click on the search button you automatically receive the filter as well so that's good enough and let's go ahead and go back to the search bar component and implement the rest of the logic so what happens is that when user click on the search button this handle search event handler is called but this actually needs to be passed to the parent component which is the search products component because search product component needs to use this action to trigger the filtering so when the user click on the search button the handle search event handler is called and at that moment we need to pass the filter to the parent component which is the search product component because the search products component need to know what the filter is so that it can use that to filter the product catalog so in order to do that we need to declare a public property here it's not just any public property it's a it's something called event call back and the event callback has a generic type and this generic type specifies the type of variable that you need to pass to the parent component so event callback is a way to pass information from a child component to the parent component right because our search bar component is a child component that is used inside the parent component which is the search products component right when we want to pass information from our child component from the search bar component to the search products component this is where we want to use event callback and the type of information that we need to pass is it's going to be a string because we want to pass the filter here we can say on search and and this has to be a parameter when we say parameter here then we can use it right over in the parent component we can use it as a kind of attribute of this element right you can see you can see that on searches right here so here then what you need to do is to specify a method that handles this so we can say handle search right and then go down here we can say private void handle search but it needs to accept a parameter with the same type that we declared over here so it's a string so it needs to be a string here and what's passed in is actually the filter then we go back to our search bar component and we want to invoke this and event callback parameter is is different from a delegate in c sharp so it's different because we don't need to check whether it's null or not we can just call it directly so we can just invoke it right and we can pass in the uh the filter directly because the filter is already bound to the input and that's good enough and let's give it a test by putting a breakpoint right over here and then let's run the application okay let's click on search product and going over here and then we're putting something like it and click on search now it's triggered and if we hover our mouse over here we can see fit so our search bar component is working next let's re-implement this products list so instead of using a simple and ordered list let's go ahead and use a table so let's use table and then we're gonna have and if we go to our core business and look at our model we have brand name name press and image link so we are not going to display the image in the in the table we're not going to display the description but we're going to display brand name and price okay so we are going to go over here and b hat and then we're going to say tr and i'm going to say th so what we have what we need is a name and brand price and then over here we'll have tea body and for that we also will need a list of tr instead of putting the tr right in here and do the loop here we want to extract this also as a component and the reason the same right we need to make the component as small as possible because the reason why we want to implement this as a component is later when we want to implement like edit or delete those functionalities those functionalities don't need to show up in this parent component right so let's go ahead and add another control call it product item component again we don't need the title and right here we need to have a tr because this product item component actually we can do this right now instead of having anything else we're gonna loop through it's the same thing as the list we're gonna loop through the product right in products and what we need to do is we need to use the product item component inside here we need to provide the current product to it so let's go go back to the product item component and let's implement it so it's going to be a tr in the view and then we're going to have three different tds right but before but what is the what is going to be the state first of all we need to implement the state and that's not going to be a private it's gonna be a public property and uh it's going to be a product let's just call it product okay and this is not enough if we have this we go back let's see so inside here we cannot see the attribute right there's no product attribute so in order to pass the information we have to declare this as a parameter use uh use attribute the parameter attribute declares this product property as a parameter so then we can use the parameter to pass in the current product once we have that we go back over here so and now we have the data we are going to display the data over side here and we're going to use resource syntax so we have product dot name and we can do two string and we're gonna do currency so there's a possibility that the product can be no right and with that it's gonna throw exception it's gonna throw the null reference exception here so to avoid that we need to again use resource syntax i'm going to say if this.product is not now then we display this in the view and let's go back we have this already here we are going to also add a condition we're going to say if product is our state if product is not now we are displaying a list of product atom component otherwise we're gonna display a message and for that we need to have a tr and a td with column span three and we're going to say cannot find product and let's see whether this works or not because we're not filtering and he's still explaining the abc here next let's go ahead and implement the the actual filtering okay let's go ahead and implement the filtering functionality so let's go back to our search product component when we receive the handle search so this handle search is triggered when search button is clicked it's triggered by the event callback so let's implement this so we already have the search product service here right so let's do search product and then we have the execute method and actually messer actually can accept a filter right away okay so now we can just and that should just work and let's see what happens and let's refresh the page so remember the filter is on the name so let's see we have hope onto fit right so let's do fit and click on the search button all right it's working and we have no bronzer and then we have browser okay the filtering is working let's remove this thing where we tested the data binding right so let's go to our search bar component and remove this from here and we also need to test that what if we put in something that doesn't exist right so name product press okay so it's it's not displaying our message so let's fix that the reason why that's not display it's because we go to our search product component the reason why it's not displayed is because the product is it's not now it's actually an empty list right so we also need to check the count has to be greater than zero and let's see if we refresh our page what happened okay page loaded let's put in something that doesn't exist still no display so what is it complaining okay let's go back and refresh the page test again i cannot find products all right so we implemented our filtering functionality so before we go ahead and implement the view product page let's implement some style so that our search product page looks better so we have this search bar we want to style this first and we have our bootstrap already included in the default template let's take a look at the bootstrap documentation so in here we just type in bootstrap i'll go to bootstrap website and click on documentation here's the version and we go to the latest and we are going to look at uh because our page you know we have an input box we have search button it's a type of form go to component go to forms then we'll see things like you know we have input box and then buttons right so we need to find something some example that has horizontal layout right things like this and then with the button so this is a very good example so let's copy let's actually copy this and then go to our code and we just uh put it over here and we don't need this email thing here so we only need this but it's not going to be right only whatever here so we're going to remove this and this is going to be search right and we're going to put a space here this is not going to be password this is going to be our text actually let's copy this over here we will have this control and let's also give it a id and let's call it filter and this is gonna be full corresponds to the filter input and we'll have no placeholder this button will change this text to search actually yeah okay then we have on click handle search so that's it let's remove this i don't want this button to be a submit button so just put the nicer button let's go ahead and refresh our page and see if that works all right so next let's style the table again let's go to here and let's see so that should be under content and we have tables yes we have tables so let's just use table let's go to our search product page here we just say class equals table and let's refresh all right very good so it looks much better and if we uh put in something we're filtering it and if we put in something doesn't exist then yeah looks much better now let's implement our view product page for that we need to create another page component under the pages folder again we're going to choose the reader component and let's say view product all right so we have our view product component created and let's change the name to be product details because this is a page component so the first thing we need to do is to provide a pause and that's going to be product we will navigate to the pass providing an id right so it's going to be like this so this basically says that if the url measures this pattern product slash and id then we are going to display this use this component and we can provide a constraint we're saying that the id has to be a integer and in order to get the id all we need to do is to provide a property here and with the same type integer and then we can call it id it's not case sensitive and also we also need to have to decorate it with the parameter and so this is what we call a rod parameter it means that the value of the parameter passing from url when the user navigate to this page with id this id will be available from this parameter okay so now let's implement the state which holds the actual product what we need to do is that there is a let's override another see this on parameter set this is a one of the life cycle event in blizzard component this is called when the parameter is changed right or when the user navigates to this page then this parameter is given a value and when this parameter is given a value this on parameter set is called so this is a perfect place where we are sure that the parameter will have a value so this is the place we can call our use case layer to get the corresponding product let's inject our view product service and then here we can say view product execute and we need to provide the id just to be safe we can say if id greater than zero then product equals this is good enough so we have the state and we have event right and now we need to handle the when you implement the view and for that i have a something in my clipboard so i'm just going to copy and paste that it's a very simple without styling so we are going to display our image so instead of we're going to change all of them to lowercase product we have our image displayed here and then we have the name of the product we're displaying the brand and we're displaying the price and we're displaying the description and then we're gonna go back to our product item component and this is where the item of the component gets repeated repeatedly displayed in the search product component and what we want is that we want to click on the name of the component and navigate to the product detail component right the view product component and remember that i mentioned that in order to navigate we have navigation link component let's go ahead and go to our product item component then wrap this name around with the navigation link component so if we go back to the navigation menu we can see that we want to display in here and then the href for href we need to specify the path of that component in here previous href and then the password that component which is going to be the view product so it's going to be product slash the id right so that's going to be known product here we need to use actually a resource syntax to to get this string and for that we're going to do assign and then parenthesis so within here we can write expression and that's going to be select this i'm going to say product slash and within the interpolation we can write the id of the product okay so yeah it's going to be id so we don't have to write the add sign here okay let's refresh pages loaded as you can see the name under the the name is displayed as a link and you can see when we hover the mouse over the link at the bottom left corner we can see the link is uh it's correctly rendered right so let's see let's take a look at the second product and we have a product image displayed and we have the name having that brand the pricing and the description information which is really good and we go back and look at the second play looking at this one again all of the information is displayed and let's style it a little bit so that looks uh much better okay let's again go to our documentation for bootstrap and let's see whether we can find a container so again go under components and let's find a container that we can use and i think card could be a good one so if you read the description on a card provide a flexible and accessible con content container with multiple variants and options so let's see so we have card title here okay we have subtitles so that's pretty good so we can use subtitle for the and then we have the description here right that's actually pretty good so this card text so let's actually copy this go to our component go to the view product component to product name here and then we're going to have our brand as the subtitle and the description go right here and we have our links we don't uh i want to have a separators right here so display a separator and then we say price the price right here let's actually use a label and let's use inline style here to make it red actually let's use uh dark red okay after that so the price should go below and then we have our image so let's see how it looks like if we put this image just about the name and it doesn't look good we can fix that okay that's not too bad i want it to be a little bit wider so let's go ahead and fix this to be 28. wait cool so let's go to our search component and try something else okay so last thing we need to implement is to allow user to click a button to go back to the search product page and for that we don't have a use case for that because it's a pure ui we can just implement a simple link in the view product component we can just implement that right below this so we're going to have a navigation link product back to products all right so so we can see the back two products here and that's works that works pretty well now let's test our filtering functionality still works and go here and back to products so we're adding a line break here refresh okay this is the end of section two we have implemented our search product page and we implement the filtering everything works perfectly and we implemented product details page as well we're able to navigate back to the search product page so we have covered a little bit about how to work with blazer components in the next section we're gonna go to each feature of our blazer component aka razer component and we're gonna cover each feature in desk so i'll see you in the next section

Channel: Frank Liu

Views: 36,270

Rating: 4.9205775 out of 5

Keywords: architecture, blazor, blazor webassembly, blazor server side, blazor tutorial, asp.net core blazor, blazor architecture, blazor c#, clean architecture, get started with asp.net core blazor, blazor course, blazor webassembly tutorial, prerendering blazor wasm application with .net 5, call rest api in blazor with entity framework core, should i learn blazor, build todo app blazor, blazor server, learn blazor c#, blazor components, learn blazor, e-commerce

Id: C8xIE_3I7JQ

Length: 77min 18sec (4638 seconds)

Published: Sun Oct 11 2020