Как добавить событие клика клиента в метод div для вызова на странице Razor ASP.NET Core 2.2 - PullRequest
Новая
       40

Как добавить событие клика клиента в метод div для вызова на странице Razor ASP.NET Core 2.2

0 голосов
/ 20 сентября 2019

Я сделал календарь на странице Razor, и я хочу сделать каждую дату (div) кликабельной, чтобы они вызывали метод и передавали ему дату клика (div id установлен на date).Я генерирую календарь на странице cs, и я не использую контроллеры MVC. 

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

А затем на моей странице cs у меня есть метод getCal (), который генерирует календарь с помощью divs, 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
        }

1 Ответ

1 голос
/ 23 сентября 2019

После рендеринга содержимого с помощью @Html.Raw(Model.getCal()) на вашей странице вы можете добавить событие клика в свой div: 

@section Scripts{ 

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


        });

    </script>

}

Razor Pages предназначены для защиты от атак (CSRF / XSRF).Следовательно, создание и проверка токенов Antiforgery автоматически включается в Razor Pages.Ниже приведен пример кода:

Обработка запросов Ajax на страницах ASP.NET Core Razor

Вот пример кода на основе ваших требований: 

@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");
...