Saturday, June 18, 2016

End-to-End ASP.NET MVC : Create an ASP.NET MVC Empty Project

A lot of people think that you can only create one kind of ASP.NET MVC project, the one with the sample application. But the reality is that you can create an Empty ASP.NET MVC, you just need to do more work. However, it is cleaner and you can add what you need, instead of having everything in place already like the default template. So you might run into more errors with the empty project, but I think you will learn more about MVC than if you just have the default template. Plus it's more streamline. I always start with an empty project on my MVC projects. In order to follow this tutorial you must have Visual Studio 2017 installed.

Step-By-Step Instructions:

Create a new project in Visual Studio call "NorthwindCafe", by clicking on File → New → Project
Select Visual C# → Web → ASP.NET Web Application, in the "Name:" field type the name "NorthwindCafe", then click "OK"

3. On the next screen select "Empty" on the "Select a template" menu, then under "Add folders and core references for:", check the "MVC" checkbox.

4. Your empty ASP.NET MVC project is created in Visual Studio 2017

5. We are not done yet, since this is an empty project we will get an error if we try to run the application. Hit "Ctrl+F5" to run the application. You will get this message

Server Error in '/' Application.

The resource cannot be found.

Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly.

Requested URL: /

Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.7.3056.0

The reason you are getting a 404 error is because there's no "Controller" or "View" to browse to. Since we just created a bare bones ASP.NET MVC project.

6. So to get the application to run we will create a simple Controller and View in the MvcApp project.

7. Right click on the "Controller" folder and select "Add" → "Controller"

8. On the "Add Controller" screen type "HomeController" on the "Controller name" text box and select "Empty MVC controller". We just want to keep things simple for this blog. Then click "Add"

9. You see the "HomeController.cs" class being added to the "Controllers" folder

10. Double click on the "HomeController.cs" file and you will see the following code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace NorthwindCafe.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }

    }
}

11. Right click on the "Index()" method and select "Add View"

12. Uncheck the "Use a layout or master page" checkbox. Accept the default settings, MVC uses conventions so the view has the same name as the method name in the "HomeController.cs" file which is "Index()", then click "Add"

13. In the "Views" folder you see that the "Home" folder has been created with the view "Index.cshtml", the .cshtml extension means that the view uses the C# syntax.

14. Double click on the view "Index.cshtml" and type "Hello World" between the <div> tag like the markup below

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
        Hello World!
    </div>
</body>
</html>

15. Press Ctrl+F5 to run the application, you will see the following.