如何将Razor Pages复选框单击事件绑定到服务器端代码 [英] How to bind a Razor Pages checkbox click event to server-side code

问题描述

我在Razor页面上有一个项目列表，每个项目都有一个复选框。我希望在勾选或取消勾选某个复选框时，将信息发送到该页面后面的服务，然后使用发生新设置的时间更新列表。

它不是一个按钮，而是一个复选框，所以我不确定在这种情况下如何使用<form>。如果正在等待的图标可以在操作进行期间旋转，那就更好了。

我可以使用什么？我的PageModel类上是否可以有一个执行此操作的方法？

推荐答案

好，总结我的调查结果。

1. 在页面上创建一个处理程序方法，名为OnPostMyAction。获取所需的参数。

// itemId can also be Guid
public async Task<IActionResult> OnPostMyAction(long itemId, bool isEnabled)
{
    await mRepository.EnableItem(itemId, isEnabled);

    return new OkResult();
}

2. 在页面的Scripts部分创建JS函数。

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接口，也许有人可以在这里写一个新的实现：-)我没有JS经验，所以我拿了我在或多或少实现状态下找到的东西。

3. 在页面开始处注入防伪机制。

@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf

4. 在css中添加loader类：

.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);
    }
}

5. 添加一个单击处理程序和一个loader元素(可能在复选框旁边)。

<input asp-for="@item.IsEnabled"
    onclick="requestMyAction('@item.Id', this.checked, '[e-mail]');" />
<div class="loader" style="display: none;" id="[e-mail]"></div>

这篇关于如何将Razor Pages复选框单击事件绑定到服务器端代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！