THIS is how you use Partial Views in ASP.NET Core 6

hello and welcome to tutorialcu my name is janik and i'm your instructor in this video let me explain you how you can make use of partial views in asp.net core but before we get started make sure to hit the subscribe button right now because you don't want to miss any high quality c-sharp related videos now before i show you how you can create and use partial views i want to explain to you what partial views are in general and why you need them because they are definitely sort of best practice in asp here i have an asp.net mvc application just set up and this is a block application so here we have two block entries one about coding one about design so this is the home page i also have and you might know that from other blog applications i have other sites something like the archive and here i also want to show my blog postings now it would be very bad practice if i go ahead and simply copy all of the styles that i have right here all of the elements right exactly 100 percent the same code if i just take that and paste it here again right because there are some principles we need to take care about like dry don't repeat yourself right so we should not simply copy the code multiple times because maybe later on there are even more sites where we want to display our blog posts now this is where partial views become very handy because you create a partial view and the partial view would only render for example those two blog postings here or how many ever you have but it would not render the title right here for example so the partial view would only take care about rendering or displaying blog posts and you could potentially use them in every view inside of your project so for example if you have a registration page where you have a form where you can sign up and you want to show some blog articles there why so ever you can simply go ahead and render that partial view there and you're already done right so it's very handy because it's like a component you can take the parts review and render it every now and then wherever you like so our goal is to take that from the home page right here to take the entries that we have the blog postings and put them into a partial view that we have to create afterwards we will again render it here in the home page and also in the archive and we will not have to duplicate any code so in the end we have a partial based let's call it component let me just show you the project that i've created here but before i got some very very exciting news for you if you are interested in asp net development or c-sharp development in general we are about to launch a free yes you heard right a free asp.net challenge this is like a complete course it takes five days and every day you will unlock another day and you will learn asp.net development we call that five day challenge because every day you receive a programming task which you have to solve on your own also during the whole five day challenge we will build a complete application together so definitely and as i said it's free so it's a no-brainer go ahead and pre-register for the launch it won't take long until the challenge is available so go ahead and sign up right now you can find the link in the description so the project that i have right here it's very very simple right this is a default mvc asp netcore.net 6 application and i got the home controller i have a simple classy it's called block entry just an id category title content and i created a static list that we can use because we don't want to make use of a database right here so this is just what it is and then it's pretty default stuff i got the index page and the archive page here and the index page has that model so i'm sending in the block entries let's take a look in the index page you can see i set the model to the block entry here and then i just got some basic bootstrap styling from the page i just copied it from the examples i could show it right here right this is the example block example of bootstrap i just took that element copied and pasted it and then simply replace the values here with category title content etc so really basic asp now as i said this is directly rendered in the index page if we want to have that in the archive page too or in the archive view you could go ahead and copy that but that would be bad practice as we have discussed earlier so instead of that now let's get to the topic where we create our partial view so partial views usually have a prefix that you use and it's an underscore so inside of your views folder go into the home folder because our controller is called homecontroller right click and add a new view to indicate that this is a partial view use the underscore prefix and call it block articles let's use html for example now let's remove what's inside here and go to the index cshtml take the div that we have here i will just remove it right so this is our index page it now has only a title and a small paragraph the model is still here visible but we don't need it so let me remove it right only title and paragraph let me go to the blog articles again let me add the model here model lists of block entry and then i paste the code again add some formatting and we are done now we have that inside of our partial view now let's move to the home controller we need to make adjustments because here we have the index action that would render the index page and would send in the model block entries and we no longer need that so let's remove it okay restart the application now and you can see that we have no longer any content here on the home page archive also no content and that's because we are not rendering our parse review so let's do it right now and that's the very interesting part right oh and if you like the video go ahead and give it a thumb up and definitely subscribe to our channel because you don't want to miss our content believe me now inside of our home controller let's create a new action that would actually render our partial view public i action result block articles partial we can call it like this so here we have the indicator or we are indicating that we are talking about the partial views so we're simply adding a partial here but that's just a nice to have and the only thing that we have to do is to return a partial view and this is where it's different from our action result right here or here here we turn in a view but here we return a partial view we need to name it let's go ahead block articles because that's how our blog articles view is called and let's send in the model and the model are the block entries here from that static list so let's simply paste it block entries there we go all right now how can we call that block articles method that we have right here to render it and this is where we start using jquery for example if you don't know jquery in combination with asp.net definitely make sure to check out our video we have recorded a video especially only on that topic so go ahead and check it out if you don't know it and then come back to that video here let's switch to our indexes html if we want to write some javascript or some jquery code we need to add a section to our views add section and the section needs to be called scripts and inside here we can create a script tag and inside of that script tag we can now write some javascript code now we just need to write a simple line of code but first we need to think where do we want to render the partial view so so just keep in mind we are inside of our index page and i want to say okay here i have a div and inside of that div i want to render the blog articles so i go ahead and create an id for that so that i can access it from the javascript let's say partial zone something like that now let's go into the script section here and use jquery dollar sign now let's get that div by id so go ahead and grab that item partial zone and then we simply go ahead and load the content for that diff load now we simply add a url we go to the home controller and simply call this method right here the block articles partial method we can simply edit and now that block articles is returning a partial view and that partial view will get rendered right here inside of that partial zone diff so this is how simple it is let's copy both of them the div and the script section here copy it let's bring it to the archive cshtml here's our archive i simply paste it here too we got that partial zone and we got that script section which is also rendering the partial here when we now start the application you will see that we have the blog articles in the index page and also in the archive view as you can see right here it's rendered in the archive it's also rendered and we have simply one file the block articles partial view file to maintain the html and design so if we want to make changes we can simply do it here and it will get adjusted everywhere where it's rendered so this is how and why you should use a partial view now again the reminder if you are interested in asp.net check out our free challenge it's about to be released so don't miss it it's completely free check the link in the description and pre-register for that amazing free deal i mean you are here to get educated right so this is a nice deal for you if you want to see any other c shop or asp related videos please write it down into the comments so that we know what you want to see on this channel again don't forget to subscribe and thanks for watching see you next time have a great day

Channel: tutorialsEU - C#

Views: 23,029

Keywords: partial, views, partial views, asp, net, core, asp net core, mvc, model view controller, asp.net core tutorial, c# asp.net core, .net 6, .net core 6, learn asp.net development, asp views, asp view, asp.net core view, asp partial, asp.net core partial, asp.net core partial view, asp.net core partial views, asp.net core shared, asp.net shared, backend development, learn asp.net core, programming, razor, view, Partial views in ASP.NET Core, partial views asp net, asp net, dot net

Id: xqz0Iii7yHM

Length: 10min 5sec (605 seconds)

Published: Mon Apr 25 2022