Tech Junkie Blog: End-to-End ASP.NET MVC 5 : Create an ASP.NET MVC 5 Empty Project

Saturday, June 18, 2016

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

A lot of people think that you can only create one kind of ASP.NET MVC 5 project, the one with the sample application.  But the reality is that you can create an Empty ASP.NET MVC 5, 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 2013 installed.


Step-By-Step Instructions:
  1. Create a new project in Visual Studio call "MvcApp", by clicking on File → New → Project
  2. 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.

Select Empty MVC template

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

Empty ASP.NET MVC project














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"

Visual Studio: Add a new 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"

HomeController configuration




















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

HomeController configuration

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"

Add View To Index method








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"


Index View Settings

























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.

Browse Hello World View













This blog is dedicated to getting developers started quickly with ASP.NET MVC by creating an empty ASP.NET MVC project.  By creating an empty project your are able to understand ASP.NET MVC at a deeper level.  Also you can pick and choose which features of ASP.NET MVC you want to use because you starting out with a clean slate.  So without further ado let's get to the blogs.  I will list the blogs in the order that I think will help build from one another.

  1.  ASP.NET MVC 5 : Create an ASP.NET MVC 5 Empty Project  A lot of people think that you can only create one kind of ASP.NET MVC 5 project, the one      with the sample application.  But the reality is that you can create an Empty ASP.NET MVC 5, 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.
  2. ASP.NET MVC Empty Project: Add JQuery Library Using NuGet In this blog we will add JQuery to the empty ASP.NET MVC 5 project that we've just created.
  3.  ASP.NET MVC Empty Project: Add Bootstrap Library Using NuGet  In this blog we will add the Bootstrap to the empty ASP.NET MVC 5 project.
  4. ASP.NET MVC Empty Project: Add JQuery UI Library Using NuGet  In this blog well add the JQuery UI library to the empty ASP.NET MVC 5 project.
  5. ASP.NET MVC Empty Project : _ViewStart.cshtml The Default Layout In this blog we will build on our existing MvcApp project and add a default layout view to the project so that each page in the project will have a common layout. This is similar what you would a master page for in web forms.

  6. ASP.NET MVC Empty Project : Adding BundleConfig From Scratch In this blog we will add BundleConfig for the JavaScript libraries which includes JQuery, and Bootstrap that we've added to our MvcApp project in the previous blogs. A configuration bundle allows you to group files that belongs in the same libraries together so that they can called with just one line of code..

  7. ASP.NET MVC 5 : Configure The BundleConfig Class To Use CDN A lot of developers assumed that they can only configure the BundleConfig class to use only local resources in their MVC project. That is not the case, in fact it is quite easy to use a cdn version of your JavaScript libraries instead of the one in your local folder.

  8. ASP.NET MVC : Create A Responsive Layout With Bootstrap  In this blog we will use Bootstrap to make the layout look more professional and responsive, so that it can be viewed in any screen size in an ASP.NET MVC layout.



16.  Now that we have a working empty ASP.NET MVC 5 project, we need add the items to the projects using NuGet.

