The model item passed into the dictionary is of type, but this dictionary requires a model item of type 'System.Collections.Generic.IEnumerable`

Question

I Have two views one a list of Membership Types and one a Create for membership Types.

Both work fine as separate views however I want to combine them so that there is a list of Membership Types followed by a form to create one in the same view.

Ive converted the list view to a partial view to reference in the create view but I get the following error:

Additional information: The model item passed into the dictionary is of type 'GRCWebApp.ViewModels.ListMembershipTypeViewModel', but this dictionary requires a model item of type 'System.Collections.Generic.IEnumerable`1[GRCWebApp.ViewModels.ListMembershipTypeViewModel]'.

The List Controller is:

public ActionResult ListClubMembershipType(int clubId)
{
        var types = from s in db.MembershipTypes
          where (s.ClubId == clubId)
          orderby s.Type
          select s;
    var model = types.Select(t => new ListMembershipTypeViewModel
    {
        Type = t.Type,
            ClubId = clubId
    });
        return PartialView("_ListClubMembershipType", model);    
}

The create controller is:

public ActionResult AddClubMembershipType(NewMembershipTypeViewModel model, int clubId)
{
        model.ClubId = clubId;
        return View(model);
}

The List Viewmodel is:

public class ListMembershipTypeViewModel
{
    [Display(Name = "Type")]
    public String Type { get; set; }

    public int ClubId { get; set; }
}

The create Viewmodel is:

public class NewMembershipTypeViewModel
{
    [Required]
    [Display(Name = "Type")]
    [StringLength(350, ErrorMessage = "Membership Type Name cannot be longer than 350 characters.")]
    public String Type { get; set; }

    [Display(Name = "Description")]
    [StringLength(350, ErrorMessage = "Interest Name cannot be longer than 350 characters.")]
    public String Description { get; set; }

    public int ClubId { get; set; }
}

And the View for List:

@model IEnumerable<GRCWebApp.ViewModels.ListMembershipTypeViewModel>

<table class="table">
<tr>
    <th>
        @Html.DisplayNameFor(model => model.Type)
    </th>
</tr>

@foreach (var item in Model) {
<tr>
    <td>
        @Html.DisplayFor(modelItem => item.Type)
    </td>
</tr>
}

</table>

And the create view with partial reference is:

@model GRCWebApp.ViewModels.NewMembershipTypeViewModel

@Html.Partial("_ListClubMembershipType", new  GRCWebApp.ViewModels.ListMembershipTypeViewModel())

@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.Type, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Type, new { htmlAttributes = new {  @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Type, "", new { @class =  "text-danger" })
        </div>
    </div>

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

    <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>
}

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

Answer 1

There are numerous ways you could do this, but for maximum flexibility (to allow you to just render the form, or just render the collection of to include both, then you can make use of @Html.Action()

Create a new controller method

public ActionResult Combined(int clubId)
{
  ViewBag.ClubID = clubId;
  return View();
}

and in the view

@Html.Action("ListClubMembershipType", new { clubId = ViewBag.ClubID })
@Html.Action("AddClubMembershipType", new { clubId = ViewBag.ClubID })

and remove the @Html.Partial() from your existing Create view

Note: Your AddClubMembershipType() should not include a parameter for NewMembershipTypeViewModel model

Or based on your existing Create view, replace @Html.Partial() with

@Html.Action("ListClubMembershipType", new { clubId = Model.ClubID })

Answer 2

Your List partial view requires an IEnumerable of ListMembershipTypeViewModel :

@model IEnumerable<GRCWebApp.ViewModels.ListMembershipTypeViewModel>

But you're passing it a single ListMembershipTypeViewModel :

@Html.Partial("_ListClubMembershipType", new  GRCWebApp.ViewModels.ListMembershipTypeViewModel())

You'll want to change your NewMembershipTypeViewModel to something like this:

public class NewMembershipTypeViewModel
{
    [Required]
    [Display(Name = "Type")]
    [StringLength(350, ErrorMessage = "Membership Type Name cannot be longer than 350 characters.")]
    public String Type { get; set; }

    [Display(Name = "Description")]
    [StringLength(350, ErrorMessage = "Interest Name cannot be longer than 350 characters.")]
    public String Description { get; set; }

    public int ClubId { get; set; }

    public List<ListMembershipTypeViewModel> TypeList { get; set; }
}

Populate that object in the controller with the items you want to display, and then change the line in your view to:

@Html.Partial("_ListClubMembershipType", model.TypeList)

Answer 3

Its because your model in your view isnt an IEnumerable. In the other view you got it correct. Update your code in the partial view from

@model GRCWebApp.ViewModels.NewMembershipTypeViewModel

to

@model IEnumerable<GRCWebApp.ViewModels.NewMembershipTypeViewModel>

Or you have to change the controller content of ListClubMembershipType.