Partial views in asp net core

they say is part 23 of Razer pages tutorial in this video we'll discuss partial views in asp.net core let's understand them with an example at the moment this is how our employees list page looks and here's the code for that page so notice we have the code that loops through each employee we have in the model and we also have the code that displays the employee named employee photo and then the three action buttons view edit and delete let me see in the footer right here and if we take a look at the delete razor page we only have a confirmation here and what we want to do is modify our delete razor page so it looks like this the only change we want here is include this panel that displays employee name and photo just like how we have it on this employees list page so we want to encapsulate the code that displays the employee name photo and these three action buttons into a partial view and then use that partial view both on this index razor page as well as on this delete razor page if you're wondering why we have to do this well partial views enable code reuse they encapsulate c-sharp and HTML code that we want to reuse on multiple razor pages our views we look at this in action in jest of it the first question that comes to our mind is where should we place our partial view within our project if we place it in a specific folder like this employees folder then that partial view can only be used by the razor pages and views in this specific employees folder if we want it to be used by the razor pages and views in other folders then place it in the shared folder I'm going to place it in the shared folder we are using this partial view to encapsulate code that displays employee details so let's name it underscore display employee partial a partial view file name usually begins with an underscore it's a naming convention just by looking at the leading underscore in the file name we can very easy say this is a partial view and not a regular view or it is a page we want to create a partial view so check this checkbox we don't need a separate page model class uncheck this and then click add the model class for this partial view is our employee class because we are displaying employee details and the code that displays employee details is present in the index razor page right here so let's cut it from here and paste it within our partial view this line right here that computes footer part is C sharp code so to indicate that this is a code block let's include an @ symbol and a pair of curly braces in the expression here instead of using employee dot PhotoPass the model for this view is employee class so let's use model dot for the path we need to do the same thing even right here where we display employee name and in these three places maybe have you edit and delete buttons this completes the partial view our office next step is to use this partial view from this Employee List razor page you have the for each loop here that loops over each employee in model dot employees so we have to render our partial view for each employee within the for each loop right here for that we use the partial toggle / and then specify the name of our partial view for this partial view to be able to display employee details we have to pass the employee object as the model so for that we use model attribute and then specify this loop variable employee with all these changes in place let's run our project we're on the home page let's navigate to the list page notice we see the Employee List as before we don't see any change here now what we want to do is render our partial view even on this delete razor page so it looks like this let's copy the partial toggle / from the index razor page and paste it in the delete razor page right here the model is this employee public property that is present in the spawning page model class this property contains the employee details so let's pass it as the model save our changes and take a look at the browser notice now on the Employee List page we see the partial view as before we also see it on our delete confirmation page but we don't want these three action buttons mu edit and delete on the delete confirmation page we only want them on this list razor page so the question is how do we tell the partial view to dynamically show and hide these three buttons depending on the page from where this partial view is being rendered there are several ways to do this one easy way is by using view data dictionary on the delete page we don't want to show the buttons so let's use view data dictionary with a key called show buttons and then let's store a value of false and then we want to pass this view data dictionary to the partial view so for that let's use view - data attribute and pass the view data dictionary we want to do a similar thing on this index raise page as well so let's copy this expression paste it within our index razor page and then change the value here to true because on the index razor page we want to display the buttons and then we want to pass this view data dictionary to the partial view finally from our partial view we want to retrieve the value of this key show buttons from the view data dictionary so let's copy this by default the value from the view data dictionary comes out as object type but we know it's boolean so let's typecast it - boolean and then store the value in a variable called show buttons all that is left to do is use this variable to determine whether to render this card footer section or not because it is this section that contains those three buttons view edit and delete so let's use this variable so if show buttons variable is true then render the card for the section otherwise don't render with all these changes in place let's take a look at the browser notice on the list page we see the three buttons and on the delete page we don't see them and then when we click no here on the confirmation the employee record is not deleted on the other hand if we click yes the record is deleted just like a regular view or razor page a partial view also has a dot CS HTML extension a partial view enables code reuse we usually use it to encapsulate HTML and see sharp code that we intend to reuse on multiple razor pages our views including the layout view that's it in this video thank you for listening [Music] [Music]

Channel: kudvenkat

Views: 55,386

Keywords: asp.net core partial view example, asp.net core razor pages partial view, partial view discovery, asp.net core partial view data, asp.net core dynamic partial view, asp.net core pass data to partial view, mvc core partial views, .net core partial view, asp.net core razor partial view example, asp.net core mvc partial view example, asp.net core mvc partial view, asp.net core mvc partial view model, asp.net core mvc partial view parameters, asp.net core mvc render partial view

Id: GOPFq_A7Acg

Length: 7min 50sec (470 seconds)

Published: Mon Jan 27 2020