How to display a partial view in the main view ASP.NET CORE MVC

Question

I have a Main View: Edit Test and I want to render another View in this Main View as a partial View.. The Partial View contains a basic table. I am also passing some model detail to this new view. The edit / main view for my project is:

@model EditTestModel

<div class="container">
    <div style="float:right">
        <a asp-action="Index" class="btn btn-sm btn-outline-dark">Back</a>
    </div>
</div>
<hr />
@using (Html.BeginForm("SaveTest", "Test", FormMethod.Post))
{
    <div class="form-group">

        //... some view

    </div>
}
@if (Model.Test != null && Model.Test.TestId != 0)
{
    <div class="row">
        <div class="col-sm-8">
            <label>Steps</label>
        </div>
        <div class="col-sm-4">
            <div class="btn-group" style="float:right">
                
                 //...some buttons

            </div>
        </div>
    </div>
    @foreach (var stepPanel in Model.Steps)
    {
        <div>
            **<partial name="_TestStepPanel.cshtml" model="stepPanel" />**
        </div>
    }
}


<script type="text/javascript">
    $(document).ready(function () {
    });
</script>
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

My partial view is:

@model IEnumerable<Steps>

<table class="table table-responsive-sm">
    <thead class="thead-light">
        <tr>
            <th class="col-sm-auto">
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th class="col-sm-auto">
                @Html.DisplayNameFor(model => model.UpdateUser)
            </th>
        </tr>
    </thead>
    <tbody>
@foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.UpdateUser)
            </td>
        </tr>
}
    </tbody>
</table>

Any directions or help for me to achieve this would be of great help..

mj1313 · Accepted Answer · 2020-06-25 08:41:58Z

1

Your partial view accept a IEnumerable type model, you can pass Model.Steps to it in your main view:

@await Html.PartialAsync("_TestStepPanel", Model.Steps);

And I don't think you should put it in a foreach loop.

For more details, yo can refer to the document.

answered Jun 25, 2020 at 8:41

mj1313

8,5172 gold badges17 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to display a partial view in the main view ASP.NET CORE MVC

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related