(#9) How to use Partial View in MVC .NET 6? | Different ways to use Partial View in ASP MVC .NET 6

hey guys how are you I am noon and today I will explain the complete detail of partial view usage in spmsc.net6 we will see the different cases uh of how we can use the partial view so let me first create a project in Visual Studio 2022 and then I will show you the usage of partial view through different ways go to the visual studio and I will create here a project let me create a new project and here I will search for the template of ASP MVC yes now here is the template of ASP MVC without net6 click on next and here I will keep the name of my project a let's the name should be MVC partial View yes and I will keep the project inside this directory and now click on next I will select the dotnet 6 version authentication type known you can select any other recording to your requirement and for the time I will uncheck this option now click on the create option project created successfully now first let me run the project whether it's working or not and then we will go step by step okay uh the home page of the website loaded successfully it's mean that the project is running uh successfully now I will close the window basically what do you mean by partial U in the view uh we mean that it is an HTML page uh basically in SPM we see we are using the view like as an HTML page but let's suppose you have just need a part of the page and you want to use it in different places or you want to use in a single page in a in a single place then we can use the partial U partial view is just a part of HTML if I show you the layout page of the website then here you can see that we have the header and here we have the body and we are we have the footer now we can also include uh these content inside a partial View and then we can render the partial view inside the layout dot CS HTML page now let me add here first a partial View and then I will place this content inside the partial view it is basically the header of the website uh if I if I run the application again header or the logo the whom and the privacy basically it is the logo and it is the uh it is the home and it is the privacy policy no it is uh I want to include these content inside a partial view instead of using here uh direct HTML I will add here a partial view head first close stop duplication click on this folder add and click on view click on these option add and no select this one create a partial View I want the view name to be header header yes but keep in mind that always start the partial U Name by the underscore symbol yes then it will be clear and the application so understand and it is also readable so I am starting uh the application Name by the underscore and the partial U name is header just click on ADD partial view will be added inside the shared folder partial view is added successfully now I will copy the content of header come here and I will paste here inside the partial U Ctrl s uh Ctrl S as you can see that I have removed the content of header from the layout and place inside the header now I will run the application as you can see that there is no header the header is removed now I will use these header partial U inside the layout as a header how can I do so I will add here a tag with the name partial yes and M should be like in this way I will give here the path to the partial U head and underscore header Dot cshtml I think we can add here a name or layout but let me see a heart reload and then see the result okay it's the page is not working there may be some kind of error uh dot cshml okay I will add here the name directly go to the page again it's not working just close the application and run again question name headers was not found the following location was searched shared header dot CS HTML uh I think I should also remove these options artery load okay guys the header renders successfully if I just use these two time then let's see the result there is rendered true time if I move from here and place after the footer then the header will also render after the after the footer hard reload and see here the header is rendered here and then after the body right here it is the footer sorry guys just Place me here after these no the footer is at the bottom here is the header here is the header so you understand here that we are using partial U as a part of HTML and we can render in different places so there are lots of benefits let's suppose I create a specific HTML that I want and I understand that I can use it in different classes then I will just add here a partial view inside any folder and then I will use this partial view in our application according to needs and requirements of the client let's suppose here is a button inside the application and if I click on the button then I just want to replace the content of these with a new HTML without refreshing the whole page I just want to partially replace the HTML of a page without refreshing the whole page then I can also use here partial uh for this purpose let me first stop the application go to the home controller and inside the home controller first I will remove all the extra things uh it is my home page and it is my privacy page okay or run the application okay now I will go to the privacy policy page I am at the privacy policy right now I will add here a button to the privacy policy home privacy I will add here a button after the paragraph tag so let me add here a button inside the div button text will be a load partial View s and here inside this div I want when when a user click on this button then the content of these div will be replaced with the partial view content so let me just I I have just to give an ID to this deal less partial so less RT load and then see the result the button is loaded but now if I click on this button nothing is happening uh actually if I click on these then there should be some HTML loaded okay now I will basically first add a partial view inside the home controller uh for these right click add uh close the application add you Reserve you click on ADD create as a partial view check this option and here um privacy policy [Music] kindly ask question I want that here should be some kind of frequently Asked question HTML click on ADD okay so it will take a little time uh because of generating the code for the partial View as you can see that the partial U is added successfully inside the home folder let me remove all this content and now I will add here at you inside the partial View there will be a Content like Edge to here is located your office and the answer will be uh or office is located in Dubai and the second question let's should be I will bet a break I am in new line and here will be the second question yes like in this way this stuff because it's creating an issue uh what is but office timing and let's suppose the answer is I just want to create a dummy HTML or office timing is to yes no I want when the user click on the load partial button then these page content comes inside these two yes let me first add here a JavaScript function when someone click on this button now there is a way and click and on when someone click on this button I will add here function uh load privacy but for DC content yes now I will add here a script tag for adding the JavaScript uh code right I will add here the JavaScript function if you can see the function name is load privacy content when someone click on this button these function will be fired and in this function I will get the day I will make a call to the to the home controller and for the home controller I will return this partial view so let's me uh allowed to go step by step yes I will make here an edge skull I have already copied a simple um snapshot of the edge skull so that we can save a little time it is the simple agics call here we have to give the type of the request I will make a get request and here I will type the URL I am making a call to the home controller so I will add here URL dot action my action method name will be yes and here I will specify the controller name my controller name is whom and the action method will be will be load privacy FAQ from controller like in this way no I will call this method when someone click on the button the JavaScript function will be called and here from this function uh I will make an agics call to this URL inside the controller I will add these method inside the controller let me first add here the data is in empty array because I will not pass any parameter if you have if you want to add some kind of parameter uh to the edge skull then you can specify it here uh just keep this option as it is command this one at this time okay now first I will add this action method to the controller go to the controller and here I will add a i action method privacy it will be the name and from here I will return a partial View partial view okay and I will give the path to the partial you the path is views whom privacy policy FAQ View dot c s h t m c s h HTML yes it is the complete path of the partial view that I want to return from the load privacy action result when someone clock click on the load privacy button these JavaScript function will be called here I am making energy scale to the controller action method and these action method will return me the partial View once these partial view is returned then I will replace here the content of this View yes it is the uh divid you can I am using the jQuery send text by J in the jQuery we have to write the hash sample if you want to access a div by ID and then we will put here the ID of the div so the ID is partial YouTube and I want that its HTML should be the data that I am getting from the controller from the controller I am getting the partial U right so in the success function param data I will get the HTML from the controller and I am giving this HTML to this view I mean this one let me save all the things and run the application and I think you will understand it better the privacy policy page now click on this button you can see that the content is loaded successfully refresh the page again click on load partial View refresh again load partial you you can see that the whole page is not refreshed uh only this content is this partial content is replaced and these partial content I am loading from the um from the partial view lets me put here a debugger and you will see the result fresh no I click on load partial View it is this button this one I am calling a JavaScript function from this and from these function there will come a call to the home controller lets me click guys you can see that the function is loaded heated successfully and from here I am returning partial U okay now lets me put here a debugger inside the JavaScript function I just want to see you how the things are running I will put here a debugger inside the JavaScript and also a debugger inside the success so that I can show you the data that returns from the controller to debugger once two and one inside the controller I will tell you that if you want to debug the JavaScript code then you can just write a keyword debugger when you when this function is called and at this point the breakpoint will be heated the debugger will be heated refresh yes no for the JavaScript debugging you have to inspect uh make it at the bottom close this one right now I am clicking on these you can see that the JavaScript script code is headed inside the console now I am making here an Ajax cloud from this position next next okay you can see that the controller action method heated for the partial U H now for the partial view lets me return some HTML you can see that no debugger in the success is heated it's mean that the controller return data successfully now I will show you the data it will basically the HTML it is the HTML of the partial View and this line will replace the content inside the Hidden View let's me next after executing this line let's see the result HTML is replaced so it is the trick basically for using the partial View there is one another usage of partial U also uh if you want to use a to call a partial view from your page and pass some uh some data then you can use like in this way let me stop the application now I want ah I will remove this code from the button let me also remove this complete code this code right no I want then when the privacy policy page is loaded the data directly load inside the uh partial view due uh like in this way that we use in the in the layout but at this time I want to add some some new contents a view back like a something class or something list data so I will I can use like in this way I have copy align LED so that have no chances of error yes you can use like in this way the ad at the rate symbol a weight then HTML dot partial essing it's mean that you are loading the data partially using the acing away mechanism in asp.net core and here you have to give the path the complete path so let me copy the path from here I will remove this code also there is no need I am directly calling the partial uh inside this folder so let me replace the complete path now here I can pass any kind of data for example uh I want I am returning some data from here like first I will add a class here inside the model folder add um let's make it a very simple class student.cs and let me add two properties public int ID and public in student name these are the ID of the student is the name lets me declare the student inside the privacy policy page student STD new student and lets me set the STD dot name is equal to std.id is that's one yes I will return the student object uh to the to the privacy policy View and lets me declare here as a model for you guys uh I want to declare it as a model for this page wouldn't sorry sorry sorry copy student yes and no I want to pass these model inside the partial View no sorry like in this way I am passing the model to the partial View and then I will use this model inside the partial view page so I can use here like in this way Edge to wouldn't info and I will use here the student info like in this way uh Li P student ID is equal to add the rate more let me also put here the model inside the partial View and I will head here model Dot I sorry model dot ID and in the next li I want to display the name of the student yes now let me once again explain the complete flow privacy policy page will be heated from the browser here I am just passing creating an object of student and then set its ID and name I am returning these object the student object to the Privacy page view here you have to use the declare the model that you want to use and the model that you're returning from the controller so I am returning student model and here I am calling the partial U and I am passing this model you have to write here not student but the model okay no this model will be passed to the privacy policy partial View and here I am using its data the model Dot id.model.name now let me run the application to the privacy policy page you can see that the student info partial view is displaying here uh if you go to the partial view it is the question related to FAQ let's remove this at this time hard reload okay it is the privacy policy content and here is the student info that I am passing from the controller now let me put here a debugger a debugger here inside the menu a debugger here also inside the partial view no Let me refresh the page so that we can see the flow the controller action method is heated step next next and next now see the object you can see that its ID is set to 1 and name is equal to nor next no the control will go inside the main page the privacy you can see that it the control comes inside the main page and from here I am rendering the partial view now click next you can see that no the control comes inside the partial View continue and the page is loaded successfully so these were basically the three main usage of partial view that we are using in the ASP MSC applications you can use according to your requirements like in this way um I think we reach at the end of this video so keep watching the videos and if possible then subscribe the channel thank you so much thank you

Channel: Noor Codelogics

Views: 4,531

Keywords: partial view, partial view in mvc, what is partial view, mvc partial view with model, asp net core mvc modal popup partial view, aspnet core partial view, c# mvc partial view, mvc core partial view, ajax partial view mvc, razor pages partial view, razor render partial, mvc modal popup partial view bootstrap, partial view mvc c#, partial view in .net 6, partial view .net 6, how to use partial view in asp mvc .net 6, asp net core, net 6, netcore 6, net6, dot net 6

Id: GpEZCR64Qxw

Length: 29min 47sec (1787 seconds)

Published: Mon Aug 29 2022