Question

我有一个编辑局部视图加载到一个对话框中，该对话框在第一次调用时工作，编辑然后保存数据，很棒。

但是，如果您不刷新页面（我不想这样做），再次点击“编辑”，您将被重定向到我尝试加载的部分页面。

看起来AJAX正在被忽略，而控制器中的Action方法正在被调用。

我通过我的布局页面中的包添加了不引人注意的，主视图使用了，部分没有，但我不相信它需要。

我还尝试使用preventDefault和return false;的不同接近但没有成功，如下所示：

editBtn.click(function (e) {
            editDialogPlaceholder.load(this.href, function () {
                e.preventDefault(); //tried
                $(this).dialog('open');
                return false; //tried
            })
        return false;
    });

我该怎么办？

AJAX / JS

$(function () {
        var editBtn = $('.editLink');
        var editDialogPlaceholder = $('#editDialogUI');

        editBtn.button();
        // build the dialog form
        editDialogPlaceholder.dialog({
            autoOpen: false,
            modal: true,
            resizable: false,
            open: function (event, ui) {
                $(this).load('@Url.Action("Edit","Announcements")');
            },
            buttons: {
                "Save": function () {
                    saveAnnouncement();
                    fetchList();
                    $(this).dialog("close");
                },
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        });
        // on click load the dialog form, return false to stop redirect
        editBtn.click(function () {
            editDialogPlaceholder.load(this.href, function () {
                $(this).dialog('open');
            })
            return false;
        });
    });
    //post data back to the controller to save to the db
    function saveAnnouncement() {
        $.ajax({
            url: '@Url.Action("Edit","Announcements")',
                type: 'POST',
                data: $('form').serialize()
            })
        }

        function fetchList() {
            var aList = $('#announcementList');
            aList.load('@Url.Action("Fetch")');
        }

修改操作方法

[HttpGet]
        public ActionResult Edit(int id)
        {
                var announcementModel = (from a in db.DbAnnouncement
                           where a.Id == id
                           select a).SingleOrDefault();
                return PartialView("Edit", announcementModel);
        }

用于打开对话框的Html.ActionLinks - 第二次点击它会重定向到控制器中指定的部分。

<div class="announcementTableCell">
                    @Html.ActionLink("Edit", "Edit", new { id = Model[i].Id }, new { @class = "editLink" })

                    @Html.ActionLink("Delete", "Delete", new { Model[i].Id }, new { @class = "dltLink" })
                </div>

Answer 1

评论中建议的解决方案是使用jQuery.fn.on作为点击按钮，因为当时页面没有被刷新，因此绑定到未被刷新的静态元素意味着正在调用action方法，因此重定向到局部视图。

因此工作按钮点击代码：

$('#announcementList').on("click", ".editLink", function () {
            editDialogPlaceholder.load(this.href, function () {
                $(this).dialog('open');
            })
            return false;
        });

为什么第二个链接点击重定向到部分非对话框

1 个答案: