Razor Pages中通过Ajax无法在主视图加载局部视图的问题

错误点分析及修正 #

1. Ajax请求URL格式错误
   Razor Pages中，GET类型的handler方法命名以OnGet开头，请求时只需指定handler=方法名前缀（去掉OnGet），不需要加括号。你的URL应该改为：

url: "/Employees/Index?handler=Partial",

2. jQuery选择器语法错误
   (".list")缺少jQuery的$符号，无法正确定位容器元素，修正为：

$(".list").append(data);

3. 确保局部视图不加载主布局
   打开_ListPartialView.cshtml，在顶部添加布局禁用指令，避免重复渲染主视图：

@{
    Layout = null;
}

修正后的完整代码 #

Ajax请求代码

$(document).ready(function() {
    AddList();
})

function AddList(){
    $.ajax({
        url: "/Employees/Index?handler=Partial",
        type: "GET",
        success: function (data) {
            $(".list").append(data);
        }
    });
}

PageModel代码（无需修改，确认返回PartialView即可）

public async Task<IActionResult> OnGetPartial()
{
    Employee = await _context.Employee.ToListAsync();
    return Partial("_ListPartialView", Employee);
}

额外注意事项 #

• 如果页面启用了防伪造令牌验证（默认Razor Pages会启用），GET请求无需令牌，但后续改为POST请求时，需要在Ajax中携带RequestVerificationToken。
• 确认.list容器在主视图中存在，且选择器无拼写错误。

内容的提问来源于stack exchange，提问作者Babar Hussain