Partial views and view components in NET Core MVC

all right this is the video about passion abuse and view components in the net core MVC so first of all I have a problem so I have parts of the view it's a fairly complex code and I want to use it in several different places in the same view on different routes and I don't want to have to copy the code in these places okay and then the second problem I do not want to have to use Razer code too much okay let's take a look at the first problem first now we're going to use something called a partial View the partial view is just a view really but it's not supposed to be rendered independently supposed to be included in some other View if the the names of the past review usually starts with an underscore that's a convention okay so let's let me show you my problem first so I have an MC application here I have a car model it has an ID name model and age and has a list of properties that you can you can add properties it's simple Constructor okay so what I want to show in my in several places in my application is I want to do some fairly complex logic here like I want to Loop through all my promises and if I find this this one's CIA property I'm going to say that this is a secret and if it's secret I'm just going to print out the name of the model um the name of the name of the car guitar is a model here I'm just going to print out the name and then no further information available but if it's not a single car I'm just going to print out the model and the H also so and I don't want to have to do this all over the place so what I've done is put this into what is called a partial View you can see by the underscore show car info mm-hmm now I could show this independently but that would not make much sense but what I am doing is I want to include it in my index View which has as a Model A list of cars so what I do is I look through my list of cars for each of them are into this View using I I use an HTML helper called partial async and a name The View and I send along the model for The View and then I use a weight or I could use this but this that's a that's uh and and asynchronous call but the uh with Microsoft says they're going to to remove this in the end it's uh it's not deprecated but it should be different it's going to disappear at some point so don't juice it anymore hmm so so this is an easy way to have the code from here included in your page and if I had index 2 page I could also do it use it there or you could use it further down this page Maybe showing the first car only are the the car maybe the car that someone clicked on right it could be used many places this is one line think of this as a method call I call the method here and this is the method right okay so this is a way to structure your program it has the usual benefits one this one becomes easier to to understand because I isolated this difficult code to somewhere else and the second Advantage is I can use this several places without having to copy it right that's how you the usual properties of the methods are and it's the same here structural replication Okay so so much for uh partial views let's see what I wrote here so so you use html.partial async like this or this is something called a partial tag helmet but to my knowledge a partial tackle is not going to be able to pass on a model to the view I I may be mistaken but I think I haven't been able to find how to do it at least so that's fine this is very easy you can easily use this but it has it has one problem you know sometimes when I make codes if I write something wrong misspell something or something the code is going to puke all over me now in this specific case it's not the code that's going to puke over me this is this is so ugly yeah I've got a cube all over the code this is horrible or on that she really like if you really enjoy racer code this is great right all the ampersands but if you don't like that then this is this is bad for you hmm so I would like to be able to replace at least some of the this logic with regular C sharp code okay that's where view components enter and if you notice that's the second part of my problems I do not want to have to use racer code extensively right now I'm using it too much to my taste at least that's why we have new components so what happens in view components is you split the passive use into one that is view code and one that handles complicated logic pretty much the same as a use the usual View your usual View is a split into The View and the controller code right in the control acute you add you put complicated logic and in the view you put specific View logic and you don't write too much razor code so that's what you want to achieve with you components so [Music] um yeah so yeah The View part and the rest of the view component now let's see how this works yeah so how how do you do you create a view component missing a w there I can see so you add a class that either extends you commanded or has the view component attribute or has a name that ends a new component okay and then you add a method to it called invoke or invoke async and then you add a view that has this that has to have a very specific naming it has to be positioned under the controller name or possibly shared if you want to share this component review or more than One controller and then the full name another folder software called components and then the name of the view component this is completely un understandable if you look at it so let's see how I did this so I made a class called show car info with you here so see it extends new components which was one of the ways you could you could make a new component okay it's just a regular class I put it under components I think it doesn't have to be there but it's more or less a convention to put there and I made the method the invoke method so the invoke method takes a car as a parameter but that's you're free to decide what to do so what this is going to do is it's going to generate the three lines not two or three lines that I want to use if you've recalled this um it generated three lines or two lines so it goes through all the all the same logic looks through the provinces checks if the CIA property is there and if it's secret then it adds those two lines otherwise it has those three lines two list and then I call The View with that information now it could be something more complicated sending to the view it's not really important but uh the point is that that this logic here and this logic here is written in C sharp now we like that better some of us at least now I need to send this to my view and the rendering ending is saying this is a view component I call the invoke method and it returns I need to return the view now it looks for The View in those in those locations I described to I think there might actually be more locations but these are the usual to so it looks in the views and name of controller components The View component name and let's see the views the controller name is home components and The View component name show car info with you those has to match okay and then the name of the view itself is default that's chhcs HTML now I don't know why they decided on this naming convention but that's how this you can change some of these I think you can change the name of The View but uh I think this is this is how you this is the East just follow this naming convention and you'll be home safe so what's in this View okay it just takes the list of strings and displays it right so file is raise the code far more decent code so that's that's the main point of the view component you want to have this uh Duality between the c-sharp code and the racer code same thing you have with the controller see here's a controller and I have the uh the index action and it returns a view and as a model it calls get cars which somehow gets a list of cars what do I do get it from the database and it adds the CIA property to the Suzuki so Suzuki is a secret car whereas the Ford is not uh that's because of the Suzuki being a far more advanced card than Ford I guess well maybe not what do I know anyway this could be a more more complex it could fit something from the database and send to the Views pass to The View and um inside the view we we don't we just receive this we do we don't in here we don't decide on how to how to deal with data without where should I get data from now the controller is where you want to to keep those kind of conflict complex things so if you should be as dumb as possible um so the loop just receives a list of cars and if you want to use the partial View I can do this meaning I have to put the complex logic here inside the partial view in razor code or I could go down here and I could just use my view components right so the way I call the view component is I type component.invoke async and the view name and send it on the model also see this one corresponds to this method here so let's pretty much the point so agreed this is your part of the view component and you create the view part of the U component put it in the right folder and add the invoke method to the view component class and then where you want to show it in The View you say component.invoke async and the viewing right so the point of the view component is if you have heavy or heavier logic you don't want to code in race or alone create a view component okay thanks that's about it

Channel: Klaus Bøgestrand

Views: 594

Keywords:

Id: hnlcVS6pGd8

Length: 15min 45sec (945 seconds)

Published: Fri Jul 07 2023