74 comments:

  1. Hello,

    I followed your tutorial step by step I still get The resource cannot be found.

    I don't know what seems to be the problem.

    I am using VS express 2012 but I have added the plugin to use MVC5 so I created an epmty mvc5 project

    Thanks

    ReplyDelete
  2. What step are you stuck on? I used Visual Studio 2013 the full version so the steps might be a little different.

    ReplyDelete
  3. Actually I think I was using Visual Studio Community Edition 2013 you can get it here at https://www.visualstudio.com/en-us/news/vs2013-community-vs.aspx

    ReplyDelete
  4. Hello,

    I have the same problem of Sabrine Azouz, in the step 15 when trying to run the application, get the resource cannot be found error

    ReplyDelete
  5. I had the same trouble, but it went away when I restarted Visual Studio. I'm using VS2015 community, and everything works fine. Thanks Jason, great article.

    ReplyDelete
  6. Thank you so much for writing this. I have been looking for a long time for a set of tutorials that starts without everything auto-installed, allowing you to add things as you need them so you understand what's going on. This is fantastic.

    ReplyDelete
  7. Thanks for this. It was really helpful!

    ReplyDelete
  8. Hey, I just wanted to mention that these instructions worked perfectly using Monodevelop 5.10 on a Fedora 23 box. The only deviation from these instructions that I had to do was to create a registry directory. Like so...

    sudo mkdir /etc/mono/registry
    sudo chmod uog+rw /etc/mono/registry/

    Thanks for your efforts in putting together this tutorial!

    ReplyDelete
    Replies
    1. I'm using Debian 8.x and the directory already exists.

      Thanks!

      Delete
  9. Thanks I've been looking for good tutorial that would start from scratch. Most of the books I see use MVC template..

    ReplyDelete
  10. Thank u so much. Explained in such a easy and simple way. Really helpful.

    ReplyDelete
  11. I am using vidual studio 2015.I have created mvc empty web application.
    I have created 2 webpages in aspx.also created controller for both.
    when i buld the project one page gets loaded successfully in browser.

    On click of a buuton on one page second page shuld be loaded.like anchor tag does in html.
    Can you help me with that?

    ReplyDelete
    Replies
    1. I would recommend that you remove the .aspx page. Since this is an MVC application and razor is the view template that Microsoft is pushing. It would make your life a lot easier if you stick with razor

      Delete
  12. thanks dude. I was going bonkers trying to get a simple asp.net one page mvc website running. This got me going in the right direction

    ReplyDelete
  13. Really excellent tutorial gives very in-depth picture how actually thing works sir

    ReplyDelete
  14. hello!!!
    It is really a great work and the way in which u r sharing the knowledge is excellent.Thanks for helping me to understand basic concepts. As a beginner in asp.net programming your post help me a lot.Thanks for your informative article


    dot net training in chennai

    ReplyDelete
  15. I have read your blog and i got a very useful and knowledgeable information from your blog.You have done a great job .


    Android Training in chennai

    ReplyDelete
  16. Very Nice blog. Really helpful information about ASP …. Please keep update some more…………

    ReplyDelete
  17. Nice Post!
    Really helpful article which provide latest information about ASP.

    Thanks for sharing!!
    http://www.aspdotnetdevelopment.com

    ReplyDelete
  18. nicely explain the process to create mvc project

    ReplyDelete
  19. Nice and really helpful article to everyone... thanks for sharing your creative knowledge..keep updating such a informative Blog..
    No.1 Embedded Project Center in Chennai | No.1 MatLab Project Center in Chennai | No.1 Application Project Center in Chennai

    ReplyDelete
    Replies
    1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a .Net developer learn from Dot Net Training in Chennai. or learn thru ASP.NET Essential Training Online . Nowadays Dot Net has tons of job opportunities on various vertical industry.

      Delete
  20. Hello techjunkieblog really nice information in providing the step by step procedure of creating aspnet I, basically a PMP Certified person will be having interest in these kinds of core things I have done my PMP in Chennai where each and every persons are having strong skills in DOTNET, java and many more Well thankyou for your Blog post

    ReplyDelete
  21. see to not to 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. While Integrating with ms dynamics crm online training

    ReplyDelete
  22. I am commenting to let you know what a terrific experience I enjoyed reading through your web page. I noticed a wide variety of pieces, with the inclusion of what it is like to have an awesome helping style to have the rest without hassle grasp some grueling matters.
    Hadoop Training in Bangalore

    ReplyDelete
  23. Needed to compose you a very little word to thank you yet again regarding the nice suggestions you’ve contributed here.

    Java Training in Bangalore|

    ReplyDelete
  24. Those guidelines additionally worked to become a good way to
    recognize that other people online have the identical fervor like mine
    to grasp great deal more around this condition.

    Selenium Training in Bangalore

    ReplyDelete
  25. It’s great to come across a blog every once in a while that isn’t the same out of date rehashed material. Fantastic read.
    I’ve bookmarked your site, and I’m adding your RSS feeds to my Google account.
    selenium training in bangalore

    ReplyDelete
  26. Appreciation for really being thoughtful and also for deciding on certain marvelous guides most people really want to be aware of."Devops Training in Chennai"

    ReplyDelete
  27. Thanks for sharing the information. i really enjoyed your blog article and always read your blog.
    Technology blog, and Lifehack blog.

    ReplyDelete
  28. Your good knowledge and kindness in playing with all the pieces were very useful. I don’t know what I would have done if I had not encountered such a step like this.

    https://www.besanttechnologies.com/training-courses/software-testing-training/selenium-training-institute-in-chennai

    ReplyDelete
  29. Needed to compose you a very little word to thank you yet again regarding the nice suggestions you’ve contributed here.

    Data Science Training in Bangalore

    ReplyDelete
  30. Thanks for one marvelous posting! I enjoyed reading it; you are a great author. I will make sure to bookmark your blog and may come back someday. I want to encourage that you continue your great posts, have a nice weekend!

    Data Science Training in Bangalore

    ReplyDelete
  31. I am regular reader of your blog. Thanks for sharing your valuable and awesome information in this articles.
    Police Result

    ReplyDelete
  32. I think that aspenet is a good option though Techfileoria

    ReplyDelete
  33. I believe there are many more pleasurable opportunities ahead for individuals that looked at your site.


    Java Training in Bangalore

    ReplyDelete
  34. I feel really happy to have seen your webpage and look forward to so many more entertaining times reading here. Thanks once more for all the details.
    digital training in chennai

    ReplyDelete
  35. Needed to compose you a very little word to thank you yet again regarding the nice suggestions you’ve contributed here.
    software testing training in chennai

    ReplyDelete
  36. It has been simply incredibly generous with you to provide openly what exactly many individuals would’ve marketed for an eBook to end up making some cash for their end, primarily given that you could have tried it in the event you wanted.

    Data Science Training in Bangalore


    DataScience Training in Chennai


    ReplyDelete
  37. Nice post. Thank u so much for sharing with us.
    TBSE Madhyamik Time Table 2018

    ReplyDelete
  38. ? I believe there are many more pleasurable opportunities ahead for
    individuals that looked at your site.
    selenium training in bangalore

    ReplyDelete
  39. Needed to compose you a very little word to thank you yet again regarding the nice suggestions you’ve contributed here.

    SELENIUM TRAINING IN BANGALORE

    ReplyDelete
  40. I feel really happy to have seen your webpage and look forward to so many more entertaining times reading here. Thanks once more for all the details.
    data-science-training-in-bangalore

    ReplyDelete
  41. Thanks for splitting your comprehension with us. It’s really useful to me & I hope it helps the people who in need of this vital information.
    Android Project Center in Chennai | Android Project Center in Velachery

    ReplyDelete
  42. Those guidelines additionally worked to become a good way to
    recognize that other people online have the identical fervor like mine
    to grasp great deal more around this condition.


    aws training in bangalore



    aws training in chennai

    ReplyDelete
  43. Thank you a lot for providing individuals with a very spectacular possibility to read critical reviews from this site.
    java training in bangalore


    ReplyDelete
  44. You are Providing useful information with impressive content..keep sharing such an wonderful article.
    Robotics Project Center in Chennai | IEEE Robotics Project Center in Chennai

    ReplyDelete
  45. Reasonable and informative article, Thanks for the information provided. It looks good to know about new technology.
    Photoshop Training Institute in Chennai | Photoshop Training Institute in Velachery

    ReplyDelete
  46. Hi,

    This is a good information regarding .net project and for hosting a .net project you need .net web hosting provider SmarterAsp Coupon code 2018

    ReplyDelete
  47. This is nice post which I was awaiting for such an post and I have gained some useful information from this site.
    CorelDraw Training Institute in Chennai | Photoshop Training Institute in Chennai | CorelDraw Training Institute in Velachery

    ReplyDelete
  48. This comment has been removed by the author.

    ReplyDelete
  49. I really enjoyed while reading your article, the information you have delivered in this post was damn good. Keep sharing your post with efficient news.. Ethical Hacking Training Institute in Chennai | Ethical Hacking Training in Velachery

    ReplyDelete
  50. Thanks for splitting your comprehension with us. It’s really useful to me & I hope it helps the people who in need of this vital information.
    The Best MVC Training in TambaramMVC Training in Chennai | MVC Training institutes in Chennai

    ReplyDelete
  51. Nice..Its informative...You have clearly explained about the concept..Its very useful for me to understand..Keep on sharing..
    Best Microsoft Azure Training Institute in Chennai | Best Microsoft Azure Training Institute in Velachery

    ReplyDelete
  52. Wow looking great article with useful content and also very informative thanks for posting please do keep updating...
    Best Online Software Training Institute | Asp.Net MVC Training

    ReplyDelete


  53. I believe there are many more pleasurable opportunities ahead for individuals that looked at your site.

    Selenium Training in Porur

    ReplyDelete