Wednesday, 31 December 2014

MVC4 Razor: Show Multiple Models in a Single View using dynamically created object.

Suppose I have two models, Course and Student, and I need to display a list of courses and students within a single view. How can we do this? Below is the solution

 Model(Student.cs):
using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MVCMultipleModelsinView.Models
{
    public class Student
    {
        public int studentID { get; set; }
        public string studentName { get; set; }
        public string EnrollmentNo { get; set; }
        public string courseName { get; set; }

        public List<Student> GetStudents()
        {
            List<Student> students = new List<Student>();
            students.Add(new Student { studentID = 1, studentName = "Kishore", EnrollmentNo = "K0001", courseName =".NET"});
            students.Add(new Student { studentID = 2, studentName = "Satya", EnrollmentNo = "K0002", courseName = "MVC" });
            students.Add(new Student { studentID = 3, studentName = "Raghav", EnrollmentNo = "K0003", courseName = "Silverlight" });
            return students;
        }
    }

}


Model(Course.cs):
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MVCMultipleModelsinView.Models
{
    public class Course
    {
        public int courseID { get; set; }
        public string courseCode { get; set; }
        public string courseName { get; set; }

        public List<Course> GetCourses()
        {
            List<Course> Courses = new List<Course>();
            Courses.Add(new Course { courseID = 1, courseCode = "CNET", courseName = ".NET" });
            Courses.Add(new Course { courseID = 2, courseCode = "CMVC", courseName = "MVC" });
            Courses.Add(new Course { courseID = 3, courseCode = "CSVR", courseName = "Silverlight" });
            return Courses;
        }
    }
}

Controller (CourseStudentController.cs):
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Dynamic;
using MVCMultipleModelsinView.Models;

namespace MVCMultipleModelsinView.Controllers
{
    public class CourseStudentController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "Welcome!";
            dynamic model = new ExpandoObject();
            Student stu = new Student();
            model.students = stu.GetStudents();
            Course crs = new Course();
            model.courses = crs.GetCourses();
            return View(model);
        }

    }
}


View(Index.cshtml):
@using MVCMultipleModelsinView.Models;
@{
    ViewBag.Title = "Index";
}
<h2>@ViewBag.Message</h2>
<style type="text/css">
table
    {
        margin: 4px;
        border-collapse: collapse;
        width: 500px;
        font-family:Tahoma;
    }
    th
    {
        background-color: #990000;
        font-weight: bold;
        color: White !important;
    }
    table th a
    {
        color: White;
        text-decoration: none;
    }
    table th, table td
    {
        border: 1px solid black;
        padding: 5px;
    }
</style>
<p>
    <b>Student List</b></p>
<table>
    <tr>
        <th>
            Student Id
        </th>
        <th>
            Student Name
        </th>
        <th>
            Course Name
        </th>
        <th>
            Enrollment No
        </th>
    </tr>
    @foreach (Student stu in Model.students)
    {
        <tr>
            <td>@stu.studentID
            </td>
            <td>@stu.studentName
            </td>
            <td>@stu.courseName
            </td>
            <td>@stu.EnrollmentNo
            </td>
        </tr>
    }
</table>
<p>
    <b>Course List</b></p>
<table>
    <tr>
        <th>
            Course Id
        </th>
        <th>
            Course Code
        </th>
        <th>
            Course Name
        </th>
    </tr>
    @foreach (Course crs in Model.courses)
    {
        <tr>
            <td>@crs.courseID
            </td>
            <td>@crs.courseCode
            </td>
            <td>@crs.courseName
        </tr>
    }
</table>


 The output of the above code as shown in the below figure.
You can download the code by clicking on the below Download image. 

"If you like my blog or articles, you can appreciate by leaving your comments or Liking my Facebook page Aspdotnet-kishore, following on Google+ Aspdotnet-Kishore, Twitter on AspdotnetKishore, Linked in Aspdotnet-Kishore, stumbling my posts on stumble upon and subscribing on RSSfeed Aspdotnet-Kishore for free updates directly to your Email inbox . Watch my blog for more articles."

1 comment:

  1. Nice Blog,
    Thanks for the piece of code. I was searching for this, You were helpful.
    eCommerce Solution Provider India

    ReplyDelete

© 2012-2014 Aspdotnet-Kishore.blogspot.com. All Rights Reserved.
The content is copyrighted to Kishore and may not be reproduced on other websites without permission from the owner.