Gentelella Admin Template in MVC 5.0

Question

Hi All This is my first post. I want to use Gentelella Admin HTML Template in MVC. Pls help me. Thanks

George Coker · Answer

hello Gurvinder, to implement the template in MVC5 App, follow the steps below: -First create an empty MVC project -Right click the View folder and create a new folder called 'Shared' in it -Right click on the Shared folder and add a new MVC5 Layout Page(Razor) to the folder -Name it _Layout.cshtml -Delete everything on that page and save -Right click on the Views Folder again and create a new MVC5 View Page (Razor) - Name it _ViewStart -Delete all the code on that newly created page and type the code below on the page: @{ Layout = "~/Views/Shared/_Layout.cshtml"; } -Note: you just referenced the previously created _Layout.cshtml file. -Create a new folder in your project and name it Content -from the extracted Admin template you downloaded copy the folders: vendors, build and src into the Content folder of your new project -If you cannot find the folders or files you just copied; click on 'View All Files' tab, just above your project name in Visual studio -Right click on all the newly copied files and include them in the project - Open the index2.html file in the extracted template and copy out everything in it onto your _Layout.cshtml file - Type the following code just beneath the 'Body" opening tag: @RenderBody() -Rename your Applition title to a name of your choice : App Name - @ViewBag.Title -Ensure you point your css files and .js files to the right address. e.g: should now be: -Add "Microsoft.AspNet.Web.Optimization" to the reference using Nugget Package. You can do this through the Package Manager Console typing the code below: Install-Package Microsoft.AspNet.Web.Optimization -Source nuget.org -Right Click on the App_Start Folder and adda new class "BundleConfig.cs" -Type the code below in your newly created file: public static void RegisterBundles(BundleCollection bundles) { } -Ensure you reference: System.Web.Optimization -Transfer all your CSS and .JS files to the BundleConfig.cs file as shown below: **Note your reference maybe more than or less than the code shown below: using System; using System.Web.Optimization; namespace EmployeeRegApp.App_Start { public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new StyleBundle("~/bundles/css") .Include( "~/Content/vendors/bootstrap/dist/css/bootstrap.min.css", "~/Content/vendors/font-awesome/css/font-awesome.min.css", "~/Content/vendors/nprogress/nprogress.css", "~/Content/vendors/bootstrap-daterangepicker/daterangepicker.css", "~/Content/build/css/custom.min.css")); bundles.Add(new ScriptBundle("~/bundles/js") .Include( "~/Content/vendors/jquery/dist/jquery.min.js", "~/Content/vendors/bootstrap/dist/js/bootstrap.min.js", "~/Content/vendors/fastclick/lib/fastclick.js", "~/Content/vendors/nprogress/nprogress.js", "~/Content/vendors/Chart.js/dist/Chart.min.js", "~/Content/vendors/jquery-sparkline/dist/jquery.sparkline.min.js", "~/Content/vendors/Flot/jquery.flot.js", "~/Content/vendors/Flot/jquery.flot.pie.js", "~/Content/vendors/Flot/jquery.flot.time.js", "~/Content/vendors/Flot/jquery.flot.stack.js", "~/Content/vendors/Flot/jquery.flot.resize.js", "~/Content/vendors/flot.orderbars/js/jquery.flot.orderBars.js", "~/Content/vendors/flot-spline/js/jquery.flot.spline.min.js", "~/Content/vendors/flot.curvedlines/curvedLines.js", "~/Content/vendors/DateJS/build/date.js", "~/Content/vendors/moment/min/moment.min.js", "~/Content/vendors/bootstrap-daterangepicker/daterangepicker.js", "~/Content/build/js/custom.min.js" )); } } } -Register your BundleConfig file in the Global.asax file: BundleConfig.RegisterBundles(BundleTable.Bundles); ensure you reference System.Web.Optimization -Open the web.config file in youw View Folder and add the System.Web.Optimization namespace just below your application namespace -Right Click on the Controller Folder and add an empty new Contoller Class, name it HomeController -Add it's view and uncheck 'Use a layout page:' from Add View dialogue box -Delete everything in the newly created Index.cshtml file -In your '_Layout.cshtml' file Just above the 'head' closing tag type the code: @Styles.Render("~/bundles/css") and just before the closing 'body' tag type: @Scripts.Render("~/bundles/js") to make reference to the CSS and JS file from the BundleConfig.cs file -Save and build your Application -Open your Index.cshtml and run your application. -That should do it. Happy coding.

Otar Melia · Answer

Acctualy, it is very simple, you need to change line in views\_ViewStart.cshtml to this: Layout = "~/Views/Shared/_LayoutGentelella.cshtml";

Eduardo Ibrahim · Answer

Hi Gurvinder Singh! I am also looking for a implamentation of Gentelella Admin Template in MVC 5.0. Let me know if you get some new. May you want to try another template with the full implamentation: https://marketplace.visualstudio.com/items?itemName=VolkanCeylan.SereneSerenityApplicationTemplate This is fine in terms of MVC but Gentelella is more beautiful I think. Att, Ed.

Gurvinder Singh · Answer

I just want to convert an Admin template which is in HTML like Gentelella to MVC project. I can convert this in normal asp.net project but have no idea to do so for MVC.

Tejas Trivedi · Answer

Hi Guruvider, The functionalities in admin templates nothing to do with ASP.NET or MVC until it requires server operations if i am not understanding wrong. Your forum question is very generic.Could you please let forums know actually where you got stucked so that we can provide you proper direction ? Please don't forget to mark as answer if this helps.

Gurvinder Singh · Answer

Thanks Tejas, I have the experience of applying HTML template to normal ASP.Net website but Admin template have lot of functionalities other than Header and Footer and for MVC5 again it involves lot of techy things. So i am unable to do so.

Tejas Trivedi · Answer

Hi Guruvinder, The templates are pure HTML, so it does not mater where you fit, you can get this working with ASP.NET, MVC razor wherever you want. Generally, these templates are for Single page application, But to use it with MVC 5, just identify the header, footer and content elements and push those in your layout page of MVC5 and give the proper css references will work. Hope, this will provide you high level guidance from where you can start. Feel free to write me if you need more information on this. Please don't forget to mark as answer if this helps.

Gurvinder Singh · Answer

Hi Bikesh I already have the template but help required to convert it in MVC with all the formating and functions.

Bikesh Srivastava · Answer

Visit here it may be help you. https://graygrids.com/item/gentelella-free-bootstrap-admin-template/

Gurvinder Singh · Answer

Thanks Krishna and Tejas but i have done a lot of search on this topic but unable to sort it out. I have downloaded the HTML template from GitHub but now i want to convert it to MVC for further modifications and development also. It is the best template i have gone through, else if any other option is there for MVC5 kindly suggest that also. Thanks

Krishna Rajput Singh · Answer

Hi Singh thank you for writing below links helpful for you...... https://github.com/puikinsh/gentelella https://daveismyname.com/free-bootstrap-admin-themes-bp

Tejas Trivedi · Answer

Hello Gurvinder, Gentelella templates are based on HTML, Jquery and BootStrap CSS. It is purly client side templates. So, You can use it with any server technologies ASP.NET or MVC. Hope, this will answer your query. Please don't forget to mark as answer if this helps.

Gentelella Admin Template in MVC 5.0

Answers (12)