如何在ASP.NET MVC中使用jQuery / Ajax将数据插入数据库？

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

为什么使用提交按钮？ 由于您制作的JS函数正在处理帖子，因此您无需使用“提交”按钮，这将导致整个页面的重新加载。 只需使用普通按钮即可。

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

Answer 2

视图中存在几个问题：

1）您已订阅了提交按钮的click事件，而没有阻止提交表单的默认操作。 这触发了POST操作，该操作重定向到控制器操作并重新加载页面，而没有任何时间执行AJAX函数。 您应该使用preventDefault()来取消按钮的默认操作。

2）当使用type: "POST"选项时，接收AJAX回调的控制器没有[HttpPost]属性。 考虑在控制器名称的顶部添加[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 3

像下面一样更改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");
            }

        });