I'm trying to render partial view in parent view by click on the select box option. But when I access parent view the error such InvalidOperationException: The model item passed into the ViewDataDictionary is of type 'System.Collections.Generic.List1[identity_2auth_mvc.Models.Klas.Course]', but this ViewDataDictionary instance requires a model item of type 'identity_2auth_mvc.Models.Klas.NoticeUploadViewModel'
is occurred. I've referenced some related threads and tried to avoid the child model is null. However, the error isn't still resolved yet.
This is parent action in Controller
public async Task<IActionResult> Index()
{
var courses = await _context.Course.ToListAsync();
return View(courses);
}
This is child action
public IActionResult NoticePartial()
{
var noticeViewModel = LoadFiles();
if (noticeViewModel != null)
return PartialView("_NoticePartail", noticeViewModel);
return NotFound();
}
private async Task<NoticeUploadViewModel> LoadFiles()
{
var viewModel = new NoticeUploadViewModel();
viewModel.NoticesViewModel = await _context.Notice.ToListAsync();
return viewModel;
}
The models are
public class Course
{
public int CourseId { get; set; }
public string CourseName { get; set; }
public ICollection<NoticeViewModel> Notices { get; set; }
}
public class NoticeUploadViewModel
{
public AppUser AppUser { get; set; }
public List<NoticeViewModel> NoticesViewModel { get; set; }
}
And finally the views I try to render.
Index.cshtml
is parent view
@model IEnumerable<Course>
@{
ViewData["Title"] = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="container text-center">
<div class="row">
<div class="col-sm-4 form-inline">
<span>Semester</span>
<select class="custom-select">
<option>Semester</option>
</select>
</div>
<div class="col-sm-4 offset-4 form-inline">
<span>Course </span>
<select class="custom-select">
@foreach (var course in Model)
{
<option id="course_notice">@course.CourseName</option>
}
</select>
</div>
</div>
</div>
<hr />
<section class="text-center">
<div class="container">
<div class="row" id="notice_dashboard">
<partial name="_NoticePartial" />
</div>
</div>
</section>
@section Scripts
{
<script>
$(document).ready(function () {
$("#course_notice").click(function () {
$("notice_dashboard").load("/Notice?handler=Partial");
});
});
</script>
}
And _NoticePartial.cshtml
is the child view
@model NoticeUploadViewModel
@{
ViewData["Title"] = "Notice Partial";
}
<h4>Child View</h4>