如何在Razor Pages中获取HTML控件选中值并传递至后端代码

嘿，作为Razor Pages新手，碰到控件值传递的问题太正常啦！我来给你拆解几种实用的方法，结合你说的仅含字符串的City类来演示，包你能懂～

模型绑定是Razor Pages里最省心的方式，框架会自动把前端控件的值映射到后端的模型属性上，不用手动写一堆取值逻辑。

步骤1：定义你的City类 #

先把你说的演示用类写好，随便放项目里的Models文件夹就行：

public class City
{
    public string Name { get; set; }
}

步骤2：在PageModel里准备接收属性 #

在你的Razor Page对应的.cs文件（比如Index.cshtml.cs）里，声明一个City类型的属性，记得加上[BindProperty]特性——这是告诉框架：“嘿，帮我把前端的值绑到这个属性上！”

public class IndexModel : PageModel
{
    [BindProperty]
    public City SelectedCity { get; set; }

    public void OnGet()
    {
        // 页面首次加载时的初始化逻辑，比如给SelectedCity实例化
        SelectedCity = new City();
    }

    // 处理表单提交的Post方法
    public IActionResult OnPost()
    {
        // 这里SelectedCity.Name已经自动拿到前端传过来的值啦
        if (!string.IsNullOrEmpty(SelectedCity.Name))
        {
            // 随便做点什么，比如打印到控制台或者存数据库
            Console.WriteLine($"选中的城市：{SelectedCity.Name}");
        }
        return Page();
    }
}

步骤3：前端页面绑定控件 #

在对应的.cshtml页面里，用asp-for标签助手绑定到SelectedCity.Name，控件的name属性会自动生成正确的名称，完全不用你手动写：

<form method="post">
    <!-- 文本框示例 -->
    <input type="text" asp-for="SelectedCity.Name" placeholder="输入城市名" />
    
    <!-- 如果是下拉框的话，写法也类似 -->
    <select asp-for="SelectedCity.Name">
        <option value="">请选择城市</option>
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
    </select>

    <button type="submit">提交</button>
</form>

点击提交按钮后，后端OnPost方法里的SelectedCity.Name就已经填充好前端输入/选中的值了，是不是超方便？

如果你的场景特别简单，不想用模型绑定，也可以直接从Request.Form里捞控件的值，适合快速测试或者小场景。

步骤1：前端控件设置name属性 #

前端控件必须要有name属性，后端才能通过这个名称找到对应的值：

<form method="post">
    <input type="text" name="cityName" placeholder="输入城市名" />
    <button type="submit">提交</button>
</form>

步骤2：后端读取并赋值给City类 #

在PageModel的OnPost方法里，直接从Request.Form里取值，然后手动赋值给City对象：

public class IndexModel : PageModel
{
    public City SelectedCity { get; set; } = new City();

    public IActionResult OnPost()
    {
        // 从Request.Form里取name为cityName的值
        var cityName = Request.Form["cityName"].ToString();
        SelectedCity.Name = cityName;

        // 这里就可以用SelectedCity.Name做后续操作了
        return Page();
    }
}

• 不管用哪种方法，表单的method要设为post（除非你用Get，但Get不适合传敏感数据，而且参数会暴露在URL里）
• 用模型绑定的时候，[BindProperty]特性一定要加，不然框架找不到要绑定的属性
• 如果是下拉框、单选框这类控件，只要asp-for或者name属性对应上，选中的值都会被正确传递

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