ASP.NET COMPLEX Script 问题；如何将 TagList 与 DatePicker 结合使用？

问题描述

好吧，我想在我的 ASP.NET Core 应用程序中添加一些特别的东西，我知道它需要一个非常自定义且复杂的脚本来实现。

假设我有一个像这样的模型代码，它有一个日期时间列表：

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 字段的组合。

基本上，它加载日历并允许我点击日期，就像 Asp.Net 中默认的 DatePicker 一样，但我希望当我点击日期时，而不是简单地获取特定日期和将它分配给该字段，我希望这将所述日期添加为 TagList 字段中的元素，并且每次单击新日期时，都会将新日期添加为标签列表上的新标签，如果我单击标签中的 X，我从组中删除了所述标签。

因此，最终，这将生成一组我单击的日期，这些日期收集在提到的字段中。

我想要的是有效地，这些数据将作为日期时间列表传递给控制器，因此我的代码对所选日期（从视图加载的 List 元素）执行某些操作。

我还希望包含额外的功能，让我点击日历中一周的角落，这会自动选择构成该周的 7 天，将这 7 天加载到 TagList 中，如在我的图片底部看到。

作为最后一个细节，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？

解决方法

我认为您可以将 MultiDatesPicker 用于 jQuery UI：

<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/

结果：

asp.net-core asp.net-mvc datepicker datepicker javascript razor razor razor