Ajax: отправка модели контроллеру из списка, повторяемого циклом foreach

Question

Мне нужно иметь возможность отправлять список моделей обратно в контроллер из представления, но только после проверки входных данных.

Использование AJAX Я могу заставить его работать, но страница обновляется, и я не улавливаю данные, но они отображаются в URL. Пример: https://localhost: 44308 / PlayTest / PlayTest? PersonName = Test + User & DevOps-rate = 3 & Software + Development-rate = 2 & Solution + Architecture-rate = 1 & comments = & save = Save

Но когда я пытаюсь использовать Javascript и JQuery, я могу поймать только «имя человека», а не комментарии или оценки в методе публикации.

HTML

<div class="tabcontent" id="testing">
  <form name="skillform"
        id="skillform"
        asp-action="SaveRecord"
        asp-controller="YourSkills"
        data-ajax="true"
        data-ajax-method="post">
      <h3 class="tab-title">Testing</h3>
      @foreach (var item in Model.Skills)
      {
          @if (item.SkillGroupID == 2)
          {
              <div class="star-rating">
                  <h5 class="skill-name" id="skill-title">@item.SkillName</h5>
                  <input type="radio" id="@item.SkillName@item.SkillGroupID-star3" name="@item.SkillName-rate" value="3" /><label for="@item.SkillName@item.SkillGroupID-star3" title="Advanced - 3 Stars">3 Stars</label>
                  <input type="radio" id="@item.SkillName@item.SkillGroupID-star2" name="@item.SkillName-rate" value="2" /><label for="@item.SkillName@item.SkillGroupID-star2" title="Intermediate - 2 Stars">2 Stars</label>
                  <input type="radio" id="@item.SkillName@item.SkillGroupID-star1" name="@item.SkillName-rate" value="1" /><label for="@item.SkillName@item.SkillGroupID-star1" title="Beginner - 1 Star">1 Stars</label>
              </div>
              <br />
              <br />
          }
      }
      <div class="comments">
          <h6 class="comment-name">Comments</h6>
          <textarea rows="4" cols="50" name="comments" id="comment-text-area" spellcheck="true"></textarea>
      </div>
      <div class="buttons">
          <input type="reset" value="Clear">
          <button type="button" class="edit" onclick="alert('This will allow the tab to be edited')">Edit</button> <!--add cancel button when opened-->
          <input type="submit" name="save" value="Save" id="btnSave" skill-group="2"/>
      </div>
  </form>
</div>

Почтовый метод

public JsonResult SaveRecord(string PersonName, List<SkillsModel> skill, string comment)
{
    SkillsMatrixDB database = HttpContext.RequestServices.GetService(typeof(SkillsMatrix.Models.SkillsMatrixDB)) as SkillsMatrixDB;
    List<PersonModel> people = database.GetAllPeople();

    PersonModel recordingPerson = FindPerson(people, PersonName);

    if (skill.Count() > 1)
    {
        for (int i = 0; i < skill.Count(); i++)
        {
            RecordsModel records = new RecordsModel();
            records.PersonID = recordingPerson.PersonID;
            records.SkillGroupID = skill[i].SkillGroupID;
            records.SkillID = skill[i].SkillID;
            records.SkillLevelID = Convert.ToInt32(HttpContext.Request.Form[skill[i].SkillName + skill[i].SkillGroupID + "-rate"]);
            records.Comments = HttpContext.Request.Form["comments"].ToString();
            records.DateSaved = DateTime.Now;
            records.YearlyQuarter = DateTime.Now.Month / 3;
            //database.SaveRecord(records);
        }
    }
    else if (skill.Count() == 1)
    {
        RecordsModel records = new RecordsModel();
        records.PersonID = recordingPerson.PersonID;
        records.SkillGroupID = skill[0].SkillGroupID;
        records.SkillID = skill[0].SkillID;
        records.SkillLevelID = Convert.ToInt32(HttpContext.Request.Form[skill[0].SkillName + skill[0].SkillGroupID + "-rate"]);
        records.Comments = HttpContext.Request.Form["comments"].ToString();
        records.DateSaved = DateTime.Now;
        records.YearlyQuarter = DateTime.Now.Month / 3;
        //database.SaveRecord(records);
    }

    return Json(recordingPerson.Name);
}

JS

$(document).ready(function () {
    $("#btnSave").click(function () {
        $.ajax({
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            type: "POST", //HTTP POST Method
            url: "YourSkills/SaveRecord", //Controller/View
            data: $('#skillform').serialize(),
            success: function (data) {
                console.log(data);
                alert('You saved it!');
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log(textStatus);
                alert('Something went wrong. save failed!');
            }
        });
    });
});

Я чувствую себя так, как я прочитал, чтобы составить список в JS неверно, и отловить данные тоже не совсем правильно. Если бы кто-то мог помочь, это было бы здорово. Я так растерялся, почему работа без JS работает и подбирает нужные данные, но по какой-то причине я не могу.

РЕДАКТИРОВАТЬ Я попробовал то, что сказал Эмиль Зурбье, но Я использую Visual Studio 2019 и в консоли все, что я получаю, это следующее:

Microsoft.AspNetCore.Hosting.Diagnostics: Information: Request starting HTTP/2.0 POST https://localhost:44308/PlayTest/YourSkills/SaveRecord application/json; charset=UTF-8 235
Microsoft.AspNetCore.Hosting.Diagnostics: Information: Request finished in 6.0162ms 404 
Microsoft.AspNetCore.Hosting.Diagnostics: Information: Request starting HTTP/2.0 POST https://localhost:44308/PlayTest/SaveRecord application/x-www-form-urlencoded 233
Failed to load resource: the server responded with a status of 404 () [https://localhost:44308/PlayTest/YourSkills/SaveRecord]
Microsoft.AspNetCore.Routing.EndpointMiddleware: Information: Executing endpoint 'SkillsMatrix.Controllers.PlayTestController.SaveRecord (SkillsMatrix)'
error
Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker: Information: Route matched with {action = "SaveRecord", controller = "PlayTest"}. Executing controller action with signature Microsoft.AspNetCore.Mvc.JsonResult SaveRecord(System.String, System.Collections.Generic.List`1[SkillsMatrix.Models.SkillsModel], System.String) on controller SkillsMatrix.Controllers.PlayTestController (SkillsMatrix).

Answer 1

Ваша страница перезагружается, потому что вы отправляете форму каждый раз, когда нажимаете кнопку #btnSave. Что вы хотите сделать, так это прослушать событие submit в самой форме и отменить его с помощью event.preventDefault(). Это позволяет вам создать собственное поведение при отправке. И не позволяет форме перезагрузить страницу.

$(document).ready(function() {
  $('#skillform').on('submit', function(event) {
    ...
    event.preventDefault();
  });
});

Ваш HTML, кажется, пропускает элемент #skill-id. Если вы хотите включить данные из вашей формы в контроллер, я предлагаю вам использовать скрытые поля ввода вместо чтения атрибутов из ваших элементов.

<input type="hidden" name="skill-name" value="">
<input type="hidden" name="skill-id" value="">
<input type="hidden" name="skill-group" value="">

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

Тогда вместо использования .val() для получения каждого отдельного поля используйте $('form').serialize(), чтобы извлечь пары имя и значение из формы и использовать их в вашем AJAX запросе. Таким образом, вы отправляете те же данные, что и при обычной отправке.

$.ajax({
  contentType: 'application/json; charset=utf-8',
  dataType: 'json', 
  type: "POST",
  url: "YourSkills/SaveRecord",
  data: $('#skillform').serialize(); // <-- Get all values from the form.
  success: function (data) { // <-- data is the response you receive from the controller.
    console.log(data); 
    alert('You saved it!');
  },
  error: function (jqXHR, textStatus, errorThrown) {
    alert('Something went wrong. save failed!');
  }
});

Я рекомендую вам проверить документы $.ajax, чтобы использовать правильные методы и обозначения для использования. функция правильно.

Answer 2

перезагрузка страницы может произойти, потому что ошибка произошла при выполнении js во время создания объекта умений. Поскольку это неправильный способ
определить объект умений таким образом, остальные вещи выглядят хорошо.

 let skills = {};
skills['SkillID']  = $("#skill-id").val();
skills['SkillGroupID']  = $(this).attr('skill-group');
skills['SkillName']  = $("#skill-title").val();