Question

我想使用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; }
}

Answer 1

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

Answer 2

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

您似乎正在捕获通过

提交的表单

 $("#saveDepartmentForm").submit()

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

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

Answer 3

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

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

$.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 quantity) { var result = false; var message = string.Empty; try { result = repoDCBuilder.AddNode(dcBuilderID, stockID, quantity); if (!result) { message = MessageHelper.ErrorSaveData; } } catch (Exception ex) { Logger.Error(ex); return Json(new { success = result, msg = ex.Message }, JsonRequestBehavior.AllowGet); } return Json(new { success = result, msg = message }, JsonRequestBehavior.AllowGet); }

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

看看＃1并在这里阅读

Answer 4

尝试一下：

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

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

4 个答案: