如何在一个视图中使用两个不同的模型？

Question

我目前正在使用 MVC 2.1 进行编程，但遇到了问题。 我的主视图是使用 model IEnumerable 显示成员列表。 我想在该页面上有一个表单，单击该表单将填充所选成员的信息。 为此，我需要从特定的成员实例中提取数据。

我有使用不同视图的功能，但我想知道是否可以只使用一个视图。

Answer 1

最简单的设计是创建一个包含成员集合的视图 model 和一个成员的 model。 单击 html 页面上的成员名称后，您的表单将提交成员的标识符（例如名称），接收操作将返回包含成员集合的 model 并填充成员 model。看看 model以下：

public class MyViewModel
{
    public IEnumerable<string> MembersList { get; set; }
    public Member Member { get; set; }
}

public class Member
{
    public string MemberName { get; set; }
    public string MemberId { get; set; }
}

在你的 controller 中，你应该有一个类似这样的动作：

[Post]
public IActionResult Index(string memberName)
{
    //Maybe add some validation.
    
    MyViewModel model = new()
    {
        MembersList = MethodThatPopulatesTheMembers(),
        Member = MethodThatGetsTheMemberByMemberName(memberName)
    };

    return View(model);
}

顺便说一句，如果会员是 null，您将在页面初始显示期间遇到 null 引用错误（即您的方法找不到具有该名称的会员，因为您在编程时犯了错误或会员被删除）。 为了解决这个问题，您可以为您的成员 object 创建一个新实例，或者隐藏绑定到成员 model 的 html 字段（如果它是 null）。

一旦您熟悉了同步页面请求，就可以考虑练习异步页面请求。 您可能想看看fetch 。

Answer 2

我想在该页面上有一个表单，单击该表单将填充所选成员的信息。 为此，我需要从特定的成员实例中提取数据。

根据您的描述，Members 和 Member's Information 表应该包含关系（一对一或一对多）。 要在点击选中的会员时显示会员信息，我觉得还是用JQuery ajax来实现比较好。

尝试在行中添加一个“详细信息”按钮，单击它时，使用 JQuery ajax 获取所选成员的信息（基于 MemberID 属性）。 您可以参考以下示例：

1. 创建 Member 和 MemberInformation class 并配置关系（假设它包含一对一关系）：

    public class Member { public int MemberID { get; set; } public string Name { get; set; } public string Email { get; set; } public string Password { get; set; } public MemberInformation MemberInformation { get; set; } } public class MemberInformation { public int ID { get; set; } public string Address { get; set; } public DateTime BirthDate { get; set; } public string City { get; set; } [ForeignKey("Member")] public int MemberID { get; set; } public Member Member { get; set; } }

2. 创建controller动作方法：

    // GET: Members public async Task<IActionResult> Index() { return View(await _context.Members.ToListAsync()); } //get the MemberInformation based on the MemberId [HttpPost] public JsonResult GetMemberInformation(int memberid) { return Json(_context.MemberInformation.Where(c => c.MemberID == Convert.ToInt32(memberid)).FirstOrDefault()); }

