Какой URL-адрес AJAX следует использовать для запуска действия удаления на странице Razor? - PullRequest
Новая
       1

Какой URL-адрес AJAX следует использовать для запуска действия удаления на странице Razor?

0 голосов
/ 07 марта 2019

Я новичок в вызовах AJAX, и мне нужно выполнять простые операции CRUD, используя вызов AJAX для Razor Pages. Я сделал простую функцию, которая должна удалить строку в таблице, но она не работает, что бы я ни пытался.

Каждый раз, когда я выполняю код, я получаю сообщение об ошибке. Для первой строки таблицы сообщение об ошибке:

Ошибка, что-то пошло не так с id = 1url: / Person / Index? Обработчик = DeleteById & ID = 1

Как вы можете видеть в прокомментированном javascript, я пытался использовать несколько URL, но ни один из них не работал, и я получаю ту же ошибку.

Я считаю, что это должно быть легко, но я что-то упустил. Кто-нибудь может мне помочь?

Заранее спасибо!

Мой Index.cshtml: 

@page
@model WebApplication20.Pages.Person.IndexModel
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

@{
    ViewData["Title"] = "Index";
}

<h1>Index</h1>

<p>
    <a asp-page="Create">Create New</a>
</p>

<div id="msg"></div>
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Person[0].PersonName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Person[0].PersonAddress)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.Person)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.PersonName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.PersonAddress)
                </td>
                <td>
                    <button class="btn btn-danger" onclick="DeleteId('@item.PersonId');">Delete</button>


                </td>
            </tr>
        }
    </tbody>
</table>

Javascript (встроить в тег <script> внизу страницы) 

    function DeleteId(id) {
        var options = {};
        //options.url = "/Person/Index?id=" + id + "&handler=DeleteById";
        //options.url = "/Index?id=" + id + "&handler=DeleteById";
        options.url = "/Person/Index?handler=DeleteById&id=" + id;
        options.type = "POST";
        options.headers = {
            RequestVerificationToken:
                $('input:hidden[name="MY-XSRF-TOKEN"]').val()
        };

        options.success = function (data) {
            $("#msg").html("Great Success!");
        };

        options.error = function () {
            $("#msg").html("Error something went wrong with id = " + id + "url: " + options.url);
        };
        $.ajax(options);
    }

и мой Index.cshtml.cs: 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.EntityFrameworkCore;
using WebApplication20.Data;
using WebApplication20.Models;

namespace WebApplication20.Pages.Person
{
    public class IndexModel : PageModel
    {
        private readonly WebApplication20.Data.ApplicationDbContext _context;

        public IndexModel(WebApplication20.Data.ApplicationDbContext context)
        {
            _context = context;
        }

        public IList<Models.Person> Person { get;set; }

        public async Task OnGetAsync()
        {
            Person = await _context.Person.ToListAsync();
        }

        public IActionResult OnPostDeleteById(int id)
        {
            var pers = _context.Person.Find(id);
            _context.Remove(pers);
            _context.SaveChanges();

            Person = _context.Person.ToList();
            return Page();
        }
    }
}
...