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

Posted 2023-05-08

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

【英文标题】：How can I save form data in ASP.NET MVC using Ajax without refresh

【发布时间】：2018-11-19 04:00:17

【问题描述】：

我想在不刷新的情况下使用 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; 

【问题讨论】：

请添加你的系类

你遇到了什么错误？

添加了部门类。数据未保存在数据库中

请分享保存的部门方法。

非常简单的解决方案：您的控制器名称是“SaveDepartment”，并且您编写了具有相同名称的操作方法。这是错误的。这不允许您构建解决方案并给出以下错误：错误：错误 CS0542 'SaveDepartmentController'：成员名称不能与其封闭类型相同示例：//如果我是正确的，这是您的错误 public ActionResult SaveDepartment() return看法（）;

【参考方案1】：

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

看来您正在通过

捕获表单提交

 $("#saveDepartmentForm").submit()

但是您需要取消提交才能使您的页面不刷新：

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

【参考方案2】：

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

通过$.ajax向您发送数据POST。 您的控制器应返回一些值以确保 POST 顺利通过。 一旦您获得传递的值，您就可以准确地重新加载您需要的 DOM 部分，或者什么也不做。

检查我解释它的代码。 （抱歉不能使用你的代码。）

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

// Prepare your input parameters let params = dcBuilderID: dcbuilderid, stockID: $('#selectedStockItem').data('stockid'), quantity: $('#stockQuantity').val() ;

$.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');
      
 );

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

[HttpPut] public ActionResult AddDCBuilderDetail(Guid dcBuilderID, Guid stockID, int 数量) 变量结果 = 假； var message = string.Empty; 尝试 结果 = repoDCBuilder.AddNode(dcBuilderID, stockID, quantity); 如果（！结果） 消息 = MessageHelper.ErrorSaveData; 捕捉（例外前） Logger.Error(ex); 返回 Json(new 成功 = 结果，msg = ex.Message ， JsonRequestBehavior.AllowGet); return Json(new success = result, msg = message , JsonRequestBehavior.AllowGet);

3.一旦您获得传递值，您就可以重新加载您需要的 DOM 部分，或者什么也不做。

查看 #1 并在此处阅读

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

【参考方案3】：

将您的 $.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 工作有更多的了解 流

【参考方案4】：

试试这个：

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