Как привязать событие щелчка флажка Razor Pages к коду на стороне сервера - PullRequest
Новая
       53

Как привязать событие щелчка флажка Razor Pages к коду на стороне сервера

0 голосов
/ 19 июня 2020

У меня есть список элементов на странице Razor, каждый с флажком. Я хочу, чтобы при установке или снятии флажка информация отправлялась в службу за этой страницей, а затем список обновлялся с указанием времени, когда произошла новая настройка.

Это не кнопка, это флажок, поэтому я не уверен, как использовать <form> в этом случае. И было бы лучше, если бы значок ожидания мог вращаться во время выполнения операции.

Что можно использовать? Возможно ли иметь в моем классе PageModel метод, который выполняет эту операцию?

1 Ответ

0 голосов
/ 22 июня 2020

Хорошо, чтобы обобщить мои выводы.

  1. Создайте на странице метод-обработчик, например, OnPostMyAction. Введите необходимые аргументы. 
// itemId can also be Guid
public async Task<IActionResult> OnPostMyAction(long itemId, bool isEnabled)
{
    await mRepository.EnableItem(itemId, isEnabled);

    return new OkResult();
}
Создайте функцию JS в разделе Scripts страницы. 
function requestMyAction(itemId, isChecked, loaderId) {
    document.getElementById(loaderId).style.display = "inline-block";
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (this.readyState === 4) {
            document.getElementById(loaderId).style.display = "none";
            if (this.status === 200) {
                // Ok
            }
        }
    };
    var url = '@Url.Page("/PageName", "MyAction")';
    xhr.open('POST', url);
    xhr.setRequestHeader('RequestVerificationToken', '@Xsrf.GetAndStoreTokens(Model.HttpContext).RequestToken');
    var data = new FormData();
    data.append('itemId', itemId);
    data.append('isEnabled', isChecked);
    xhr.send(data);
}

Я знаю, что существует fetch API, возможно, кто-нибудь сможет написать здесь новую реализацию :-) У меня нет опыта работы с JS, поэтому я взял то, что нашел, в более или менее реализованном состоянии.

Вставить механизм защиты от подделки в начало страницы. 
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
Добавить loader класс в CSS: 
.loader {
    border: 6px solid #f3f3f3; /* Light grey */
    border-top: 6px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: loaderSpin 2s linear infinite;
}

@keyframes loaderSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
Добавьте обработчик кликов и элемент loader (возможно, рядом с флажком). 
<input asp-for="@item.IsEnabled"
    onclick="requestMyAction('@item.Id', this.checked, 'loader-@item.Id');" />
<div class="loader" style="display: none;" id="loader-@item.Id"></div>
...