最近我基于ASP.NET Core MVC项目模板搭了个极简应用，核心逻辑是在HomeController里写了两个重载的Index方法——一个处理GET请求，一个处理POST，两者共用同一个BooleanInputsViewModel来渲染Index.cshtml视图，下面把具体实现分享给大家：

1. 视图模型定义 #

首先我创建了BooleanInputsViewModel，用来封装视图需要的两个布尔值属性，作为前后端的数据传递载体：

public class BooleanInputsViewModel
{
    public bool IsChecked1 { get; set; }
    public bool IsChecked2 { get; set; }
}

2. Index视图代码（Index.cshtml） #

视图绑定上面的模型，渲染两个复选框和提交按钮，同时展示当前的状态值：

@model BooleanInputsViewModel

<form method="post">
    <div class="form-group">
        <label asp-for="IsChecked1">选项1</label>
        <input asp-for="IsChecked1" type="checkbox" class="form-check-input" />
    </div>
    <div class="form-group">
        <label asp-for="IsChecked2">选项2</label>
        <input asp-for="IsChecked2" type="checkbox" class="form-check-input" />
    </div>
    <button type="submit" class="btn btn-primary">提交并翻转状态</button>
</form>

<div class="mt-3">
    <p>当前选项1状态：<strong>@Model.IsChecked1</strong></p>
    <p>当前选项2状态：<strong>@Model.IsChecked2</strong></p>
</div>

3. HomeController的Index方法实现 #

GET请求处理 #

GET方法负责初始化默认的模型实例，把初始状态传给视图：

public IActionResult Index()
{
    // 初始化默认状态，这里默认两个选项都未勾选
    var model = new BooleanInputsViewModel();
    return View(model);
}

POST请求处理 #

POST方法接收表单提交的模型，对两个布尔属性进行取反操作，再把修改后的模型传回视图，实现状态翻转的效果：

[HttpPost]
public IActionResult Index(BooleanInputsViewModel model)
{
    // 对两个选项的状态进行取反
    model.IsChecked1 = !model.IsChecked1;
    model.IsChecked2 = !model.IsChecked2;
    
    // 将更新后的模型传回视图，展示最新状态
    return View(model);
}

这样用户每次点击提交按钮，两个复选框的状态就会自动翻转，视图也会实时显示更新后的结果~

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