Веб-приложение отправляет значения из списка в функцию в сценарии Java

Question

На моей странице Razor у меня есть это свойство, которое представляет собой список, содержащий некоторые даты:

public List<Dates> MyDates { get; set; }

Проблема в том, как взять значения даты и отправить их в js (поскольку календарь встроен в файл js, я не могу добавить идентификатор в html, чтобы использовать его).

Вот как я беру их со своей страницы Razor в html:

@foreach(var date in Model.MyDates)
{
    @date.Date;
}

Answer 1

Создайте базу правил CSS на List<Date> Model.MyDates. В вашем файле cs html вы можете делать такие вещи, как:

<style>
@Html.Raw(string.Join(", ", Model.MyDates.Select(x => string.Format("[data-date='{0}']", x.ToString("yyyyMMdd")))))
{
    /* your CSS styles */
}
</style>

Используйте Html.Raw() для рендеринга неэкранированного html и используйте , в качестве разделителя.

Результирующее правило стиля CSS будет выглядеть примерно так:

<style>
[data-date='20200821'], [data-date='20200822'], [data-date='20200823']
{
  color: red
}
</style>

После этого визуализируйте свой календарь, используя js. Для ячейки каждого дня вы визуализируете атрибут data-date:

<td data-date='20200823'>23</td>

Таким образом, если данные в data-data совпадают с созданным вами CSS классом, они будут стилизованы.

На мой взгляд, использовать селектор атрибутов данных для стилизации календаря просто (например, не требуется синтаксический анализ объекта на json и его декодирование на стороне js), и он также может подойти вашему будущие потребности.

Например, если вы хотите стилизовать все даты в августе 2020 года, вы можете создать другое правило CSS, например:

[data-date=^='202008']
{
  /* your styles */
}

Таким образом, вы не Не нужно менять ваш код js (т.е. ваш лог c). Подробнее см. Фрагмент ниже.

var y = "2020"
var m = "08"
var i = "24"

document.getElementById("calendar").innerHTML = "<div data-date='" + y + m + i + "'>" + i + "</div>"

// example of same month
document.getElementById("calendar").innerHTML += "<div data-date='20200825'>(202008)25</div>"

// example of same day
document.getElementById("calendar").innerHTML += "<div data-date='20200724'>(202007)24</div>"

#calendar,
div {
  font-size: 2rem;
  display: inline-block;
  margin: 5px;
}

[data-date='20200824'] {
  color: red;
}


/* all day 24 */

[data-date$='24'] {
  border: 4px solid blue;
}


/* all 2020 Aug */

[data-date^='202008'] {
  background: orange;
}

<div id="calendar"></div>

PS Я не проверял, можно ли запустить весь приведенный выше код с помощью copy-n-paste, но если вы получили представление, проиллюстрированное, тогда вам следует знаю, как это реализовать.

Answer 2

Я думаю, вы можете использовать ViewDate, как показано ниже:

Модель:

public class Dates
{
    public string Date { get; set; }
}

Обработчик:

public class IndexModel : PageModel
{
    public List<Dates> MyDates { get; set; }
    public void OnGet()
    {
        MyDates = new List<Dates>
        {
            new Dates{ Date = DateTime.Now.ToShortDateString()},
            new Dates{ Date = DateTime.Now.ToShortDateString()},
            new Dates{ Date = DateTime.Now.ToShortDateString()}
        };
        ViewData["Date"] = Newtonsoft.Json.JsonConvert.SerializeObject(MyDates);
    }
}

Просмотр:

@section scripts{
    <script>
    
        $(document).ready(function () {
            var x = [];
            var dates = @Html.Raw(ViewData["Date"]);
            dates.forEach(element => x.push(element.Date));
            console.log(x);
        })
    </script>
}

Результат:

введите описание изображения здесь