Блог

Мне нужна система, в которой:

1. При первом посещении страницы пользователь видит список событий за текущую неделю;
2. Пользователь выбирает неделю из выпадающего списка недели, и дата начала этой недели отображается в поле ввода текста;
3. Пользователь нажимает «перейти», а затем страница обновляется (или нет, если я хочу быть модным) и отображает список событий за данную неделю.

Пока части 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));
        }
    });
});
  

Итак, было несколько вещей, в которых я ошибался.

Во-первых, я не включил *@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, а также независимо от того, принимают ли они модель в качестве параметра.