ASP.NET Core 2 Razor Pages：如何渲染AJAX返回的局部页面？

兄弟，我懂你从MVC5转Razor Pages的困惑，毕竟俩玩意儿在页面处理上还是有点不一样的。你现在要的是用AJAX把编辑局部页面塞进模态框，根本不需要返回JSON，直接返回局部页面的HTML内容就行，我给你一步步捋清楚：

1. 准备你的局部编辑页面（_Customer_editPartial.cshtml） #

这个页面就是你的编辑表单，和MVC里的Partial View写法差不多，记得指定模型（开头加下划线是ASP.NET的约定，标识这是局部视图，不会被直接访问）：

@model YourProject.Models.CustomerViewModel

<form method="post" asp-page-handler="SaveEdit">
    <input type="hidden" asp-for="Id" />
    <div class="form-group">
        <label asp-for="Name"></label>
        <input asp-for="Name" class="form-control" />
        <span asp-validation-for="Name" class="text-danger"></span>
    </div>
    <!-- 其他表单字段按需添加 -->
    <button type="submit" class="btn btn-primary">保存</button>
</form>

2. 在主页面（比如Index.cshtml）里准备模态框容器 #

留好空容器用来放局部页面内容，同时给客户列表的编辑按钮加标识：

<!-- 模态框容器 -->
<div class="modal fade" id="editCustomerModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">编辑客户</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="modalBodyContent">
                <!-- AJAX返回的局部页面会渲染到这里 -->
            </div>
        </div>
    </div>
</div>

<!-- 客户列表 -->
@foreach (var customer in Model.Customers)
{
    <tr>
        <td>@customer.Name</td>
        <td>
            <a href="#" class="edit-link" data-customer-id="@customer.Id">编辑</a>
        </td>
    </tr>
}

3. 编写AJAX请求逻辑（用jQuery为例） #

在主页面底部或单独JS文件里写点击事件，请求后台获取局部页面并渲染：

$(document).ready(function() {
    $('.edit-link').click(function(e) {
        e.preventDefault(); // 阻止默认链接跳转
        var customerId = $(this).data('customer-id');
        
        // 发送GET请求获取局部页面HTML
        $.get(`?handler=EditPartial&id=${customerId}`, function(html) {
            // 把返回的HTML塞进模态框内容区
            $('#modalBodyContent').html(html);
            // 显示模态框
            $('#editCustomerModal').modal('show');
        }).fail(function() {
            alert('加载编辑页面失败，请重试');
        });
    });
});

4. 在主页面后台（Index.cshtml.cs）添加处理方法 #

这个方法负责查询客户数据，返回局部页面，和MVC里的PartialResult逻辑类似：

public class IndexModel : PageModel
{
    private readonly YourDbContext _dbContext;

    public IndexModel(YourDbContext dbContext)
    {
        _dbContext = dbContext;
    }

    // 加载客户列表的方法（已有的逻辑）
    public async Task OnGet()
    {
        Customers = await _dbContext.Customers.ToListAsync();
    }

    public List<Customer> Customers { get; set; }

    // 处理AJAX请求，返回编辑局部页面
    public async Task<IActionResult> OnGetEditPartial(int id)
    {
        var customer = await _dbContext.Customers.FindAsync(id);
        if (customer == null)
        {
            return NotFound();
        }
        // 转成ViewModel（如果有需要的话）
        var viewModel = new CustomerViewModel
        {
            Id = customer.Id,
            Name = customer.Name,
            // 其他字段赋值
        };
        // 返回局部页面
        return Partial("_Customer_editPartial", viewModel);
    }
}

几个关键注意点 #

• Razor Pages的handler规则：?handler=EditPartial对应后台的OnGetEditPartial方法（GET请求），如果是POST请求则对应OnPostXXX。
• 客户端验证：如果需要模态框里的表单验证，记得在主页面引入_ValidationScriptsPartial（和MVC5的用法一致）。
• 避免直接访问局部页面：加下划线的命名约定会让ASP.NET阻止直接访问该视图，更安全。

这样一套流程走下来，点击编辑链接后，AJAX就会把局部页面的HTML拉取回来，直接渲染到模态框里，完全满足你的需求~

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