Razor C#表单日期输入设置默认值及提交后保留选中值问题

解决方案 #

1. 控制器代码调整 #

你需要在请求时将日期参数传递给视图，同时为GET请求设置默认今日值，修改后代码如下：

// 处理GET请求，页面首次加载触发
public IActionResult Index()
{
    // 默认赋值今日日期
    ViewBag.sStartDate = DateTime.Now.ToString("yyyy-MM-dd");
    ViewBag.sFinishDate = DateTime.Now.ToString("yyyy-MM-dd");
    // 首次加载可按需返回全部数据或空列表
    var activities = _db.Activities.ToList();
    return View(activities);
}

// 处理POST提交请求
[HttpPost]
public IActionResult Index(DateTime sStartDate, DateTime sFinishDate)
{
    var activities = _db.Activities.Where(w => w.StartDate >= sStartDate && w.StartDate <= sFinishDate).ToList();
    // 回传用户提交的日期，用于输入框回填
    ViewBag.sStartDate = sStartDate.ToString("yyyy-MM-dd");
    ViewBag.sFinishDate = sFinishDate.ToString("yyyy-MM-dd");
    return View(activities);
}

如果偏好强类型绑定避免拼写错误，可以自定义视图模型：

public class ActivitySearchViewModel
{
    public DateTime sStartDate { get; set; }
    public DateTime sFinishDate { get; set; }
    public List<Activity> Activities { get; set; }
}

对应控制器调整为：

public IActionResult Index()
{
    var viewModel = new ActivitySearchViewModel
    {
        sStartDate = DateTime.Now,
        sFinishDate = DateTime.Now,
        Activities = _db.Activities.ToList()
    };
    return View(viewModel);
}

[HttpPost]
public IActionResult Index(ActivitySearchViewModel viewModel)
{
    viewModel.Activities = _db.Activities.Where(w => w.StartDate >= viewModel.sStartDate && w.StartDate <= viewModel.sFinishDate).ToList();
    return View(viewModel);
}

2. 视图代码调整 #

给输入框指定type="date"唤起原生日期选择器，同时绑定value属性实现默认值填充和提交后回填：
如果使用ViewBag方案：

<form method="post" asp-action="Index">
   <input type="date" id="sStartDate" name="sStartDate" value="@ViewBag.sStartDate" /><br>
   <input type="date" id="sFinishDate" name="sFinishDate" value="@ViewBag.sFinishDate" /><br>
   <input type="submit" class="btn btn-sm btn-primary btn-block" value="Generate" />

   <table>
      <!-- 遍历Model展示活动数据 -->
   </table>
</form>

如果使用强类型视图模型方案，先在视图顶部声明模型：

@model ActivitySearchViewModel

输入框修改为：

<input type="date" id="sStartDate" name="sStartDate" value="@Model.sStartDate.ToString("yyyy-MM-dd")" />
<input type="date" id="sFinishDate" name="sFinishDate" value="@Model.sFinishDate.ToString("yyyy-MM-dd")" />

原理解释 #

• 首次加载页面触发GET请求，控制器赋值今日日期传递到视图，输入框通过value属性读取默认值，解决默认日期设置问题
• 提交表单触发POST请求，控制器将用户提交的日期回传到视图，输入框自动读取回填，解决提交后清空的问题

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