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

问题描述 投票:-2回答:3

我想使用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; }
}
jquery asp.net ajax asp.net-mvc asp.net-mvc-4
3个回答
0
投票

将你的$.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的工作流程


0
投票

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

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

 $("#saveDepartmentForm").submit()

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

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

-1
投票

试试这个:

var dept = new Array();
dept.push({DepartmentCode:DepartmentCode, DepartmentName:DepartmentName});
© www.soinside.com 2019 - 2024. All rights reserved.