Блог

Итак, ситуация такова:

Я использую таблицы данных в своем файле .cshtml. Мне удалось добавить записи через модальный, но проблема в том, что я хочу заполнить модальный, чтобы отредактировать данные из строки. Я не хочу извлекать данные из строки, а вместо этого выполняю Ajax-запрос для извлечения данных. Ниже показана структура моей таблицы

 <table id="example" class="table table-striped table-bordered dt-responsive display nowrap" cellspacing="0">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
                <th>Email</th>
                <th>Status</th>
                <th>Roles</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var user in Model.Users)
            {
            <tr>
                <td>@user.FirstName</td>
                <td>@user.LastName</td>
                <td>@user.UserName</td>
                <td>@user.Email</td>
                <td>@user.status</td>
                <td>
                    @{ if (user.Roles.Contains("SuperAdmin"))
                        {
                            <span class="badge badge-danger">SA</span> }
                        else if (user.Roles.Contains("Admin"))
                        {
                            <span class="badge badge-danger">ADMIN</span> }
                        else if (user.Roles.Contains("Moderator"))
                        {
                            <span class="badge badge-warning">MOD</span> }
                        else if (user.Roles.Contains("Basic"))
                        {
                            <span class="badge badge-success">BASIC</span> } 
                        
                        }
                </td>
                 
                <td>
                        @{ if (user.Roles.Contains("SuperAdmin"))
                                        {
                            <span class="badge badge-warning">Locked</span> }
                        else
                        {

                            <button class="btn btn-sm btn-dark details" id="useredit" data-id="@user.UserId">Edit</button>
                            <a class="btn btn-primary btn-sm" asp-area="Identity" asp-page="/Account/UserRoles" asp-route-userId="@user.UserId">Manage Roles</a> } 
                        }
                </td>
            </tr>}
        </tbody>
    </table>
  

Когда я нажимаю на кнопку редактирования, выполняется следующий код

 $("button.details").on('click', function () {
        console.log({ "id": $(this).attr("data-id") });
        var userid = $(this).attr("data-id");
            $.ajax({
                type: "POST",
                url: "/Identity/Account/Users?handler=UsersAsJson",
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                },
                data: { id:userid },
                contentType: "json; charset=utf-8",
                success: function (regions) {
                    console.log(regions)
                },
                failure: function (response) {
                    alert(response);
                }
            });
    });
  

И это функция обработчика ниже

 public async Task<IActionResult> OnPostUsersAsJsonAsync(string? id)
    {

        System.Diagnostics.Debug.WriteLine("id passed",id);
        
        
        return new JsonResult(id);
    }
  

Может кто-нибудь сказать мне, как мы передаем идентификатор из запроса ajax в функцию обработчика? причина в том, что на данный момент он не публикуется в функции OnPostUsersAsJsonAsync.

Также обратите внимание, что я пробовал getJSON без какого-либо успеха.

Если у вас нет формы, убедитесь, что вы добавили токен, как показано ниже:

 <button class="btn btn-sm btn-dark details" id="useredit" data-id="@user.UserId">Edit</button>
@Html.AntiForgeryToken()
  

Измените свой js, как показано ниже:

 @section Scripts
{
    <script>
        $("button.details").on('click', function () {
            console.log({ "id": $(this).attr("data-id") });
            var userid = $(this).attr("data-id");
            $.ajax({
                type: "POST",
                url: "/Identity/Account/Users?handler=UsersAsJson",
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                },
                data: { id: userid },
                //contentType: "json; charset=utf-8",  //remove this line
                success: function (regions) {
                    console.log(regions)
                },
                failure: function (response) {
                    alert(response);
                }
            });
        });
    </script>
}
  

Startup.cs:

 services.AddRazorPages();
services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");  //be sure add this line
  

Результат: