Управление данными в базе данных путем передачи идентификаторов флажков, отмеченных

Question

Я устанавливаю проект веб-приложения asp.net. Приступая к проблеме сейчас: (Я новичок в Ajax, JQuery и Asp.net)

1) Я нашел способ сохранить идентификаторы отмеченных флажков в строке «CommaSeparatedIDs» - в файле Index.cshtml (функция SaveFinished ())

2) Определение функции «SaveFinished ()» в «Index.cshtml.cs». Я не знаю, как определить функцию / где определить ее в файле. Назначение функции: имеет строковый параметр, определенный в 1), который управляет базой данных, используя идентификаторы.

3) Наконец, моя реализация SaveFinished () может содержать ошибки, на которые я не могу указать.

Я пытался определить функцию «SaveFinished ()» в разных областях «Index.cshtml.cs», и функция никогда не распознавалась и не ссылалась, я не знаю, какой должен быть тип функции.

Index.cshtml:

<table class="table" id="MainTable">  // (Table used to define the various entries)
...
...
   <th>
      <a class="btn btn-success" onclick=SaveFinished()>Done</a> // JS function SaveFinished()
   </th>
...
...
    @foreach (var item in Model.ExcelData) // ExcelData is the object defined in Index.cshtml.cs (given below)

        <tr>
           <td>
               <input id="@item.ID" type="checkbox" />
           </td>
        ...
        ...
       </tr>
// I think I have errors below which I can't figure out.
<script>

    var SaveFinished = function () {
        var ArrItem = [];
        var CommaSeparatedIDs = "";

        $("MainTable tbody tr input[type=checkbox] ").each(function () {
            debugger
            var checkId = $(val).attr("id");
            var IsChecked = $("#" + checkId).is(":checked", true);
            if (IsChecked) {
                ArrItem.push(checkId);
            }
        })
        if (ArrItem.length != 0) {
            CommaSeparatedIDs = ArrItem.toString();
            $.ajax({
                url: "/Excel_Data/Index", <!--This should be the URL of the page?-->
                type: "POST",
                data: { MainTable: CommaSeparatedIDs },
                success: function (response) {
                     <!-- What should I do here? I'm new to Ajax and JQuery -->
                }
            })
        }
    }
</script>

Index.cshtml.cs:

namespace Customer.Pages.Excel_Data
{
    public class IndexModel : PageModel
    {
        private readonly Customer.Models.CustomerContext _context;
        public IndexModel(Customer.Models.CustomerContext context)
        {
            _context = context;
        }
        #region Variables

        public async Task OnGetAsync()
        {
         #region Data manipulation and setting variables      
        } 
    }
}

Мой ожидаемый результат - передать строку «CommaSeparatedIDs» в функции «SaveFinished ()» в логическую часть страницы - «Index.cshtml.cs» и управлять базой данных.

Answer 1

Непонятно, как определить вашу модель и обработчик поста. Ниже приведен рабочий пример, вы можете сослаться на

Модель

public class ExcelData
{
    public int ID { get; set; }
    public string Name { get; set; }
}

Index.cshtml.cs

public class IndexModel : PageModel
{
    private readonly RazorPages2_1Project.Data.RazorPagesDbContext _context;

    public IndexModel(RazorPages2_1Project.Data.RazorPagesDbContext context)
    {
        _context = context;
    }

    public IList<ExcelData> ExcelData { get;set; }

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

    public async Task<IActionResult> OnPostAsync([FromBody]string CommaSeparatedIDs)
    {
       //stuff you want
    }
}

Ваш проект - Razor Pages. Razor Pages предназначены для автоматической защиты от межсайтовых подделок запросов (CSRF / XSRF) атак.Вам не нужно писать дополнительный код.Создание и проверка токенов антиподделения автоматически включается в Razor Pages.Если возникает ошибка 400 неверных запросов, на странице не отображается AntiForgeryToken.Добавьте явно, используя @Html.AntiForgeryToken(), как показано ниже:

@Html.AntiForgeryToken()

<table class="table" id="MainTable">
<thead>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.ExcelData[0].Name)
        </th>
        <th>
            <a class="btn btn-success" onclick="SaveFinished()">Done</a>
        </th>
        <th></th>
    </tr>
</thead>
<tbody>
    @foreach (var item in Model.ExcelData)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                <input id="@item.ID" type="checkbox" />
            </td>
            <td>
                <a asp-page="./Edit" asp-route-id="@item.ID">Edit</a> |
                <a asp-page="./Details" asp-route-id="@item.ID">Details</a> |
                <a asp-page="./Delete" asp-route-id="@item.ID">Delete</a>
            </td>
        </tr>
    }
</tbody>
</table>
@section Scripts
{
<script type="text/javascript">

    function SaveFinished() {
        var ArrItem = [];
        var CommaSeparatedIDs = "";

        $("#MainTable tbody tr input[type=checkbox]").each(function () {
           // debugger;
            var checkId = $(this).attr("id");
            var IsChecked = $(this).is(":checked");
            if (IsChecked) {
                ArrItem.push(checkId);
            }
        });
        if (ArrItem.length != 0) {
            CommaSeparatedIDs = ArrItem.toString();
            $.ajax({
                url: "/Excel_Data/Index",
                type: "POST",
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                },
                contentType: "application/json",
                data: JSON.stringify(CommaSeparatedIDs),
                success: function (response) {
                    alert(response);
                }
            });
        }
    }
</script>
}

Поскольку скрипт отправляет токен в заголовке с именем XSRF-TOKEN , настройте службу защиты от подделки для поиска XSRF-TOKEN header:

public void ConfigureServices(IServiceCollection services)
{
  services.AddMvc();
  services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");
}

Ссылка:

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

https://www.tutorialsteacher.com/jquery/jquery-ajax-method

https://www.w3schools.com/jquery/jquery_syntax.asp