Category Archives: MVC Articles

Models Folder does not created in ASP.Net MVC Core 1.0

In this article you will learn
Solution of this following problem in ASP.Net MVC Core 1.0

Why doesn’t MODELS folder gets created automatically in solution explorer while creating new project in MVC 5 or ASP.NET Core 1.0?

authentication2

As we all know that ASP.NET Core 1.0 is very new technology and a great number of programmer and developer are being upgraded with this technology. It gives a great UI and engine to develop application but developers are getting simple problem using this new structure. One of the common problem is Models folder doesn’t get created automatically in ASP.NET MVC Core.10 in visual studio 2015. In this article I will show you how you can fix this simple problem.

Reason and solution

This is because you have set No Authentication while creating your project. Just change No Authentication into Individual User Accounts and your problem will be solved.

authentication

authentication1

Summary

In this article you learn how to fix Models folder is not appearing in solution explorer while creating a new project in MVC 5 or ASP.NET Core 1.0.

Don’t forget to like page if it solved your problem.


MVC – Design Master Page Layout with CSS HTML Template

In this article you will learn

  • Design Master Page Layout using CSS HTML Template in MVC 5.

Are you looking for a way to design MVC application with your favorite CSS Theme? There are thousands of stunning and responsive themes are available with free or paid license. So, you don’t need to always design you own theme to work with. You can download or buy those themes and customize in your MVC Project. In this article I will show you step by step guideline with picture for adding external css and template in your MVC project. I am using here MVC 5 for designing Master Page with CSS Template. But it doesn’t matter what version of MVC you are using. The processes are almost same.

So you need a CSS Template to work with. I have downloaded a free css theme and customize them in MVC. Download this simple CSS HTML theme and learn how to design MVC project using this template.

Download this CSS HTML Template for Demo Project

template
Download Theme

Step 1. Start a New Empty MVC 5 Project. Go to File New Project. Select Web in Left side and then Select ASP.NET Web Application as your project. Give the name of your project MVC_Design and click OK.

0
Click to Zoom
Step 2. Select Empty in the template box and check to MVC check box and click OK. An Empty MVC project will open.
Click to Zoom
Click to Zoom
Step 3. Now, add images and stylesheet of your downloaded css theme. MVC is well structured application and there is special folder for all types of resources. All the images and css file should be under Content folder. So, make a folder ‘Content‘ and add style.css and images folder in it.

Right click on Project Name MVC_Design Add New Folder. Give folder name ‘Content‘ and click OK.

2
Click to Zoom
Step 4. Right click on Content folder select Add Existing Item. Now browse style.css from your downloaded theme and add. Also make an images folder under Content folder and all the images in this images folder.

3
Click to Zoom

Step 5. Now add two folder “Home” and “Shared” inside Views folder.

Home – It keep all your website pages like Index, Service, About, Contact, Company etc.
Shared – This folder keeps Layout page, Master page, Shared section like header, footer, sidebar, menu etc.

4
Click to Zoom
Step 6. Add a Layout page in Shared folder. This page is actually your master page that defines the shared layout throughout the website. Using this common layout in all your pages will give a consistent look.
Right click on Shared folder Add View.
5
Click to Zoom

Give the View name as _Layout and keep all the option same as shown in this picture.

6
Click to Zoom

Till now, you have added all the necessary files and folders in your project. Your solution explorer should look like this.

7
Click to Zoom

Coding

It’s time to break you index page code into several partial pages. For example, Header, footer and sidebar are the common in all the pages. So I will break the index page into several necessary partial pages. How, see these steps.

Step 1. Open index.html of downloaded theme in your favorite editor as Dreamweaver or notepad. Copy all the code and paste it into _Layout.csthml.
Step 2. Right click on Shared folder Add View. Give View Name as _TopMenu and check Create as a partial view and click Add.
8
Click to Zoom
Step 3. Go to _Layout.cshtml page. Cut this code block and paste it in the TopMenu.cshtml.
9
Click to Zoom

Now return back to _Layout.cshtml and add this code at the place of TopMenu.

@Html.Partial("_TopMenu")

Now your _Layout.cshtml page will looks like this.

10
Click to Zoom
Step 4. Break all the code block until your _Layout.cshtml look like this.
11
Click to Zoom
Step 5. You have noticed 2 new code block inside a red mark.
@RenderSection("metatags", false) – It allows you to add meta tag for pages.
@RenderBody() – It allows you to add separate content for each pages.

Congratulations! You have created Master Page Layout Successfully. Now, it’s time to add pages for your website.

Step 1. Open _Header.cshtml and modify its content as follow.


@ViewBag.Title – This code allows adding separate title for each page.

Step 2. Right click on Home folder Add View. Give View name: Index, Check Use a layout page and select your layout page as follow.
14
Click to Zoom

Your Index.cshtml page will look like this.

MVC Tutorials – Index Page
Step 3.Using the same process adds Services, Gallery, Company and Contact page as follows. In all the pages adds the Meta tags as follow:

15
Click to Zoom

Step 4. Image will not show on your page until you fix correct path of images. In our theme correct the image path in following files.

_Banner.cshtml – >img src=”~/Content/images/templatemo_image_01.jpg” alt=”image 1″ /<
_Sidebar.csthml – Correct all the images path by adding ~/Content/ prefix in the path.

Example

images/templatemo_image_01.jpg
to
~/Content/images/templatemo_image_01.jpg

Step 5 Open _TopMenu.cshtml and add link for all pages.

Step 6. Remember, These links will not work until you add controller for them. So, right click on Controllers Add Controller.
Step 7. Add following code in the HomeController.cs

That’s It. You have designed your Master Web Pages in MVC 5 with External CSS HTML Template. Now, debug your program and enjoy Output. You will see that website has regular look for all the pages. The header, footer and sidebar are same for all the pages but content area is different.

If you face any problem creating Master Page Layout in MVC feel free to ask your query in Comment.

If this article is helpful for you Please like our Facebook Page.