使用 Razor Pages，在用户从下拉列表中选择父级后，如何将相关数据加载到 div？

Question

我有一个名为 DivisionContacts 的实体，带有电子邮件和 DivisionId 外键，还有一个名为 Division 的实体，带有 DivisionId 主键。用户将从下拉菜单中 select 一个部门，例如儿童服务或高级服务，一旦该部门被 selected，他们就可以点击一个按钮来查看所有 DivisionContacts 电子邮件地址在 Bootstrap 弹出模式中由该部门拥有。我需要知道在 Razor Pages 中执行此功能的最佳方式是什么。

以下是实体：

    public class Division
{
    public int DivisionId { get; set; }

    [DisplayName("Division")]
    public string DivisionName { get; set; }

    public ICollection<DivisionContact> DivisionContacts { get; set; }
}

    public class DivisionContact
{
    public int DivisionContactId { get; set; }

    public int DivisionId { get; set; }

    public string ContactEmail { get; set; }
    

    public Division Division { get; set; }
}

这是模态：

<!-- Modal -->
    <div class="modal fade" id="divisionContactsModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Division Contacts</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div>

                    </div>
                </div>
                @*<div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>*@
            </div>
        </div>
    </div>

这是打开模式的按钮：

   <button type="button" class="btn btn-link col-sm-12" data-toggle="modal" data-target="#divisionContactsModal">
Click to see who receives these emails.
    </button>

我是否需要使用视图模型和 jquery 来执行此类功能？还是需要处理程序方法？触发模态弹出窗口的按钮嵌套在另一个表单中。当按钮嵌套在另一种形式中时，处理程序方法会起作用吗？非常感谢任何建议。

Answer 1

您可以在 onchange 事件中使用 ajax 来 return 显示所有 DivisionContacts 电子邮件地址的部分视图。

局部视图（_Partial.cshtml 位于 Pages 文件夹中）：

@model IndexModel
<table>
    <thead>
        <tr>
            <th>
                ContactEmail
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.DivisionContacts)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.ContactEmail)
                </td>
            </tr>
        }
    </tbody>
</table>

视图(Index.cshtml):

@page
@model IndexModel    
<select asp-for="Division.DivisionId" asp-items="ViewBag.Division" 
                                    onchange="DisplayDivisionContact(this)">
    <option>--Choose A Division--</option>
</select>
<button type="button" class="btn btn-link col-sm-12" data-toggle="modal" data-target="#divisionContactsModal">
    Click to see who receives these emails.
</button>
<div class="modal fade" id="divisionContactsModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Division Contacts</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

            </div>
        </div>
    </div>
</div>
@section Scripts
{
    <script>
        function DisplayDivisionContact(selectObject) {
            $.ajax({
                type: "GET",
                url: "?handler=DisplayDivisionContact&id=" + selectObject.value,
                dataType: "html",
                success: function (res) {
                    $(".modal-body").html(res);
                }
            })
        }
    </script>
}

后端（Index.cshtml.cs）：

public class IndexModel : PageModel
{
    //here I hard-coded the data for easy testing
    //you can get the data from database
    //List<Division> Divisions =  _context.Division.Include(a=>a.DivisionContacts).ToList();
    List<Division> Divisions = new List<Division>()
    {
        new Division(){
            DivisionId=1,
            DivisionName="Childrens Services",
            DivisionContacts= new List<DivisionContact>()
            {
                new DivisionContact(){DivisionContactId=1,DivisionId=1,ContactEmail="a@qq.com"},
                new DivisionContact(){DivisionContactId=2,DivisionId=1,ContactEmail="b@qq.com"}
            }
        },
        new Division(){
            DivisionId=2,
            DivisionName="Senior Services",
            DivisionContacts= new List<DivisionContact>()
            {
                new DivisionContact(){DivisionContactId=3,DivisionId=2,ContactEmail="c@qq.com"},
                new DivisionContact(){DivisionContactId=4,DivisionId=2,ContactEmail="d@qq.com"}
            }
        }
    };
    public Division Division { get; set; }
    public void OnGet()
    {
        ViewData["Division"] = new SelectList(Divisions, "DivisionId", "DivisionName");
    }

    [ViewData]
    public List<DivisionContact> DivisionContacts { get; set; }
    public IActionResult OnGetDisplayDivisionContact(int id) 
    {           
        DivisionContacts = Divisions
                    .Where(a => a.DivisionId == id)
                    .FirstOrDefault().DivisionContacts.ToList();
        return new PartialViewResult
        {
            ViewName = "_Partial",
            ViewData = this.ViewData
        };
    }
}

结果：

使用 Razor Pages，在用户从下拉列表中选择父级后，如何将相关数据加载到 div？

Using Razor Pages, how would I load related data to a div after a user has selected a parent from a dropdown list?

c#

drop-down-menu

bootstrap-modal

asp.net-core

razor-pages