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

Posted 2023-03-27

【中文标题】使用 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?

【发布时间】：2021-12-27 21:18:07

【问题描述】：

我有一个名为 DivisionContacts 的实体，带有一个电子邮件和一个 DivisionId 外键，我有一个名为 Division 的实体，带有一个 DivisionId 主键。用户将从下拉菜单中选择一个部门，例如儿童服务或高级服务，一旦选择了该部门，他们就可以单击一个按钮以在 Bootstrap 弹出模式中查看该部门拥有的所有 DivisionContacts 电子邮件地址.我需要知道在 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 来执行这种功能吗？还是需要处理程序方法？触发模式弹出的按钮嵌套在另一个表单中。当按钮嵌套在另一个表单中时，处理程序方法会起作用吗？非常感谢任何建议。

【参考方案1】：

您可以在 onchange 事件中使用 ajax 来返回显示所有 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>

查看（索引.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="[e-mail]",
                new DivisionContact()DivisionContactId=2,DivisionId=1,ContactEmail="[e-mail]"
            
        ,
        new Division()
            DivisionId=2,
            DivisionName="Senior Services",
            DivisionContacts= new List<DivisionContact>()
            
                new DivisionContact()DivisionContactId=3,DivisionId=2,ContactEmail="[e-mail]",
                new DivisionContact()DivisionContactId=4,DivisionId=2,ContactEmail="[e-mail]"
            
        
    ;
    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
        ;
    

结果：