javascript - 在asp.net mvc中 Controller 函数调用两次

Question

当我单击“保存”按钮来保存我的 Controller 功能时，会触发两次。我不知道我的代码有什么问题。请帮助我。

这是我单击按钮来调用 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');
    }
});
}

这是我的 Controller 方法

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()”。

If the prevent default method is called, the default action of the event will not be triggered.

在您的情况下，阻止默认值将停止提交表单(提交按钮的默认操作)，并使用 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');
            }
        });
        }
        });