Post
Ask Question

Introduction to MVC Web Site in Visual Studio

Introduction

This article describes creation of MVC Web Sites. As you know, there is no option available to create the MVC Web Sites in the Visual Studio 2013.

In that context, using ASP.NET Frameworks (3.5 and above), Visual Studio allows you to create the ASP.NET Web Applications with the MVC Project Templates. This article explains that the model and controllers are defined in the App_Code folder and the web form takes place of the view. The Global.asax file is to be used to define the route maps.

So let's proceed to create the website with the following procedure.

Step 1: Open Visual Studio IDE.

Step 2: Create the ASP.NET Empty Web Site.

Create Empty Web Site

Step 3: Open the Web.Config file and modify it with the following code: 

  1. <configuration>  
  2.   <system.web>  
  3.     <compilation debug="true" strict="false" explicit="true" targetFramework="4.5">  
  4.       <assemblies>  
  5.         <add assembly="System.Web.Abstractions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>  
  6.         <add assembly="System.Web.Routing, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>  
  7.         <add assembly="System.Web.Mvc, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>  
  8.       </assemblies>  
  9.     </compilation>  
  10.     <httpRuntime targetFramework="4.5"/>  
  11.     <pages>  
  12.       <namespaces>  
  13.         <add namespace="System.Web.Mvc"/>  
  14.         <add namespace="System.Web.Mvc.Ajax"/>  
  15.         <add namespace="System.Web.Mvc.Html"/>  
  16.         <add namespace="System.Web.Routing"/>  
  17.       </namespaces>  
  18.     </pages>  
  19.   </system.web>  
  20. </configuration>  

Step 4: Add class named CricketerModel by right-clicking in your website.

Adding Class in App Code

Step 5: Replace the boilerplate code with the following code:

  1. using System;  
  2. public class CricketerModel  
  3. {  
  4.     public int ID { get; set; }  
  5.     public string Name { get; set; }  
  6.     public string Team { get; set; }  
  7.        public CricketerModel() { }  
  8.     public CricketerModel(int CricId, string CricName, string CricTeam)  
  9.     {  
  10.         this.ID = CricId;  
  11.         this.Name = CricName;  
  12.         this.Team = CricTeam;  
  13.     }  
  14. }
Step 6: Add another class named CricketerController and replace the code with the following code: 
  1. using System.Collections.Generic;  
  2. using System.Web.Mvc;  
  3. public class CricketerController : Controller  
  4. {  
  5.     public ActionResult List()  
  6.     {  
  7.         List<CricketerModel> CricItems = new List<CricketerModel>();  
  8.         CricItems.Add(new CricketerModel(1, "Sachin", "India"));  
  9.         CricItems.Add(new CricketerModel(2, "Ricky", "Australia"));  
  10.         CricItems.Add(new CricketerModel(3, "Sanath", "SriLanka"));  
  11.         CricItems.Add(new CricketerModel(4, "Wasim", "Pakistan"));  
  12.         ViewData["CricList"] = CricItems;  
  13.         return View("~/CricketerView.aspx");  
  14.     }  
  15. }  

Step 7: Add a Global.asax file to your web site by right-clicking on your website and adding a new item as in the following:

globalfile image

Step 8: Find the Application_Start() and paste the following code into it:

  1. RouteTable.Routes.IgnoreRoute("{resource}.axd/{*pathInfo}");  
  2.         RouteTable.Routes.MapRoute(  
  3.          "Default",  
  4.          "{controller}/{action}/{id}",  
  5.          new  
  6.          {  
  7.              controller = "CricketerController",  
  8.              action = "List",  
  9.              id = UrlParameter.Optional  
  10.          }  
  11.         );  

Step 9: Add a WebForm named CricketerView and replace the code with the following code:

  1. <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>  
  2.  <!DOCTYPE html>  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <title>Cricketer View</title>  
  6. </head>  
  7. <body>  
  8.     <form id="form1" runat="server">  
  9.     <div>  
  10.     <table>  
  11.         <tr>  
  12.             <th>Cricketer ID</th>  
  13.             <th>Cricketer Name</th>  
  14.             <th>Cricketer Team</th>  
  15.         </tr>  
  16.         <%  
  17.             List<CricketerModel> CricItems = (List<CricketerModel>) ViewData["CricList"];  
  18.         %>  
  19.         <% foreach (var item in CricItems)  
  20.            { %>  
  21.         <tr>  
  22.             <td><%= item.ID %></td>  
  23.             <td><%= item.Name %></td>  
  24.             <td><%= item.Team %></td>  
  25.         </tr>  
  26.         <% } %>  
  27.     </table>  
  28.     </div>  
  29.     </form>  
  30. </body>  
  31. </html> 

We have created the CricketerView to display the contents of our website. Now we are about to use our MVC Web Site. So, proceed to the next section.

Using Visual Studio Template

Now just use the following procedure to use the website as a Visual Studio Template:

Step 1: "File" -> "Export Template"

Export Template in Visual Studio

Step 2: As you can see, the options are filled in as a default, if not then please select the option.

WebSite in Export Template Wizard

Step 3: Describe the template (Optional).

Export Template Wizard in Visual Studio

Step 4: Check out the Template after restarting Visual Studio.

Template in Visual Studio

Summary

This article will help you to create and work with your Visual Studio Template. It also describes the creation of the MVC Web Sites that is generally available for the ASP.NET Web Applications. Thanks for reading.


Similar Articles