如何在Razor视图中调用cshtml.cs方法并实现双向数据传递

现有代码核心问题修正 #

首先需要先对齐两处基础不匹配的问题，否则绑定完全无法生效：

• 视图@model指向的类路径和实际页模型的命名空间、类名不匹配
• 表单输入框的name属性和页模型绑定属性的名称不一致
• 缺少专门用于向视图回传剩余秒数的公共属性

第一步：修改页模型（.cshtml.cs） #

按照视图@model的指向调整类结构，使用自动绑定代替手动读取请求参数，新增回传属性：

using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.AspNetCore.Mvc;

// 命名空间和类名必须和视图@model指向完全一致
namespace CountdownWebAPP.Models
{
    public class CountdownModel : PageModel
    {
        // 标注BindProperty后，POST时会自动从表单绑定同名参数
        [BindProperty]
        public int RemainingTime { get; set; }

        // 用于向后端视图回传剩余秒数，可空类型适配首次加载无值的场景
        public int? CurrentRemainingTime { get; set; }

        // 首次加载页面触发，不需要传参
        public void OnGet()
        {
            // 首次加载时剩余值为空，不显示内容
        }

        // 表单POST自动触发，直接使用绑定好的RemainingTime参数
        public void OnPost()
        {
            // 这里可添加后端处理逻辑，比如校验输入、计时计算等
            // 处理完成后赋值给回传属性，视图即可读取
            CurrentRemainingTime = RemainingTime;
        }
    }
}

第二步：修改Razor视图（.cshtml） #

调整输入框的name属性和绑定属性名一致，给剩余秒数区域绑定回传属性：

@page
@model CountdownWebAPP.Models.CountdownModel

<form method="post">
    <table>
        <tr>
            <td>
                <label for="RemainingTime" class="col-form-label">
                    输入要倒计时的秒数
                </label>
            </td>
        </tr>
        <tr>
            <!-- name属性必须和页模型绑定属性名一致 -->
            <td>
                <input type="number" id="RemainingTime" name="RemainingTime" />
            </td>
        </tr>
        <tr>
            <td>
                <button type="submit" class="btn btn-dark">开始</button>
            </td>
        </tr>
    </table>
</form>

<table>
    <tr>
        <td>
            <label class="col-form-label">
                剩余秒数：
            </label>
        </td>
        <td>
            <label class="col-form-label-lg">
                <!-- 直接读取页模型的公共属性即可 -->
                @Model.CurrentRemainingTime
            </label>
        </td>
    </tr>
</table>

逻辑说明 #

• 表单到页模型传值：不需要手动读取Request.Form，只要输入框name和标注[BindProperty]的公共属性名一致，POST时框架会自动完成参数绑定，直接在OnPost方法中使用即可。
• 页模型到视图传值：只要在页模型中定义public修饰的属性，视图中直接通过@Model.属性名即可读取，不需要额外的方法调用。
• 视图调用页模型逻辑：不需要手动调用方法，表单提交时框架会自动触发对应生命周期的方法（GET触发OnGet，POST触发OnPost），不需要额外写调用逻辑。

补充：如果要实现实时倒计时刷新，不需要反复向后端提交请求，可在前端引入JavaScript直接处理秒数递减即可，仅需把后端返回的初始秒数赋值给前端变量使用。

内容的提问来源于stack exchange，提问作者Guillem Soler Solé