How to fix error "System.InvalidOperationException" in a partial view

Question

Hello I'm trying to add a database entry form into a modal that's on a page that displays info retrieved from my database, I've created a scaffold template using visual studios and it contains all the model information in it, I then put that into a partial view to display it through the model but I keep getting this error:

System.InvalidOperationException

The model item passed into the dictionary is of type 'System.Collections.Generic.List`1[TerminalHost.Models.buildingInfo]', but this dictionary requires a model item of type 'TerminalHost.Models.buildingInfo'"

Here is my homepage:

@model IEnumerable<TerminalHost.Models.buildingInfo>

@{
ViewBag.Title = "Home Page";
}
<h3>We suggest the following:</h3>
<ol class="round">
<li class="one">
    <h5>Please begin creating your network structure:</h5> 
    <button id="modal-opener">Add a new building</button>
</li>
<li class="two">

</li>
</ol>

<div class="Container">

    <div class="Box1">
        @foreach (var item in Model)
        {<div>
            <h4 class="Heading">@item.buildingName</h4>
            <h4 class="Heading">@item.buildingNumber</h4>
            <p>@item.buildingDesc1</p>
            <p>@item.buildingDesc2</p>
            <p>@item.buildingDesc3</p>
        </div>
        }
    </div>
    ....
</div>

<div id="Modal" title="Building Details">

@Html.Partial("buildingForm")

</div>

Here is my Partial View:

@model TerminalHost.Models.buildingInfo

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)

<fieldset>
    <legend>buildingInfo</legend>

    <div class="editor-label">
        @Html.LabelFor(model => model.buildingNumber)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.buildingNumber)
        @Html.ValidationMessageFor(model => model.buildingNumber)
    </div>
    ....
    </div>
    <p>
        <input type="submit" value="Create" />
    </p>
 </fieldset>
}
<div>
    @Html.ActionLink("Back to List", "Index")
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}

Controller Action :

  public class HomeController : Controller
{
    thDB _db = new thDB();

    public ActionResult building()
    {
        var buildingModel = _db.buildings.ToList().FirstOrDefault();

        return View(buildingModel);
    }

    public ActionResult buildingForm()
    {
        return PartialView();
    }
}

Answer 1

Regarding what you want, you want to display the list in your main View, then you need some change in your action:

public ActionResult building()
{
    var buildingModel = _db.buildings.ToList();//you have to remove the FirstOrDefault() extension method

    return View(buildingModel);
}

And in your view, replace this line:

 @Html.Partial("buildingForm")

By this :

 @Html.Partial("buildingForm", new buildingInfo()) //

As your partial view requires an object you can pass from this line. I hope it will help.

Answer 2

The error says all what's the problem.

Your partial view expects Model of type TerminalHost.Models.buildingInfo while you are passing List<TerminalHost.Models.buildingInfo>

which means you are returning List<TerminalHost.Models.buildingInfo> but in your partial view it is :

@model TerminalHost.Models.buildingInfo

replace it with:

@model List<TerminalHost.Models.buildingInfo>

or return single object form the action.

UPDATED:

Replace Html.Partial("buildingForm") with: @Html.RenderAction("buildingForm")

and you action should be like this:

public ActionResult buildingForm() { 

var model = new buildingInfo(); 

return View(model); 

}

Your PartialView its name should be buildingForm.cshtml and it should be in Views>>Home:

@model TerminalHost.Models.buildingInfo

@{
    ViewBag.Title = "Create";
    Layout = null;
}

<h2>Create</h2>

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)

<fieldset>
    <legend>buildingInfo</legend>

    <div class="editor-label">
        @Html.LabelFor(model => model.buildingNumber)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.buildingNumber)
        @Html.ValidationMessageFor(model => model.buildingNumber)
    </div>
    ....
    </div>
    <p>
        <input type="submit" value="Create" />
    </p>
 </fieldset>
}
<div>
    @Html.ActionLink("Back to List", "Index")
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}

Your building action :

public ActionResult building()
    {
        var buildingModel = _db.buildings.ToList();

        return View(buildingModel);
    }