为什么第二个链接单击重定向到部分不是对话框

why does the second link click redirect to partial not dialog

本文关键字:对话框 第二个 链接 单击 重定向 为什么      更新时间:2023-09-26

我有一个编辑部分视图要在对话框中加载,该视图在第一次调用时有效,然后编辑保存数据,很棒。

但是,如果您不刷新页面(我不想这样做),然后再次单击"编辑",您将被重定向到我尝试加载的部分页面。

看起来 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>

注释中提出的解决方案是使用jQuery.fn.on作为单击按钮,因为当时页面未刷新,因此绑定到未刷新的静态元素意味着正在调用操作方法,因此重定向到部分视图。

因此,工作按钮单击代码:

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