cshtml输入内容变更时如何调用后端C# Update函数

首先明确Razor Pages的路由规则：后台公开的页面处理方法必须以On<HTTP方法名>为前缀，你原本定义的Update()方法不符合命名规则，路由系统无法识别，自然无法被调用。下面提供两种常用实现方案：

方案1：表单提交（页面刷新版，实现最简单） #

第一步：修改后台Run.cshtml.cs代码 #

1. 把Update()方法重命名为OnGetUpdate()，返回值改为IActionResult，处理完成后返回当前页面视图，同时要补充Problem的赋值避免刷新后问题文本丢失：

// 原有代码保留，修改Update方法如下
public IActionResult OnGetUpdate()
{
    ViewData["YourInput"] = Request.Query["YourInput"];
    // 补充Problem赋值，否则刷新后问题文本会消失
    // 如果你希望问题保持不变，可以把首次生成的Problem存在TempData里复用
    if (TempData["ProblemText"] is string problemText)
    {
        ViewData["Problem"] = problemText;
    }
    else
    {
        var node = Run.ChooseNode();
        var problem = node.GenerateProblem();
        ViewData["Problem"] = problem.Text;
        TempData["ProblemText"] = problem.Text;
    }
    // 保留TempData的值，下次请求还能读取
    TempData.Keep("ProblemText");
    return Page();
}

// 同时修改原有OnGet方法，把生成的问题存到TempData
public void OnGet()
{
    var node = Run.ChooseNode();
    var problem = node.GenerateProblem();
    ViewData["Problem"] = problem.Text;
    TempData["ProblemText"] = problem.Text;
}

第二步：修改前端Run.cshtml代码 #

给输入框套上表单，修改onchange事件直接触发表单提交：

@page
@model RunModel
@{ 
    ViewData["Title"] = "Run";
}
<h1>@ViewData["Title"]</h1>

<p>
    <br />
    Solve @ViewData["Problem"]
    <br />
    <form method="get" asp-page-handler="Update">
        <input type="text" name="YourInput" autocomplete="off" autofocus onchange="this.form.submit()">
    </form>
    <br />
    Your input: @ViewData["YourInput"]
</p>

方案2：AJAX无刷新版（用户体验更好） #

不需要刷新整个页面，异步调用后台方法更新内容

第一步：修改后台Run.cshtml.cs代码 #

把Update方法改成返回JSON的接口：

public IActionResult OnGetUpdate(string YourInput)
{
    // 直接返回输入内容，也可以根据业务返回其他处理结果
    return new JsonResult(new { input = YourInput });
}

第二步：修改前端Run.cshtml代码 #

添加JS逻辑处理输入变化事件，异步请求后更新页面显示：

@page
@model RunModel
@{ 
    ViewData["Title"] = "Run";
}
<h1>@ViewData["Title"]</h1>

<p>
    <br />
    Solve @ViewData["Problem"]
    <br />
    <input type="text" id="YourInput" autocomplete="off" autofocus onchange="callUpdate()">
    <br />
    Your input: <span id="InputShow">@ViewData["YourInput"]</span>
</p>

<script>
function callUpdate(){
    const inputVal = document.getElementById('YourInput').value;
    fetch(`?handler=Update&YourInput=${encodeURIComponent(inputVal)}`)
        .then(res => res.json())
        .then(data => {
            document.getElementById('InputShow').textContent = data.input;
        })
}
</script>

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