从表单输入获取日期带有标签帮助器并在asp.net Core MVC中显示该周的事件

问题描述

我想要一个系统，其中：

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

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

那么，我在此代码中缺少什么，以便模型以新的给定日期（一周的开始）更新，并且页面刷新以显示所述周的项目？据我了解，模型绑定是自动发生的，因此我不需要在IndexNewDate方法中放置任何明确内容即可使用输入的日期更新模型，对吗？

我的模特：

 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>

我的控制器：

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.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,inst.settings));
        }
    });
});

解决方法

所以有些地方我弄错了。

首先，我没有在视图文件顶部添加* @ addTagHelper ，Microsoft.AspNetCore.Mvc.TagHelpers 。

这使我看到我的标签助手是错误的。 asp-for 标签应引用其所针对的模型中的变量，而不是控制器中的操作。其次，由于一些改组，我在 asp-action 中留下了一个旧动作（无论如何还是不正确的）。现在，我已对其进行更新，以引用控制器中的正确操作。

ERROR Error: Cannot find control with name: 'textbox88'
    at _throwError (forms.js:2293)
    at setUpControl (forms.js:2201)
    at FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.addControl (forms.js:5427)
    at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName._setUpControl (forms.js:6028)
    at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName.ngOnChanges (forms.js:5949)
    at checkAndUpdateDirectiveInline (core.js:21092)
    at checkAndUpdateNodeInline (core.js:29494)
    at checkAndUpdateNode (core.js:29456)
    at debugCheckAndUpdateNode (core.js:30090)
    at debugCheckDirectivesFn (core.js:30050)

我还删除了对 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>

现在有两个 Index（）操作，分别由HttpPost和HttpGet以及它们是否将模型作为参数来区分。