Question

当我单击保存按钮保存我的控制器功能时，会触发两次。我的代码中有什么问题我不知道。请帮帮我。

这是我的按钮单击以调用ajax并保存值。

<button id="btnSave" type="submit" title="Save" class="btn btn-success" onclick="getPage('@(Url.Action("Save", "Carriers"))')">
    <span class="glyphicon glyphicon-floppy-disk"></span>Save
</button>

这是我的ajax

$.ajax({
    type: "POST",
    url: page,
    data: $("#frmEdit").serialize(),
    xhrFields: {
        withCredentials: true
    },
    success: function (html) {
        $('#CarrierList').empty();
        $('#CarrierList').append($.parseHTML(html));
    },
    error: function () {
        var error = "Error occured during loading Carrier items...";
        $('#errorMessage').empty();
        $('#errorMessage').append(error);
        $('#errorModal').modal('show');
    },
    complete: function () {
        $('#loaderImg').modal('hide');
    }
});
}

这是我的控制器方法

public override ActionResult Save(CarrierDTO carrierDTO)
{
    string[] ErrorMessageArray = new string[4];
    int errorIndex = 0;
    if (ModelState.IsValid)
    {
        MessageCollection messages = new MessageCollection();
        carrierDTO.Save(ref messages);
        if (messages.IsErrorOccured() || messages.IsExceptionOccured())
        {
            ModelState.AddModelError("", messages[0].Text);
            return View("Edit", carrierDTO);
        }
        return View("Edit", carrierDTO);
    }

Answer 1

您需要添加'preventDefault（）'。

如果调用了prevent default方法，则事件的默认操作不会触发。

在您的情况下，防止默认将停止提交表单（提交按钮的默认操作），并使用ajax代码段来代替。

<强> JQ：

  $(function(e){
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: page,
            data: $("#frmEdit").serialize(),
            xhrFields: {
                withCredentials: true
            },
            success: function (html) {
                $('#CarrierList').empty();
                $('#CarrierList').append($.parseHTML(html));
            },
            error: function () {
                var error = "Error occured during loading Carrier items...";
                $('#errorMessage').empty();
                $('#errorMessage').append(error);
                $('#errorModal').modal('show');
            },
            complete: function () {
                $('#loaderImg').modal('hide');
            }
        });
        }
        });

Answer 2

两种解决方案

在按钮控件中使用type="button"

<button id="btnSave" type="button" title="Save" class="btn btn-success" onclick="getPage('@(Url.Action("Save", "Carriers"))')"> <span class="glyphicon glyphicon-floppy-disk"></span>Save </button>
或删除onclick="getPage('@(Url.Action("Save", "Carriers"))')，因为提交按钮默认采用操作。

<button id="btnSave" type="submit" title="Save" class="btn btn-success" "> <span class="glyphicon glyphicon-floppy-disk"></span>Save </button>

Answer 3

在App_Start文件夹中打开BudleConfig.cs文件并进行一些更改：首先来看看这一行（这是原始的VS生成的内容）。

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
     "~/Scripts/jquery.validate*"));

请注意，'... validate *'模式将从您的Scripts文件夹中加载五个脚本（在我的情况下也是如此）：

~/Scripts/jquery.validate-vsdoc.js
~/Scripts/jquery.validate.js
~/Scripts/jquery.validate.min.js
~/Scripts/jquery.validate.unobtrusive.js
~/Scripts/jquery.validate.unobtrusive.min.js

如您所见，您正在加载unobtrusive.js两次（jquery.validate.unobtrusive.js和jquery.validate.unobtrusive.min.js）。所以，让你自己的代码像这样排除，比如完整版js：

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
     "~/Scripts/jquery.validate-vsdoc.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
     "~/Scripts/jquery.validate.min.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
     "~/Scripts/jquery.validate.unobtrusive.min.js"));

或根据您的需要制作一些加载完整或最小版本的机制。

控制器函数在asp.net mvc中调用两次

3 个答案: