Having problem using the viewmodel in the view-CodePudding

So I am trying to use a viewmodel in one of my Views but I am getting a InvalidOperationException: The model item passed into the ViewDataDictionary is of type 'SchoolProject.Models.Student', but this ViewDataDictionary instance requires a model item of type 'SchoolProject.ViewModels.StudentViewModel'.

Here is my models that forms the view model :

Student.cs

public class Student {

    [Key]
    public int StudentID { get; set; }
    [Required]
    public string Name { get; set; }
    public string Surname { get; set; }
    public int? Age { get; set; }

    public ICollection<Enrollment> Enrollments { get; set; }



}

Course.cs

public class Course
{
    [DatabaseGenerated(DatabaseGeneratedOption.None)]
    public int CourseID { get; set; }
    public string? Title { get; set; }
    public int Credit { get; set; }

    public ICollection<Enrollment> Enrollments { get; set; }


}

And the StudentViewModel :

public class StudentViewModel
{
    public Student Student { get; set; }
    public List<Course> Courses { get; set; }

}

The action method :

public async Task<IActionResult> Details(int id)
    {
        
        var student = await _context.Student.FirstOrDefaultAsync(m => m.StudentID == id);
        return View(student);
    }

Lastly, The view :

@model SchoolProject.ViewModels.StudentViewModel
@{
IEnumerable<Course> courses = ViewData["Courses"] as IEnumerable<Course>;

}

<html>
<body>
    <h1 style="text-align : left" >Öğrenci Bilgileri</h1>
    <br></br>
    <br></br>
    <p  style=" display : inline-block">Öğrenci Adı : </p>
    <p  style="display : inline-block"> @Html.DisplayFor(model => model.Student.Name)</p>
    <br></br>
    <p  style=" display : inline-block">Öğrenci Soyadı : </p>
    <p  style="display : inline-block"> @Html.DisplayFor(model => model.Student.Surname)</p>
    <br></br>
    <p  style=" display : inline-block">Öğrenci Yaşı : </p>
    <p  style="display : inline-block"> @Html.DisplayFor(model => model.Student.Age)</p>
    <h1 style="position : absolute; top : 80px; left: 700px"> Öğrencinin Aldığı dersler</h1>
    <div style="position : absolute; left : 600px; top: 100px" ></div>
@foreach(var ders in Model.Courses)
{
    @Html.DisplayFor(modelItem => ders.CourseID)
}
<table >
        <thead>
            <tr>
                <td>
                    Dersler
                </td>
                <td>
                    Kredi
                </td>
            </tr>
        </thead>
        <tbody>
        @foreach(var course in Model.Courses)
        {
            <tr>
                <td>
                    @Html.DisplayFor(model => course.Title)
                </td>
                <td>
                    @Html.DisplayFor(model => course.Credit)
                </td>
            </tr>
        }
    </tbody>
    </table>
</body>

I know I do not even return a viewmodel instance in the action method, but I just simply do not know how can I do that. I am looking forward to learn how to implement viewmodels to view.

CodePudding user response：

you should pass StudentViewModel into the view like this :

var student = await _context.Student.FirstOrDefaultAsync(m => m.StudentID == id);
var cousre = await _context.course(/*on related student column*/).ToListAsync();    
return View(  new StudentViewModel{
Student = student , 
Courses  = cousre
});