ajax 后自动调用 asp.net mvc 索引操作答案

【问题标题】：asp.net mvc index action is called automatically after ajaxajax 后自动调用 asp.net mvc 索引操作
【发布时间】：2016-07-12 08:17:35
【问题描述】：

我有一个在数据库中创建记录的操作：

 [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create([Bind(Include = "Id,Name,Description")] SampleViewModel sampleVM)
    {
        try
        {
            _service.Add(sampleVM);
            this.ShowMessage(new ToastMessage(ToastType.Success, "Record Added", ToastrDisplayType.TopLeft));
        }
        catch (Exception ex)
        {
            this.ShowMessage(new ToastMessage(ToastType.Error, ex.Message, ToastrDisplayType.TopLeft));
            return Json("failed");
        }

        return Json("success");
    }

这个 Action 被 AJAX 调用：

 $().ready(function () {
        $("#btnSave").click(function () {
            var serviceURL = '';

            var sample = {
                "Id": $('#hdnId').val(),
                "Name": $("#txtName").val(),
                "Description": $("#txtDescription").val(),
            };

            if (save_method == 'add') {
                serviceURL = '@Url.Action("Create", "Samples")';
            }
            else if (save_method == 'edit') {
                serviceURL = '@Url.Action("Edit", "Samples")';
            }

            $.ajax({
                type: "POST",
                url: serviceURL,
                data: addRequestVerificationToken(sample),
                success: function (data, textStatus, jqXHR) {
                    handleAjaxMessages();
                },

            });
        });
    });

问题是Index Action在Create Action之后被自动调用了：

[HttpGet]
    public ActionResult Index()
    {
        return View();
    }

Fiddler snapshot

由于调用了索引操作，所以不显示 Toast 消息，我怎样才能只调用创建操作（不调用索引操作）？

【问题讨论】：

无论您发布什么似乎都很好。你能看出是否调用了 create 动作吗？
是的，它被调用了，我已经放了一个断点。
那么你的 toast 消息也应该被调用。在哪一行代码之后，控件是否真正传递给 index 方法
请显示 btnSave 的 HTML
我用它来发送消息stackoverflow.com/questions/18474035/…。保存按钮的 html 是。当我点击保存时调用索引操作然后创建操作。

标签： ajax asp.net-mvc

【解决方案1】：

所以你的"#btnSave" 是一个<button type="submit" /> 按钮。浏览器会按顺序执行以下操作：

调用您在代码中显示的您自己的点击处理程序。
将您的按钮所在的<form> 发布到服务器，然后重新加载页面并给出它给出的答案。

您有两个选择：要么删除表单并使用常规的 <button>（不带 type="submit"），要么稍微修改点击处理程序：

$("#btnSave").click(function (event) {
        event.preventDefault(); // notice this line
        var serviceURL = '';

【讨论】：