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

Question

我想要一个系统：

用户第一次访问该页面时，会看到本周的活动列表；
用户从下拉周选择器中选择一周，该周的开始日期显示在文本输入字段中；
用户按下 '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.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 标签应该引用它所针对的模型中的变量，而不是控制器中的操作。其次，由于一些改组，我在 asp-action 中留下了一个旧动作（无论如何都是不正确的）。我现在已经更新了它以引用控制器中的正确操作。

<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 的引用，因为那会影响 post 请求。

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

[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 以及它们是否将模型作为参数。

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

Getting a date from form input (with tag helpers) and displaying events in that week in asp.net core mvc

c#

asp.net

asp.net-mvc

asp.net-core

asp.net-core-tag-helpers