Admin LTE Theme Integrate in ASP.NET MVC Application⚡Admin LTE⚡Admin Template

friends if anyone wants the theme integrated code as well as theme which i used they can download the modified project from the description below [Music] [Music] hi friends in this tutorial we will learn how to integrate theme in our mvc application so as you can see this is my earlier application design first approach cred so in this only we will integrate theme so first we will see the output before integrating the theme this is our controller this is our action method so as you can see there is no theme integrated here so we will integrate theme in this application we will search theme so here as you can see free bootstrap themes and templates so we will see in this because it is free so as you can see we are having free theme here so we will download this for this click here free download now it is downloaded so here we will extract this this theme having n number of files so here we will see one index file first open this this file is having all the records means buttons and cards utilities colors these things are there so this is good login page also there and register page also there we will we can integrate this theme and charts also there as you can see area chart donut chart bar chart and animation also good as you can see so in dashboard we can show the records as per our requirements so we can integrate this theme in our existing applications i will show you how to integrate and we are having tables also as you can see it's a bootstrap tables and as you can see it can able to search also now we can show how many records we want in single page next page also will work as you can see next also working so with this we can integrate and here we are having logot also profile these settings search bar also here so we can see so first what we will do we will edit in notepad plus plus because we want to integrate the content so copy hold the copy hold the elements and go inside of our application and here in views shared we are having layout page layout page is nothing but it's a master page there we can see all the menus and jquery bootstrap links here so we will add inside here so as you can see so for that now what we will do uh one step by step we will integrate so copy this head and paste in head only paste as you can see so after this next step is body so we will add body also so go to this copy the whole body whole body you can copy copy and paste in our application so we required render body okay this thing we required so what we will do we required this existing things also so what we will do we will remove this and paste it over here i will show you simple step by step how to integrate theme because many people will get confused how to integrate theme so i will show you in step by step we are having two bodies so one we will remove this we will remove so now it's ready so now we will add folder structure we can go here as you can see these folders we required these five folders we required we will copy this create a folder add new folder folder name we can give theme right click and paste those files so it will add all css js files over here so as you can see css all files we have received here we will give the reference of this vendor font awesome css all main dot css example here we are having vendor font awesome css and all main dot css over here we can give the url so for that we have tilt slash theme slash now you can see it goes inside of this vendor font awesome then all mean dot cs or else we are having one shortcut what we can do we can directly drag and drop over here as you can see same url it will be created here so we can do like this okay so next we have to rename we have to add this theme in all the places all the places example we will replace this in in the place of css we will replace css theme css we will replace so in all the places we will replace make sure it will be in current document so here as you can see tilt theme css then next so it might be many places so that's why we have to check first before replacing now it is reached so next is so here in scripts we are having vendor so we have to add this url over here okay so it will go to vendor jquery vendor jquery min dot js we will do in all the places here so now save it and run the application so as you can see our theme is integrated that's what we we are able to see all the things which are showing here here as you can see this is our application i will show you this is student dot student index we are having this is the student index page as you can see there is no layout over here there is no structure over here there is no design so what we will do we will integrate in all the pages okay this functionality is done as you can see everything is working fine over here so what we will do we will integrate in other pages also see so this this is the class we don't need to add over here only in src we have to add okay so now what we will do this is now ready as you can see for that the image of profile is not showing correctly so we will refresh this as you can see now it's perfect so here what we will do we will remove this extra things and we will add these things in the above section okay so for that we have to we have to remove extra things which we don't required as of now so as you can see these dashboards interface components these are the menus and so as you can see this is the content wrapper this is the main content so we will do in the main content itself so we will remove extra things from the main content this is the top search as you can see so it it starts from here begin page content okay so from here we will remove extra things this is the earning as you can see this is earning so we will remove this and earning as you can see we will remove these things this extra things pending request we don't required this row we don't required so in lastly content row so as of now we don't require these things we will remove this up to here and these things also not required so we will remove this also okay so main content ending here so we will add in here our data so our render body we will add over here example this div we will add over there cut and paste it in our main content row so we will see what will be the output so refresh this so as you can see it's perfect i will show you it it will be responsive as you can see and all these things which we can able to see okay these are all responsive only so here there is no link that's why it is showing error here we can see so what we will do next we will add our index page this is the home page so we will add our index page here so as you can see there is no layout page here so we will add layout here so in views we are having shared folder shade folder and a view start we are having and what we will do we will paste in our view page index page go to view and here is layout null so we will paste here this url because we are referring layout save it and refresh once after refreshing go to that url in which we have changed so as you can see index student indexes in responsive manner as you can see like this so we will do same thing in different pages also as you can see in create page we don't have any [Music] layout page implemented so we will implement that also so go to that url copy this and go to student controller and go to create right click go to view and add in layout page save it similarly we will do in other pages also go to student delete here also we don't have anything we will add details page also we don't have we will add we will do in all the pages where we want a responsive so index also we already done index so save all and refresh once and go to new this you can see as you can see it will be responsive so back to the list so what we will do next we will add the urls so where we can do in layout already we are having some urls so we will manipulate those things so custom component is there as you can see custom custom components we are having in the two urls are there so we will add in that so we are having create page and details page index page so we will add those things there as you can see here we will add list or else student list okay and one more thing student create and similarly add two more a student details and this one we can we we don't require this only three we required so what we will do student list we can add url so for that we require tilt student slash index similarly we will do in others also tilt slash oh sorry it is not a student it is students student slash create till slash student slash details so here we will add student details student record we can say so what we will do we will remove remaining other things which we don't required as of now as you can see this these things which we don't required so we can remove those things pie chart also right now if you want you can add as as per the requirement so right now i don't require this so what we will do we will refresh this page so we have refreshed as you can see all the urls i have removed okay so here we are having component so student record is there so component also we require to change as you can see so here we are having component we can give some student student stuff we can write and refresh once as you can see here student stuff student record student list student create student details as you can see it is very responsive it is very responsive i will show you from here also now see it's working fine it is responsive because we have done in bootstrap so we can go to the student list as you can see we are having this list so we can create so we are having this records two text boxes we are having so we can add whatever we want example taylor taylor got max 600 then create so as you can see taylor is added we can edit tom taylor save it tom taylor i had updated so we can delete also this as you can see this is also in a responsive manner so we can delete also so i will show you how create page also in responsive way as as you can see so edit also we are having in responsive so we have done how to integrate theme so if you like the video then please subscribe and share with your friends thank you

Channel: Technology Former

Views: 36,105

Keywords: asp.net, asp.net mvc, c# mvc, .net mvc admin, admin theme, admin panel, admin template, admin theme integration, admin template integration razor, razor view admin layout integrate, admin theme integrate, integrate admin panel, technologyformer, adminlte, admin lte, admin lte 3 control panel dashboard, admin dashboard bootstrap template into asp.net, mvc bootstrap, admin theme add bootstrap template, install adminlte template, theme integration technology former, bootstrap theme

Id: 3Y5U732Rlpc

Length: 25min 31sec (1531 seconds)

Published: Sat Aug 28 2021