Asp.Net Mvc Introduction To Models Complete Guide

Step-by-Step Guide to Introduction to Models in ASP.NET MVC

Step 1: Create a New MVC Project

1. Open Visual Studio.
2. Create a new project by selecting File > New > Project.
3. Choose ASP.NET Web Application (.NET Framework) and click Next.
4. Name your project (e.g., MvcModelExample) and click Create.
5. Select the Empty template and check the checkbox for MVC.
6. Click Create.

Step 2: Create a Model

In this example, you will create a simple model representing a person.

1. In Solution Explorer, right-click on the project name.
2. Select Add > New Folder and name it Models.
3. Right-click on the Models folder, select Add > Class, and name it Person.cs.
4. Define the properties of the Person class:

namespace MvcModelExample.Models
{
    public class Person
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public int Age { get; set; }
    }
}

Step 3: Create a Controller

Next, you will create a controller that uses the Person model.

1. Right-click on the Controllers folder in Solution Explorer, select Add > Controller.
2. Choose MVC 5 Controller - Empty and click Add.
3. Name the controller PersonController.cs and click Add.
4. Add actions to the PersonController. For simplicity, add an Index action method that creates a person object and passes it to the view. Add another action method Create that accepts form inputs to create a new person.

using System.Web.Mvc;
using MvcModelExample.Models;

namespace MvcModelExample.Controllers
{
    public class PersonController : Controller
    {
        // GET: Person
        public ActionResult Index()
        {
            var person = new Person
            {
                FirstName = "John",
                LastName = "Doe",
                Age = 30
            };
            return View(person);
        }

        // GET: Person/Create
        public ActionResult Create()
        {
            return View();
        }

        // POST: Person/Create
        [HttpPost]
        public ActionResult Create([Bind(Include = "FirstName,LastName,Age")] Person person)
        {
            if (ModelState.IsValid)
            {
                // You would usually add the person to a database here
                return RedirectToAction("Index");
            }
            return View(person);
        }
    }
}

Step 4: Create Views for Actions

Now create views that match each of these actions.

1. Create a view for Index action:

   • Right-click inside Index() action method in PersonController.
   • Select `Add View...
   • Set View Name to Index.
   • Ensure Template is set to Empty.
   • Keep Model class as Person (MvcModelExample.Models).
   • Click Add.

2. In Index.cshtml, display the person's details.

@model MvcModelExample.Models.Person

@{
    ViewBag.Title = "Index";
}

<h2>Person Details</h2>

<div>
    <dl class="dl-horizontal">
        <dt>@Html.DisplayNameFor(model => model.FirstName)</dt>
        <dd>@Html.DisplayFor(model => model.FirstName)</dd>

        <dt>@Html.DisplayNameFor(model => model.LastName)</dt>
        <dd>@Html.DisplayFor(model => model.LastName)</dd>

        <dt>@Html.DisplayNameFor(model => model.Age)</dt>
        <dd>@Html.DisplayFor(model => model.Age)</dd>
    </dl>
</div>

3. Create a view for Create action:

   • Right-click inside Create() action method in PersonController.
   • Select Add View...
   • Set View Name to Create.
   • Ensure Template is set to Create.
   • Keep Model class as Person (MvcModelExample.Models).
   • Click Add.

4. In Create.cshtml, use Html.BeginForm() to create a form that allows user input for the person's details.

@model MvcModelExample.Models.Person

@{
    ViewBag.Title = "Create";
}

<h2>Create Person</h2>

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.LastName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Age, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Age, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Age, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Step 5: Configure Routing

Ensure that routing is set up to handle requests for Person controller actions.

1. Open RouteConfig.cs located in the App_Start folder.
2. Verify the Default route is set up: