asp.net-core - 如何将客户端单击事件添加到 div 以调用 ASP.NET Core 2.2 Razor 页面中的方法

Question

我在 Razor 页面中制作了一个日历，我想让每个日期（一个 div）可点击，以便他们调用一个方法并将点击的日期传递给它（div id 设置为日期）。我在 cs 页面中生成日历并且我没有使用 MVC 控制器。

@model Budget.Pages.CalendarModel
@{
    ViewData["Title"] = "Calendar";
}
<form method="post">
    @Html.Raw(Model.getCal())
</form>

然后在我的cs页面中，我有方法getCal（），它通过div、css和一些数学生成日历，它工作正常，但我需要将onClick事件附加到每一天（div）。

public string getCal() 
        {
            //I won't print out all of my calendar generation code in ordfer to simplify this question.
            //The code below happens in a loop where the MM, DD and YYYY change as appropriate to be 
            //unique. This is where I want to put my onclick events to call another method, onDateSelect(this.id)

            retValue += "<div id='" + MM + "_" + DD + "_" + YYYY + "' class='col-md-9 dayCell'>" +
                            strDayNo +
                        "</div>";
            return retValue; //When out of loop of course
        }

标签： asp.net-corerazor-2

Answer 1

在页面中呈现内容后@Html.Raw(Model.getCal())，您可以在 div 上添加点击事件：

@section Scripts{ 

    <script>
        $(document).on('click', ".dayCell", function () {


        });

    </script>

}

Razor Pages 旨在防止 (CSRF/XSRF) 攻击。因此，防伪令牌生成和验证会自动包含在 Razor 页面中。请参阅以下文章的代码示例：

在 ASP.NET Core Razor 页面中处理 Ajax 请求

这是根据您的要求的代码示例：

@section Scripts{ 

    <script>
        $(document).on('click', ".dayCell", function () {

            $.ajax({
                type: "POST",
                url: "/YourPageName?handler=Send",
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                },
                data: JSON.stringify({
                    ID: this.id

                }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {

                },
                failure: function (response) {
                    alert(response);
                }
            });
        });



    </script>

}

服务器端功能：

public JsonResult OnPostSend([FromBody]PostData value)
{
    ....
}
public class PostData
{
    public string ID { get; set; }
}

还要配置防伪服务以查找X-CSRF-TOKEN标头：

services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");