Two partial views with data from different models but displayed on a same View

Question

I've a table/model structure similar to following where parent table PT has two children tables C1 and C2 both of which have different columns except a FK column pointing to PK column. I need to display a View with data in two HTML tables for each of the children tables. How can I achieve this? The problem is on how to pass two models (one for each partial view) from the same action method. Each partial view has one single record to display. Note: I can display each partial view in two different views each having its own model. But how to achieve the above?

Parent table PT columns: PK_col, col1, col2

Child table C1 columns: FK_col, col3, col4

Child table C2 columns: FK_col, col5, col6

View:

...
@Html.Partial("PartialVW_1")
...
@Html.Partial("PartialVW_2")
....

Answer 1

Hi nam its actually very simple, that is

how to pass two models (one for each partial view) from the same action method?

You can pass a model into a partial view by using below example. This can be the page's view model, or some portion of it, or a custom object.

Example:

@Html.Partial("PartialName", viewModel)

In your case your views should be:

Main view:

@model PT
{

@Html.Partial("PartialVW_1",Model.C1)
@Html.Partial("PartialVW_1",Model.C2)
}

Partial view 1:

@model c1
{
}

Partial View 2:

@model c2
{
}

Note : if you have correct parent child relationship through model ,then it will give the data according PK and FK constraint.

Additional info: [FYI]

If you want to pass the different multiple objects or complex objects to the view ,you can also use the concept of ViewModel in mvc.

Useful link for viewmodel:

http://www.dotnettricks.com/learn/mvc/understanding-viewmodel-in-aspnet-mvc

https://docs.microsoft.com/en-us/aspnet/mvc/overview/older-versions/mvc-music-store/mvc-music-store-part-3

Hope above was helpful to solve the problem,kindly let me know your thoughts or feedbacks

Thanks

Karthik

Answer 2

Create parent model with two child model. see below code i hope this helps you.

public class ParentModel
{
    public Int64 PK { get; set; }
    public string col1 { get; set; }
    public Int64 col2 { get; set; }
    public string col3 { get; set; }
    public List<ChildTable1> ChildTable1 { get; set; }
    public List<ChildTable2> ChildTable2 { get; set; }
}
public class ChildTable1
{
    public Int64 PK { get; set; }
    public string col1 { get; set; }
    public Int64 col2 { get; set; }
    public string col3 { get; set; }


}
public class ChildTable2
{
    public Int64 PK { get; set; }
    public string col1 { get; set; }
    public Int64 col2 { get; set; }
    public string col3 { get; set; }
}

parent view

@model ParentModel


@using (Html.BeginForm("Action", "Controller"))
{
    @{Html.RenderPartial("~/Views/Partial1.cshtml", new { Model = Model });}
    @{Html.RenderPartial("~/Views/Partial2.cshtml", new { Model = Model });}
}

On Partial view 1

@model ParentModel
<table>
    <tbody>
        <tr>
            <th>col1</th>
            <th>col2</th>
            <th>col3</th>
        </tr>
        @foreach (var item in Model.ChildTable1)
        {
            <tr>

                <td>@item.col1</td>
                <td>@item.col2</td>
                <td>@item.col3</td>
            </tr>
        }
    </tbody>


</table>

On Partial view 2

@model ParentModel
<table>
    <tbody>
        <tr>
            <th>col1</th>
            <th>col2</th>
            <th>col3</th>
        </tr>
        @foreach (var item in Model.ChildTable2)
        {
            <tr>

                <td>@item.col1</td>
                <td>@item.col2</td>
                <td>@item.col3</td>
            </tr>
        }
    </tbody>


</table>

Answer 3

CREDIT goes to: I solved the problem through the help of @StephenMuecke through his comment above and through this response from @Tseng.

First, in controller I needed to load the parent PT and children C1, C2 as follows:

Controller:

....
....
PT pt = _context.PT
   .Include(c => c.C1) // Add these two lines to tell EF Core to load C1 and C2 as well
   .Include(c => c.C2) //
   .Where(c=> c.PTId== selectedId).SingleOrDefault();
....
....

Then, The model in the main view should be PT and then @Html.Partial("PartialVW_1", Model.C1) and @Html.Partial("PartialVW_2", Model.C2)