How to render two typed Views on an Index()?

Question

I’m trying to render two views created with the scaffolding, one is for the Create and another is for the List.

The idea is to join in index the following:

@model BraveryBranded.ASP.Models.News

@{
    ViewBag.Title = "Index";
}

@RenderPage("~/Areas/Admin/Views/News/New.cshtml")
<hr/>
@RenderPage("~/Areas/Admin/Views/News/List.cshtml")

This generating an error talking about the models. Below is the print:

This is my List:

@model IEnumerable<BraveryBranded.ASP.Models.News>

@{
    ViewBag.Title = "Lista";
}

<h2>@ViewBag.Title</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.IDNews)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Title)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Description)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.PostDate)
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.IDNews)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Title)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Description)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.PostDate)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
                @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
                @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
            </td>
        </tr>
    }

</table>

And this is mine Create:

@model BraveryBranded.ASP.Models.News

@{
    ViewBag.Title = "Adicionar";
}

<h2>@ViewBag.Title</h2>

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

    <fieldset>
        <legend>News</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.IDNews)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.IDNews)
            @Html.ValidationMessageFor(model => model.IDNews)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Title)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Title)
            @Html.ValidationMessageFor(model => model.Title)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Description)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Description)
            @Html.ValidationMessageFor(model => model.Description)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.PostDate)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.PostDate)
            @Html.ValidationMessageFor(model => model.PostDate)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

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

Code of Controller News:

public ActionResult Index()
{
    return View();
}

public ActionResult List()
{
    var list = UpdateList();
    return View(list);
}

public ActionResult New()
{
    return View();
}

Answer 1

Luiz, I think that you don’t want the RenderView, but rather the RenderAction. I’ll assume that in my answer, if I’m wrong tell me, okay?

The RenderView will only try to bring the code from that view to where he was called. He will not go through the equivalent action, which is why I think it is not his intention. The RenderAction, on the other hand, it will execute the action and all the code that is inside it, only then to give you the resulting HTML.

Just this change is easy to make, see:

@{
    Html.RenderAction("New", "SeuController");
    Html.RenderAction("List", "SeuController");
}

However, doing just that can bring an unwanted result. If your project has a layout file, each page will be loaded completely, which will break your design. What would be an interesting solution? To be able to load each page alone or all on this single page. To do this, let’s change the actions, like this:

public ActionResult List(bool partial = false)
{
    var list = UpdateList();

    if(partial)
        return PartialView(list);
    else
        return View(list);
}

And the call we changed to

@{
    Html.RenderAction("New", "SeuController", new { partial = true });
    Html.RenderAction("List", "SeuController", new { partial = true });
}

Is that clear? By forcing the return PartialView, it will not load the HTML from the layout, only the one generated on the page. And since we use an optional attribute, the usual calls will not be affected.

Answer 2

As indicated in the error message, your view is modelled on an object in the class BraveryBranded.ASP.Models.News but apparently you’re passing a List<BraveryBranded.ASP.Models.News>.

Validate whether your controller is passing the correct object or whether your view setting that aggregates both should not be @model IEnumerable<BraveryBranded.ASP.Models.News>.

Note that the Renderpage method has the possibility to receive the view model as a parameter, for example @RenderPage("~/Areas/Admin/Views/News/List.cshtml", new BraveryBranded.ASP.Models.News[]{ Model } )