ASP.NET Core中点击按钮跳转至.cshtml页面的问题求助

我是ASP.NET Core新手，已创建若干Razor页面，希望通过按钮点击事件实现页面跳转。现有登录页，点击提交按钮时需跳转至另一个.cshtml页面，但我在Login.cshtml.cs及JavaScript中编写的跳转代码均无效，页面仅会刷新，想请教问题出在哪里？

我的Login.cshtml代码 #

@page "/" 
@model Food_Reservation.Pages.Login.LoginModel

@{
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>صفحه ورود</title>

        <link href="~/css/Shared.css" , rel="stylesheet" type="text/css" runat="server" />
        <link href="~/css/LoginCSS/Login.css" , rel="stylesheet" type="text/css" runat="server" />
        <script src="~/js/Login/Login.js" type="text/javascript" language="javascript" defer></script>
    </head>
    <body>
        <main>
            <form id="login-form" action="" method="post">
                
                <section id="userpass">
                    <ul>
                        <li>
                            <label for="userId">username</label>
                            <input type="text"
                                   name="user-name"
                                   id="userId"
                                   class="ltr"
                                   required />
                        </li>
                        <li>
                            <label for="password">password</label>
                            <input type="password"
                                   name="pass"
                                   id="password"
                                   class="ltr"
                                   required />
                        </li>
                    </ul>
                </section>
    
                <section>
                    <button id="enter-btn" runat="server" onclick="RedirectPage();">Enter</button>
                </section>
    
            </form>
        </main>
    </body>
</html>

}

Login.cshtml.cs中的无效代码 #

namespace Food_Reservation.Pages.Login
{
    public class LoginModel : PageModel
    {
        public void RedirectPage()
        {
            Response.Redirect("~/Food/Index.cshtml");
        }
    }

}

JavaScript文件中的无效代码 #

void RedirectPage()
{
    return Redirect("~/Food/Index.cshtml");
}

问题根源分析 #

1. 后台代码问题

   • Razor Pages的后台方法需要遵循OnPostXXX/OnGetXXX的命名约定，且需返回IActionResult类型，你的RedirectPage不符合规则，无法被前端触发。
   • runat="server"是ASP.NET Web Forms的语法，在Razor Pages中已不再适用，加了也不会触发后台方法。
   • 跳转路径不应写物理文件路径（.cshtml后缀），Razor Pages使用路由路径，比如/Food/Index对应Pages/Food/Index.cshtml。

2. JavaScript代码问题

   • JavaScript函数声明语法错误，正确写法是function RedirectPage()而非void RedirectPage()。
   • JS中没有Redirect方法，页面跳转需用window.location.href或window.location.replace。
   • 按钮默认类型是submit，点击会触发表单提交导致页面刷新，JS跳转逻辑被覆盖。

解决方案 #

方式一：后台处理跳转（推荐，适合需登录验证的场景）

1. 修改Login.cshtml的按钮，移除无效属性，指定后台方法：

<section>
    <button id="enter-btn" type="submit" asp-page-handler="LoginRedirect">Enter</button>
</section>

2. 修改Login.cshtml.cs，编写符合规范的后台方法：

namespace Food_Reservation.Pages.Login
{
    public class LoginModel : PageModel
    {
        public IActionResult OnPostLoginRedirect()
        {
            // 此处可添加用户名密码验证逻辑
            return RedirectToPage("/Food/Index"); // 使用路由路径跳转
        }
    }
}

方式二：纯JavaScript跳转（适合无需后台验证的简单场景）

1. 修改Login.cshtml的按钮，阻止表单默认提交：

<section>
    <button id="enter-btn" type="button" onclick="RedirectPage();">Enter</button>
</section>

2. 修正JavaScript代码：

function RedirectPage() {
    window.location.href = '/Food/Index';
}

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