Razor Page表单提交至API后，无需AJAX如何实现页面跳转？

我有一个Razor Page的HTML表单，提交到API控制器，现在需要实现表单提交后的页面跳转，想咨询是否可以不使用AJAX完成该操作，相关代码如下：

@page
@model Maqta.Pages.EditEmployeeModel
@{}
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Maqta</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/Maqta.styles.css" asp-append-version="true" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" href="/Index1" asp-area="" asp-page="/Index1">Maqta</a>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            <h1>Edit Employee</h1>
            <form method="post" action="@Model.editUrl">
                <div class="form-group">
                    <label for="name">id</label>
                    <input type="number" value="@Model.Employee.id" class="form-control" name="id" id="id" placeholder="Enter id">
                </div>
                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" class="form-control" value="@Model.Employee.name" name="name" id="name" placeholder="Enter Name">
                </div>
                <br />
                <div class="form-group">
                    <label for="email">Email address</label>
                    <input type="email" class="form-control" value="@Model.Employee.email" name="email" id="email"  placeholder="Enter email">
                </div>
                <br />
                <div class="form-group">
                    <label for="email">Mobile</label>
                    <input type="text" class="form-control" value="@Model.Employee.email" name="mobile" id="mobile" placeholder="Enter email">
                </div>
                <br />
                <button type="submit" class="btn btn-primary">A</button>
            </form>
        </main>
    </div>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
</body>
</html>

[Route("[action]")]
[HttpPost]
public IActionResult Edit([FromForm] dynamic obj)
{
    var returnUrl = new ConfigurationBuilder().AddJsonFile("appsettings.json").Build().GetSection("AppSettings")["BaseUrlWeb"] +
       "Index";
    var dtoModel = new DTO.Employee();
    var id = int.Parse(Request.Form["id"]);
    var firstName = Request.Form["name"];
    var email = Request.Form["email"];
    var mobile = Request.Form["mobile"];
    var entity = unitOfWork.Employee.Get(id);
    unitOfWork.Clear();
    if (entity != null)
    {
        entity.FirstName = firstName;
        entity.Email = email;
        entity.Mobile = mobile;
        entity.Bank = new Entity.EmployeeBank();
        entity.Bank.EmployeeId = id.ToString();
        entity.Bank.Iban = "";
        entity.Bank.IsActive = false;
        entity.Bank.DeletedDate = DateTime.UtcNow;
        entity.Bank.DeleteUserID = -1;
        entity.Bank.ModifiedDate = DateTime.UtcNow;
        entity.Bank.CreationUserID = -1;
        entity.Bank.ModifiedDate = DateTime.UtcNow;
        entity.Bank.IsDeleted = false;
        entity.Bank.DeletedDate = DateTime.UtcNow;
        entity.Bank.Name = "";
        entity.ModifiedDate = DateTime.UtcNow;
        entity.ModifyUserID = 2;
        dtoModel = _mapper.Map<DTO.Employee>(entity);
        dtoModel.EmployeeId = id.ToString();
        unitOfWork.Employee.Update(entity);
        unitOfWork.Complete();
        unitOfWork.Clear();
        return RedirectToPage(returnUrl);
    }
    else
    {
        return BadRequest(new
        {
            ErrorMessage = "ID is not valid"
        }
        );
    }
}

完全可以不使用AJAX实现表单提交后的页面跳转，只需修正API控制器的重定向逻辑即可，具体调整点如下：

1. 替换重定向方法：API控制器不属于Razor Pages体系，RedirectToPage方法无法正常工作，应该改用Redirect方法直接返回完整的跳转URL。
2. 优化配置读取方式：不要在控制器方法内重复构建ConfigurationBuilder，建议通过构造函数注入IConfiguration来读取配置，更符合ASP.NET Core的设计规范。
3. 使用强类型模型绑定：避免手动解析Request.Form，定义一个表单模型类，让框架自动完成参数绑定，减少出错概率。

修改后的控制器示例：

private readonly IConfiguration _configuration;

// 构造函数注入IConfiguration
public YourControllerName(IConfiguration configuration)
{
    _configuration = configuration;
}

[Route("[action]")]
[HttpPost]
public IActionResult Edit([FromForm] EmployeeEditModel model)
{
    var baseUrl = _configuration.GetSection("AppSettings")["BaseUrlWeb"];
    var returnUrl = $"{baseUrl}Index";
    
    var entity = unitOfWork.Employee.Get(model.Id);
    unitOfWork.Clear();
    
    if (entity != null)
    {
        entity.FirstName = model.Name;
        entity.Email = model.Email;
        entity.Mobile = model.Mobile;
        // ... 其他实体更新逻辑
        
        unitOfWork.Employee.Update(entity);
        unitOfWork.Complete();
        unitOfWork.Clear();
        
        // 使用Redirect完成页面跳转
        return Redirect(returnUrl);
    }
    else
    {
        // 如果需要在跳转后显示错误信息，可以把错误参数拼到URL里，或者用TempData（需要配置会话）
        var errorUrl = $"{baseUrl}EditEmployee?error=invalidId";
        return Redirect(errorUrl);
    }
}

// 定义表单绑定模型
public class EmployeeEditModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Email { get; set; }
    public string Mobile { get; set; }
}

另外，确保表单的action属性正确指向API控制器的Edit方法路由，表单提交后浏览器会自动响应控制器返回的重定向指令，完成页面跳转，全程无需AJAX参与。

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