Step-By-Step Instructions:
- Create a new project in Visual Studio call "MvcApp", by clicking on File → New → Project
- Select Visual C# → Web → ASP.NET Web Application, in the "Name:" field type the name "MvcApp", 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.
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.0.30319.34212
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 5 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 MyMVC4.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.
16. Now that we have a working empty ASP.NET MVC 5 project, we need add the items to the projects manually. You might have noticed that we are missing the "Scripts" folder. What we want to do is add the "Scripts" folder manually from an existing ASP.NET MVC 5 regular project. I usually zip up the "Scripts" folder and added it to the empty ASP.NET MVC 5 project. Here is the "Scripts" folder zipped up.
Scripts.zip
17. To add the "Scripts" folder to the MvcApp application that we've just created, download the Scripts.zip file then extract it. Make sure you choose the option to "Extract here.." on your unzip utility program.
You have the following folders, make sure that when you extracted the .zip file that "Scripts" is the root folder and there's only one level to the folder. If you select "Extract to Scripts\" option on the unzip utility you will get two nested "Scripts" folder, which is something we don't want.
18. Now drag the extracted "Scripts" folder to Visual Studio at the top level of the MvcApp folder
As you can see now we have the "Scripts" folder in our empty project, which is not so empty anymore.
No comments:
Post a Comment