如何在不刷新的情况下使用Ajax在ASP.NET MVC中保存表单数据

Posted 2021-03-27

我想使用Ajax在ASP.NET MVC中保存表单数据而不刷新。我尝试了两天，但仍然没有用。我使用Web方法做到了，但这在ASP.NET MVC中不起作用。

Ajax代码：

<script>
    $(document).ready(function() {
        $("#saveDepartmentForm").submit(function () {
            var dept = {};
            dept.DepartmentCode = ("#departmentCode").val();
            dept.DepartmentName = ("#departmentName").val();
                $.ajax(
                {
                    type: "POST",
                    url: "SaveDepartment/SaveDept",
                    data: { aDepartment: dept },
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        alert("User has been added successfully.");

                    },
                    error: function(err) {
                        alert(err);
                    }

                });

            });

       });
</script>

控制器代码：

public ActionResult SaveDepartment()
{
    return View();
}

[HttpPost]
public ActionResult SaveDept(Department aDepartment)
{
    return Json(aSaveDepartmentManager.SaveDepartment(aDepartment));
}

系类：

public class Department
{
    public int Id { get; set; }
    public string DepartmentCode { get; set; }
    public string DepartmentName { get; set; }
}

答案

将你的$.ajax()改为：

$.ajax({
    type: "POST",
    url: "/SaveDepartment/SaveDept",
    data: dept,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(data) {
        alert("User has been added successfully.");
    },
    error: function(err) {
        alert(err);
    }
});

看看这些demos，这样你就可以更好地了解ajax的工作流程

另一答案

如何在不刷新的情况下使用Ajax在ASP.NET MVC中保存表单数据

您似乎正在通过提交表单提交

 $("#saveDepartmentForm").submit()

但是，您需要取消提交，以便您的页面不刷新：

 $("#saveDepartmentForm").submit(function(e) {
   e.preventDefault();
   // ... the rest of your code.
 })

另一答案

试试这个：

var dept = new Array();
dept.push({DepartmentCode:DepartmentCode, DepartmentName:DepartmentName});