Jquery 如何使用Ajax在ASP.NET MVC中保存表单数据而无需刷新

我想使用Ajax在ASP.NET MVC中保存表单数据，无需刷新。我试了两天，但还是不行。我是使用web方法完成的，但在ASP.NETMVC中不起作用

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 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);
    }
});

查看这些内容，以便更好地了解ajax工作 流动

试试这个：

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

如何使用Ajax在ASP.NET MVC中保存表单数据而无需刷新

您似乎正在通过“提交”捕获表单

 $("#saveDepartmentForm").submit()

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

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

---

有一个非常简单的解决方案，我将提供一个草案

通过

$.ajax

POST向您发送数据

控制器应该返回一些值，以确保POST顺利通过

一旦传递了值，就可以完全重新加载所需的DOM部分，或者什么也不做

检查我解释它的代码。（很抱歉，无法使用您的代码。）

1。通过$.ajax POST向您发送数据

//准备输入参数
设参数={dcBuilderID:dcBuilderID，stockID:$（'selectedStockItem'）。数据（'stockID'），数量：$（'#stockQuantity'）。val（）

2.您的控制器应该返回一些值，以确保POST顺利通过

[HttpPut]
public ActionResult AddDCBuilderDetail（Guid dcBuilderID、Guid stockID、整数数量）
{
var结果=假；
var message=string.Empty；
尝试
{
结果=repoDCBuilder.AddNode（dcBuilderID、stockID、quantity）；
如果（！结果）
{
message=MessageHelper.ErrorSaveData；
}
}
捕获（例外情况除外）
{
记录器错误（ex）；
返回Json（新的{success=result，msg=ex.Message}，
JsonRequestBehavior.AllowGet）；
}
返回Json（新的{success=result，msg=message}，JsonRequestBehavior.AllowGet）；
}

3。一旦传递了值，就可以完全重新加载所需的DOM部分，或者什么也不做

请看#1并在此处阅读

if (data.success === true) {
    // Here you do nothing or update DOM
}

---

请添加您的部门类您有什么错误？添加了部门类。数据未保存在数据库中请共享savedepartment方法。非常简单的解决方案：您的控制器名称为“savedepartment”，并且您使用相同的名称编写了操作方法。这是错误的。这不允许您生成解决方案，并导致以下错误：错误：错误CS0542'SaveDepartmentController'：成员名称不能与其封闭类型相同示例：//如果我是正确的，则这是您的错误public ActionResult SaveDepartment（）{return View（）；}

$.ajax({ url: '@Url.Action("AddDCBuilderDetail", "DCBuilder")', data: params, method: 'PUT',
   }).fail(function () {
     // console.log('Error');
   }).done(function(data) {
      //console.log(data);
      if (data.success === true) {
       // Here you do nothing or update DOM
      }
      else {
        // console.log('Error');
      }
 });

if (data.success === true) {
    // Here you do nothing or update DOM
}