w3resource

Integrating Model, View and Controller


We have already created ActivitiesController, Model and View in the previous tutorials, but we have not integrated all these components so as to run it.

The following code snippet shows the ActivitiesController, Activity model class and View created in the previous sections.

Example: ActivitiesController

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Mvc;
using ActivityTab.Models;

namespace ActivityTab.Controllers
{
    public class ActivitiesController : Controller
    {
        private ApplicationDbContext db = new ApplicationDbContext();

        // GET: Activities
        public ActionResult Index()
        {
            return View(db.Activities.ToList());
        }
    }
}

Example: Activity Model class

using System;
using System.Linq;
using System.Web;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;

namespace ActivityTab.Models
{
    public class Activity
    {
        public int Id { get; set; }

        [Required]
        public string ActivityName { get; set; }

        [Required]
        public string Description { get; set; }

        [Required]
        public string Status { get; set; }
    }
} 

Example: Index.cshtml to display activity list

@model IEnumerable<ActivityTab.Models.Activity>

@{
    ViewBag.Title = "Index";
}

<h2>Your Activites</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.ActivityName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Description)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Status)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.ActivityName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Description)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Status)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
            @Html.ActionLink("Details", "Details", new { id=item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.Id })
        </td>
    </tr>
}

</table>

Now, to run this program successfully and display a list of activities, we need to pass a model object from controller to Index view. As you can see in the above Index.cshtml, it uses IEnumerable of Activity as a model object. So we need to pass IEnumerable of Activity model from the Index action method of ActivitiesController class as shown below.

Passing Model from Controller

public ActionResult Index()
{
    var activityList = new List<Activity>{
new Activity() {Id = 1,ActivityName = "Learn C#", Description ="Read W3school",Status="Done"} , new Activity() {Id = 2, ActivityName = "Write some articles", Description ="On C# for W3school" , Status="Not Done"} ,
new Activity(){Id=3, ActivityName = "Learn C#", Description ="Read W3school" , Status="Done" }                           
 };
 	return View(db.ActivityList);
 }

As you can see in the above code, we have created a List of activities objects for an example purpose, since we are yet to integrate a database (in real life project, you can fetch these activites from a database).

We then pass this list object as a parameter in the View() method. The View() method is defined in base Controller class, which automatically binds model object to the view.

Now, we can run our MVC project by pressing F5 and navigate to http://localhost/Activities. on our browser to view the list of activities as shown in the code snippet below.

asp.net passing model from controller


Inviting useful, relevant, well-written and unique guest posts