从表单输入（使用标签助手）获取日期并在 asp.net 核心 mvc 中显示该周的事件

Question

我想要一个系统：

1. 首次访问该页面时，用户会看到本周的活动列表；
2. 用户从下拉周选择器中选择一周，该周的开始日期显示在文本输入字段中；
3. 用户按下“开始”，然后页面刷新（如果我想花哨的话，也可以不刷新）并显示给定一周的事件列表。

到目前为止，第 1 部分和第 2 部分工作正常。

那么，我从这段代码中遗漏了什么，以便 model 更新新的给定日期（一周的开始）并且页面刷新以显示该周的项目？ 据我了解，model 绑定会自动发生，因此我不需要在 IndexNewDate 方法中明确放置任何内容来使用输入的日期更新 model，对吗？

我的model：

 public class PlannerViewModel
    {
        public List<PlannerLib.Models.EventModel> Events { get; set; }
        public DateTime startDate { get; set; }
    } 

我的看法（相关部分）：

<div class="weekSelector">
        <form method="post" asp-controller="HomeController" asp-action="chooseWeek" autocomplete="off">
            <input type="text" asp-for="IndexNewDate" name="startDate" id="weekPicker" autocomplete="off"/>
            <input type="submit" value="Go" class="submit" />
        </form>
</div>

我的Controller：

public class HomeController : Controller
    {
        public IActionResult Index()
        {
            DateTime weekStart = new DateTime(2020, 10, 1);
            PlannerViewModel model = new PlannerViewModel();
            model.Events = new List<PlannerLib.Models.EventModel>();
            model.Events = PlannerController.AcquireWeekData(weekStart).ToList();

            return View(model);
        }

        [HttpPost]
        public IActionResult IndexNewDate(PlannerViewModel model) { 

            DateTime weekStart = model.startDate;
            model.Event = new List<PlannerLib.Models.EventModel>();
            model.Event = PlannerController.AcquireWeekData(weekStart).ToList();

            return View(model);
        }
    }

对于上下文，JS weekpicker：

$(function () {
    var startDate;
    var endDate;
    $('#weekPicker').datepicker({
        firstDay: 1,
        dateFormat: 'dd-mm-yy',
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        onSelect: function (dateText, inst) {
            var date = $(this).datepicker('getDate');
            startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
            endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
            var dateFormat = inst.settings.dateFormat || $.datepicker.dateFormat;
            $('#startDate').text($.datepicker.formatDate(dateFormat, startDate, inst.settings));
            $('#endDate').text($.datepicker.formatDate(dateFormat, endDate, inst.settings));
            $(this).val($.datepicker.formatDate(dateFormat, startDate, inst.settings));
        }
    });
});

Answer 1

所以有几件事我弄错了。

首先，我没有在视图文件的顶部包含 *@addTagHelper 、 Microsoft.AspNetCore.Mvc.TagHelpers 。

这让我看到我的标签助手是错误的。 asp-for标记应该引用它所针对的 model 中的变量，而不是 controller 中的操作。其次，由于一些混乱，我在asp-中留下了一个旧操作（无论如何都是不正确的）动作。 我现在已将其更新为参考 controller 中的正确操作。

<div class="weekSelector">
    <form method="post" asp-action="**Index**" autocomplete="off">
        <input type="text" asp-for="**startDate**" name="startDate" id="weekPicker" autocomplete="off" />
        <input type="submit" value="Go" class="submit" />
    </form>
</div>

我还删除了对asp-controller的引用，因为那会影响发布请求。

事实上，在 controller 中不需要不同的动作名称。

[HttpGet]
public IActionResult Index()
{
        DateTime weekStart = new DateTime(2020, 10, 1);
        PlannerViewModel model = new PlannerViewModel();
        model.Events = new List<PlannerLib.Models.EventModel>();
        model.Events = PlannerController.AcquireWeekData(weekStart).ToList();
        model.startDate = weekStart;

        return View(model);
}

[Route("/")]
[HttpPost]
public IActionResult Index(PlannerViewModel model) { 

        DateTime weekStart = model.startDate;
        model.Events = new List<PlannerLib.Models.EventModel>();
        model.Events = PlannerController.AcquireWeekData(weekStart).ToList();

        return View(model);
}

现在有两个Index()操作，区别在于 HttpPost 和 HttpGet 以及它们是否将 model 作为参数。