来自输入按钮的 Razor Pages 操作

Question

我试图通过创建一个小型 Web 应用程序来了解 Razor 页面以及 .Net Core 的工作原理，但我一直在研究如何处理表单中的按钮操作。我已经习惯了 MVC 类型的流程（从 5 年前我第一次尝试网络应用程序开始），其中按钮会有一个 onClick 操作，可以从后面的代码访问它，但它似乎与 Razor 页面不一样（除非我只是没有看到它）。我有一个像这样的基本形式

<form method="post">
<fieldset>
<input type="text" value="" placeholder="user name"/>
<input type="password" value="" placeholder="password"/>
<input type="button" value="Submit" id="submitButton"/>
</fieldset>

所以我想要实现的是当按下按钮时调用 .cs 文件中的一个动作，它将执行几个不同的操作（比如调用 API，获取结果然后取决于到不同页面的结果路由）但即使我向按钮添加 "onClick" 我也无法弄清楚如何将它连接到后面的代码。我已经看到了各种答案，大多数都使用模型和数据库，但由于这与我正在做的不同，所以这些示例没有帮助。

Answer 1

我会尽量为你做一个简单的例子。创建一个剃须刀页面并使用名称 "Test"。 Test.cshtml 文件应包含以下内容：

@page
@model WebApplication1.Pages.TestModel
<form method="post">
    <fieldset>
        <input asp-for="username" placeholder="user name" />
        <span asp-validation-for="username" class="text-danger"></span>

        <br />

        <input asp-for="password" type="password" placeholder="password" />
        <span asp-validation-for="password" class="text-danger"></span>

        <br />

        <input type="submit" value="Submit" id="submitButton" />
    </fieldset>
</form>

Test.cshtml.cs 应该有以下内容

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace WebApplication1.Pages
{
    public class TestModel : PageModel
    {
        [BindProperty]
        public string username { get; set; }

        [BindProperty]
        public string password { get; set; }

        public void OnGet()
        {
            // you can initialize the values. for example I set the username
            username = "test";
        }

        public IActionResult OnPost()
        {
            // do something with username and password

            if (string.IsNullOrEmpty(password))
            {
                ModelState.AddModelError("password", "Password is a required field.");
                return Page();
            }

            // or you can redirect to another page
            return RedirectToPage("./Index");
        }
    }
}

如果您需要对此示例进行额外解释，请告诉我。希望对你有帮助。

来自输入按钮的 Razor Pages 操作

Razor Pages action from input button

onclick

visual-studio-mac

razor-pages