3. 创建主视图：

   在查看页面中，显示成员后，添加一个表单来显示所选成员的信息。 然后，使用jquery找到选中的Memberid，根据该值使用Ajax方法获取会员信息。

    @model IEnumerable.netcore2_1.Models.Member> @{ ViewData["Title"] = "Index"; } <h2>Index</h2> <p><a asp-action="Create">Create New</a></p> <table class="table"> <thead> <tr> <th> @Html.DisplayNameFor(model => model.Name) </th> <th> @Html.DisplayNameFor(model => model.Email) </th> <th></th> </tr> </thead> <tbody> @foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.Name) </td> <td> @Html.DisplayFor(modelItem => item.Email) </td> <td> <a asp-action="Details" class="link_detail" data-memberid="@item.MemberID" asp-route-id="@item.MemberID">Details</a> </td> </tr> } </tbody> </table> <div> <h2>Member Information</h2> <div id="memberinfo"> <form asp-action="DisplayMemberInformation"> <input type="hidden" id="memberinfoid" name="ID" /> <div class="form-group"> <label for="Address" class="control-label">Address</label> <input id="txtaddress" name="Address" class="form-control" /> </div> <div class="form-group"> <label for="BirthDate" class="control-label">BirthDate</label> <input id="txtBirthdate" name="BirthDate" class="form-control" /> </div> <div class="form-group"> <label for="City" class="control-label">City</label> <input id="txtCity" name="City" class="form-control" /> </div> <div class="form-group"> <input type="submit" value="Save" class="btn btn-default" /> </div> </form> </div> </div> @section Scripts{ <script src="~/lib/jquery/dist/jquery.js"></script> <script type="text/javascript"> $(function () { $(".link_detail").each(function (index, item) { $(item).click(function () { event.preventDefault(); //prevent the default event. //get the selected memberid. var memberid = parseInt($(this).attr("data-memberid")); $.ajax({ type: "POST", url: "/Members/GetMemberInformation", data: { memberid: memberid }, success: function (data) { //populate the Form. $("#memberinfoid").val(data.ID); $("#txtaddress").val(data.Address); $("#txtBirthdate").val(data.BirthDate); $("#txtCity").val(data.City); }, failure: function (response) { console.log(response.responseText); }, error: function (response) { console.log(response.responseText); } }); }); }); }); </script> }

结果是这样的：

此外，您还可以使用局部视图显示会员信息，并使用 JQuery Ajax 动态将局部视图添加到主视图。

创建局部视图：

    @model netcore2_1.Models.MemberInformation

    <h4>MemberInformation</h4>
    <hr />
    <div class="row">
        <div class="col-md-4">
            <form asp-action="DisplayMemberInformation">
                <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                <input type="hidden" asp-for="ID" />
                <div class="form-group">
                    <label asp-for="Address" class="control-label"></label>
                    <input asp-for="Address" class="form-control" />
                    <span asp-validation-for="Address" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="BirthDate" class="control-label"></label>
                    <input asp-for="BirthDate" class="form-control" />
                    <span asp-validation-for="BirthDate" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="City" class="control-label"></label>
                    <input asp-for="City" class="form-control" />
                    <span asp-validation-for="City" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="MemberID" class="control-label"></label>
                    <input asp-for="MemberID" readonly class="form-control" />
                    <span asp-validation-for="MemberID" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <input type="submit" value="Save" class="btn btn-default" />
                </div>
            </form>
        </div>
    </div>

添加DisplayMemberInformation方法：使用JQuery Ajax调用该方法显示会员信息。

    [HttpPost]
    public IActionResult DisplayMemberInformation(int memberid)
    {
        var memberinfo = _context.MemberInformation.Where(c => c.MemberID == memberid).Select(c => c).FirstOrDefault();
        return PartialView("DisplayMemberInformation", memberinfo);
    }

主视图中的代码：

        @model IEnumerable<netcore2_1.Models.Member> 
        @{  ViewData["Title"] = "Index"; } 
        <h2>Index</h2> 
        <p> <a asp-action="Create">Create New</a></p>
        <table class="table">
            <thead>
                <tr>
                    <th> @Html.DisplayNameFor(model => model.Name) </th>
                    <th> @Html.DisplayNameFor(model => model.Email) </th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
        @foreach (var item in Model) {
                <tr>
                    <td> @Html.DisplayFor(modelItem => item.Name) </td>
                    <td> @Html.DisplayFor(modelItem => item.Email) </td>
                    <td> 
                        <a asp-action="Details" class="link_detail" data-memberid="@item.MemberID" asp-route-id="@item.MemberID">Details</a>  
                    </td>
                </tr>
        }
            </tbody>
        </table>

            <div id="partial_info">

            </div> 

        @section Scripts{ 
            <script src="~/lib/jquery/dist/jquery.js"></script>
            <script type="text/javascript">
                $(function () { 
                    $(".link_detail").each(function (index, item) {
                        $(item).click(function () {
                            event.preventDefault();
                            var memberid = parseInt($(this).attr("data-memberid"));
                            $.ajax({
                                type: "POST",
                                url: "/Members/DisplayMemberInformation",
                                data: { memberid: memberid },
                                success: function (data) {
                                    //populate the Form. 
                                    $("#partial_info").html("");
                                    $("#partial_info").append(data);
                                }, 
                                error: function (response) {
                                    console.log(response.responseText);
                                }
                            });

                        });
                    });
                });
            </script>
        }

最后，如果想在主视图中直接显示多个对象，可以尝试创建一个包含多个对象的ViewModel，然后在主视图中显示ViewModel。 或者，您可以使用 ViewBag 或 ViewData。 更多详细信息，请查看将数据传递给视图

此外，如果这些对象包含关系，请尝试参考阅读相关数据 - ASP.NET MVC with EF Core