Asp.Net Mvc Introduction To Views Complete Guide

Step-by-Step Guide: Introduction to Views in ASP.NET MVC

Prerequisites:

• Basic understanding of C# and .NET Framework.
• Visual Studio 2019 or later installed on your system.
• Familiarity with creating a new project in Visual Studio.

Objective:

To create an ASP.NET MVC application and understand how views work in the MVC architecture.

Step 1: Create a New ASP.NET MVC Project

1. Open Visual Studio.
2. Go to File > New > Project.
3. Select ASP.NET Web Application from the list of templates.
4. Enter MyFirstMVCApp as the name of the project, choose the location where you want to save it, and click Create.
5. In the new project setup dialog, select .NET Framework, choose ASP.NET MVC template, and click Create.

Step 2: Understand the Generated Structure

After the project is created, you will find several folders and files:

• Controllers: Contains controller classes.
• Views: Contains view files for each controller.
• Models: Contains model classes.
• Global.asax.cs: Contains application-level events.
• Web.confiig: Contains all the settings needed by the web application.

Step 3: Create a Controller

Let’s create a new controller to handle requests.

1. Right-click the Controllers folder in Solution Explorer.
2. Choose Add > Controller.
3. In the Add Controller dialog, choose MVC 5 Controller - Empty and enter HomeController.
4. Click Add.

HomeController.cs

using System.Web.Mvc;

namespace MyFirstMVCApp.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }
    }
}

Step 4: Create a View

Now let's create a view that corresponds to the Index action method we just defined.

1. In HomeController.cs right-click inside the Index() method.
2. Choose Add View.
3. Make sure the View Name matches the action method name (Index).
4. Select "Empty" template and make sure the “Use a layout page?” checkbox is unchecked (for simplicity).
5. Click Add.

Index.cshtml

A new file Index.cshtml will be generated inside the Views/Home folder.

@{
    ViewBag.Title = "Home Page";
}

<h2>Welcome to My ASP.NET MVC Application!</h2>
<p>This is your first MVC view.</p>

Step 5: Configure Routing to Use the New Controller and View

By default, routes are configured to use the HomeController and Index view. However, it’s useful to verify this.

RouteConfig.cs

Navigate to App_Start/RouteConfig.cs.

using System.Web.Mvc;
using System.Web.Routing;

namespace MyFirstMVCApp
{
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );
        }
    }
}

Step 6: Run the Application

1. Press F5 or click on the Start button in Visual Studio.
2. The application should launch in your default web browser, showing:

   Welcome to My ASP.NET MVC Application!
   This is your first MVC view.
   

Step 7: Pass Data to Views Using ViewBag and ViewData

To display dynamic data in our views, let’s pass some data from our controller to the view using ViewBag.

Updated HomeController.cs (with data passing)

using System.Web.Mvc;

namespace MyFirstMVCApp.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            ViewBag.Message = "Hello, welcome to the ASP.NET MVC application!";
            return View();
        }
    }
}

Updated Index.cshtml (to use ViewBag)

@{
    ViewBag.Title = "Home Page";
}

<h2>@ViewBag.Message</h2>
<p>This is your first MVC view.</p>

Run the application again. You should now see the message:

Hello, welcome to the ASP.NET MVC application!
This is your first MVC view.

Step 8: Strongly Typed Views

Using ViewBag and ViewData is one way to pass data to views, but you can also use strongly typed views which offer type safety and IntelliSense features.

1. Right-click the Models folder in Solution Explorer.
2. Choose Add > Class.
3. Enter MessageModel.cs as the name of the new class.

MessageModel.cs

namespace MyFirstMVCApp.Models
{
    public class MessageModel
    {
        public string Message { get; set; }
    }
}

4. Update the HomeController.cs to use MessageModel.

Updated HomeController.cs

using MyFirstMVCApp.Models;
using System.Web.Mvc;

namespace MyFirstMVCApp.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            var model = new MessageModel
            {
                Message = "Hello, welcome to the ASP.NET MVC application!"
            };

            return View(model);
        }
    }
}

5. Delete the existing Index.cshtml in Views/Home and create a new strongly typed view:

Right-click on Index() method in HomeController.cs > Add View

• Set View Name to Index.
• Select Template to Empty.
• Uncheck “Use a layout page?”.
• Choose MyFirstMVCApp.Models.MessageModel for Model class.
• Click Add.

Updated Index.cshtml (strongly typed)

@model MyFirstMVCApp.Models.MessageModel

@{
    ViewBag.Title = "Home Page";
}

<h2>@Html.DisplayFor(m => m.Message)</h2>
<p>This is your first MVC view.</p>

Run your application once more. You should see exactly the same output as before: