Ну, я хотел бы иметь что-то особенное в своем приложении ASP.NET Core, для которого, как я знаю, требуется очень специальный и сложный сценарий.
Допустим, у меня есть код модели, подобный этому, в котором есть список DateTime:
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
namespace C.Models
{
public class Cdates
{
[key]
public int Id { get; set; }
[DataType(DataType.Date)]
public List<DateTime> dataTims { get; set; }
}
}
И, на мой взгляд, я хотел бы иметь что-то подобное в качестве интерфейса:
https://i.stack.imgur.com/o20VD.png
Итак, я попытаюсь объяснить картину. Я хотел бы иметь что-то похожее на комбинацию DatePicker и поля TagList.
По сути, он загружает календарь и позволяет мне нажимать на дни, точно так же, как DatePicker, который поставляется по умолчанию в Asp.Net, но я хочу, чтобы, когда я нажимаю на дату, вместо того, чтобы просто брать конкретную дату и назначать ее поле, я хотел бы, чтобы это добавляло указанную дату в качестве элемента в поле TagList, и чтобы каждый раз, когда я нажимаю на новую дату, это добавляло новую дату в качестве нового тега в список тегов, и если я нажимаю на X из тега, я удаляю указанный тег из группы.
Итак, в конечном итоге это сгенерирует группу дат, на которые я нажал, которые собраны в указанном поле.
И я хотел бы, чтобы эти данные были переданы в виде списка DateTimes в контроллер, поэтому мой код что-то делает с выбранными датами, элементом списка, который загружается из представления.
Я также хотел бы, чтобы это включало дополнительную функцию, позволяющую мне щелкнуть угол недели в календаре, и это автоматически выбирает 7 дней, составляющих эту неделю, загружая эти 7 дней в TagList, как показано на внизу моей картинки.
И в качестве последней детали, поле для списка тегов относительно высокое, так что это не выглядит плохо, если я загружу туда 31 день.
Я знаю, что я ищу, это довольно сложно и специфично, но можно ли это сделать с помощью кода скрипта в представлении, верно? Один единственный:
(document).ready(function () {
var select = $('select[multiple]');
var options = select.find('option');
var div = $('<div />').addClass('selectMultiple');
var active = $('<div />');
var list = $('<ul />');
var placeholder = select.data('placeholder');
var span = $('<span />').text(placeholder).appendTo(active);
options.each(function () {
var text = $(this).text();
if ($(this).is(':selected')) {
active.append($('<a />').html('<em>' + text + '</em><i></i>'));
span.addClass('hide');
} else {
list.append($('<li />').html(text));
}
----etc
И помимо скрипта, второстепенный вопрос: должен ли я включать какой-либо специальный код в контроллер, чтобы это работало?
И хорошо, я знаю, что, возможно, я прошу сделать что-то очень сложное, но я понятия не имею, как вообще начать писать код сценария, который позволяет это сделать, но я ничего не теряю, обращаясь за помощью. Или, может быть, есть какой-то пример чего-то очень похожего, который смешивает DatePickers и TagList?
🤔 А знаете ли вы, что...
JavaScript поддерживает объектно-ориентированное программирование.
Я думаю, вы могли бы использовать MultiDatesPicker для пользовательского интерфейса jQuery:
<form asp-action = "Test" method = "post">
<input id = "mdp-demo" name = "datelist">
<input type = "submit" value = "create"/>
</form>
@section Scripts
{
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-multidatespicker/1.6.6/jquery-ui.multidatespicker.js"></script>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-multidatespicker/1.6.6/jquery-ui.multidatespicker.css" />
<script>
$('#mdp-demo').multiDatesPicker();
</script>
}
Серверная часть:
[HttpPost]
public ActionResult Test(string datelist)
{
string[] datestrs = datelist.Split(new char[] { ',' });
return View();
}
Ссылка:
https://dubrox.github.io/Multiple-Dates-Picker-for-jQuery-UI/
Результат: