ASP.NET Core 6: #Html.DropDownList analogue for one item for binding multiple models in one view - asp.net-core-mvc

Question

ASP.NET Core 6 MVC / EF model-first
Is there simple analogue of #Html.DropDownList and ViewBag to replace IDs from one model to values from another model?
I have got two models:
Model1
public int ID { get; set; } // PK
public int PersonID { get; set; } // FK
ID
PersonID
1
3
2
4
Model2
public int PersonID { get; set; } // PK
public int Name { get; set; }
PersonID
Name
3
Nick
4
James
Controller:
public async Task<IActionResult> Index()
{
return View(await _context.Model1.ToListAsync());
}
View:
#model IEnumerable<wpg.monster.Models.Model1>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.ID)
</td>
<td>
#Html.DisplayFor(modelItem => item.PersonID)
</td>
</tr>
}
So I'll get
TRHead
TRHead
1
3
2
4
Is there any trick to replace 3 and 4 with Names from Model2, like ViewBag with #Html.DropDownList to see something like this in View? Or there is only one way to create ViewModel?
TRHead
TRHead
1
Nick
2
James

Answer 1

Here a possible method for you:
First create a model3 to collect the information from model1 and model2:
public class Model1
{
public int ID { get; set; }
public int PersonId { get; set; }
}
public class Model2
{
public int PersonId { get; set; }
public string Name { get; set; }
}
public class Model3
{
public int ID { get; set; }
public string Name { get; set; }
}
Then in your controller, you can select the data you want and insert them to the new model which will be displayed on the viewer, here you can combine two elements whose PersonId are the same to the new model3:
public List<Model3> GetModel3()
{
List<Model1> model1 = new();
List<Model2> model2 = new();
List<Model3> model3 = new();
model1.Add(new Model1 { ID = 1, PersonId = 3 });
model1.Add(new Model1 { ID = 2, PersonId = 4 });
model2.Add(new Model2 { PersonId = 3, Name = "Nick" });
model2.Add(new Model2 { PersonId = 4, Name = "James" });
foreach (Model1 m1 in model1)
{
foreach (Model2 m2 in model2)
{
if(m1.PersonId == m2.PersonId)
{ model3.Add(new Model3 { ID = m1.ID, Name = m2.Name }); }
}
}
return model3;
}
Then you should use the following method in controller to pass the new model to the viewer:
public IActionResult Test()
{
ViewBag.Message = "This is test demo";
dynamic model = new ExpandoObject();
model.Model3 = GetModel3();
return View(model);
}
Last is the viewer page:
#using Test;
#using Test.Models;
#model dynamic
#{
ViewBag.Title = "Test";
ViewData["Title"] = "Test";
}
<h2>#ViewBag.Message</h2>
<table>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
#foreach (Model3 model3 in Model.Model3)
{
<tr>
<td>#model3.ID</td>
<td>#model3.Name</td>
</tr>
}
</table>
Now you may solve your issue, here is my test to it: