Как вставить данные в базу данных, используя jQuery / Ajax в ASP.NET MVC?

Question

Я застрял в течение нескольких часов, пытаясь найти ошибки при попытке вставить данные в базу данных с помощью ajax.Когда я нажимаю кнопку отправки, он просто перезагружается, но не сохраняется.Я запутался в этой проблеме.Я искал много блогов, но не нашел точного решения этой проблемы.

Класс модели

public class Semester
{       
    [Key]
    public int SemesterId { get; set; }

    [Display(Name = "Semester Code")]
    [Required(ErrorMessage = "please enter semester code")]
    public string SemesterCode { get; set; }

    [Display(Name = "Semester Name")]
    [Required(ErrorMessage = "Please enter semeter name")]
    public string SemesterName { get; set; }
}

Контроллер [HttpGet]

  public ActionResult SaveSemesterGet()
  {
    return View();
   }
   public JsonResult AsCreateSemester(Semester semester){


            db.Semesters.Add(semester);
            db.SaveChanges();


        return Json(semester, JsonRequestBehavior.AllowGet);
     }

Индекс:

      @model CampusManagementApp.Models.Semester
      <h2>SaveSemesterGet</h2>
      <form method="POST">

      @Html.AntiForgeryToken()

      <div >
        <h4>Semester</h4>
        @Html.ValidationSummary(true)

        <div class="form-group">
        @Html.LabelFor(model => model.SemesterCode, new { @class = "control- 
     label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.SemesterCode)
            @Html.ValidationMessageFor(model => model.SemesterCode)
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.SemesterName, new { @class = "control- 
   label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.SemesterName)
            @Html.ValidationMessageFor(model => model.SemesterName)
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" id="btn" value="SAVE"/>
        </div>
    </div>
 </div>

<div>
    @*   @Html.ActionLink("Back to List", "Index")*@
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script>
    $(document).ready(function() {
           $("#btn").click(function(a) {

        a.preventDefault();
        var code = $("#SemesterCode").val();
        var name = $("#SemesterName").val();
        var jsonData = {
            SemesterCode: code,
            SemesterName: name
        };


        $.ajax({
            type: "POST",
            url: '@Url.Action("AsCreateSemester", "Semester")',
             data:  JSON.stringify(jsonData),
               dataType:"json",


            success:function(data) {
                alert(data.SemesterName+"successfully inserted");
            },

            failure: function () {
                alert("not successfull");
            }

        });
</script>

Что можно сделать, чтобы избавиться от этой проблемы?

Answer 1

У вас есть несколько проблем в представлении:

1) Вы подписаны на событие click кнопки отправки, не препятствуя выполнению действия по умолчанию при отправке формы.Это запускаемое действие POST, которое перенаправляет в действие контроллера и перезагружает страницу, не оставляя времени для выполнения функции AJAX.Вы должны использовать preventDefault() для отмены действия кнопки по умолчанию.

2) Контроллер, который получает обратный вызов AJAX, не имеет атрибута [HttpPost], когда используется опция type: "POST".Попробуйте добавить атрибут [HttpPost] поверх имени контроллера.

3) Ваш список имен свойств AJAX не совпадает с именами свойств, определенными внутри класса модели.Подумайте об использовании модели представления, которая принимает два свойства и использует ее в качестве параметра действия.

Следовательно, обратный вызов AJAX должен иметь настройку, как показано в следующем примере:

Модель представления

public class SemesterVM
{
    public string SemesterCode { get; set; }
    public string SemesterName { get; set; }
}

Просмотр

<input type="button" id="btn" value="SAVE" />

JS (событие щелчка)

$('#btn').click(function (e) {
    e.preventDefault(); // prevent default submit

    var code = $("#SemesterCode").val();
    var name = $("#SemesterName").val();

    // all property names must be same as the viewmodel has
    var jsonData = {
        SemesterCode: code,
        SemesterName: name
    };

    $.ajax({
        type: "POST",
        url: '@Url.Action("SaveSemester", "Student")',
        contentType: "application/json;charset=utf-8",
        data: JSON.stringify(jsonData),
        dataType: "json",
        success: function() {
            // do something
        }
    });
});

Действие контроллера

[HttpPost]
public JsonResult SaveSemester(SemesterVM semester)
{
    // add semester data

    return Json(semester);
}

Answer 2

После изменения метода ajax (), как показано ниже, он работает.

       $.ajax({
            type: "POST",
            url: '@Url.Action("AsCreateSemester", "Semester")',

         data: {
             SemesterCode: code,
             SemesterName: name
         },



            success:function(data) {
                alert(data.SemesterName+"successfully inserted");
            },

            failure: function () {
                alert("not successfull");
            }

        });

Answer 3

Почему вы используете кнопку отправки?Поскольку функция JS, которую вы сделали, обрабатывает сообщение, вам не нужно использовать кнопку отправки, которая приводит к перезагрузке всей страницы.Просто используйте обычную кнопку.

            <input type="button" id="btn" value="SAVE"/>