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

<select id="parentSelect" onchange="loadData()">
    <option value="">请选择父级</option>
    <option value="1">父级1</option>
    <option value="2">父级2</option>
    <option value="3">父级3</option>
    <!-- 其他选项 -->
</select>

<div id="dataDiv"></div>

<script>
    function loadData() {
        var parent = document.getElementById("parentSelect").value;
        
        // 发送Ajax请求获取相关数据
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var data = JSON.parse(xhr.responseText);
                var dataDiv = document.getElementById("dataDiv");
                
                // 清空div中的内容
                dataDiv.innerHTML = "";
                
                // 将数据添加到div中
                data.forEach(function(item) {
                    var p = document.createElement("p");
                    p.textContent = item.name;
                    dataDiv.appendChild(p);
                });
            }
        };
        
        // 替换以下URL为实际的数据接口URL
        xhr.open("GET", "/api/data?parent=" + parent, true);
        xhr.send();
    }
</script>

namespace YourNamespace
{
    public class DataModel : PageModel
    {
        public IActionResult OnGet(int parent)
        {
            // 根据父级参数获取相关数据
            // 这里可以根据业务逻辑自行编写代码
            
            // 假设获取到的数据为一个List对象，包含多个子级对象
            var data = new List<ChildModel>
            {
                new ChildModel { Name = "子级1" },
                new ChildModel { Name = "子级2" },
                new ChildModel { Name = "子级3" }
                // 其他子级对象
            };
            
            return new JsonResult(data);
        }
    }
    
    public class ChildModel
    {
        public string Name { get; set; }
    }
}