当Chrome调试器打开时,Javascript重定向似乎只能起作用

时间:2013-07-05 17:14:20

标签: javascript jquery asp.net-mvc jquery-ui-dialog

我已经编写了一个Jquery-Ui对话框作为特定链接的确认。但是,这不会正确地重定向到我的删除页面。但是,如果我打开chrome中的调试器进行调试,那么代码将按预期工作。

我发现了同样的问题,但解决方案似乎对我没有用。但情况完全相同。问题JavaScript redirect not working and works only in Chrome if debugger is turned on

所以我有我的链接

<div id="confirm-dialog">
    <div class="dialog-inner">
        <p id="confirm-dialog-message"></p>
    </div>
</div>
<a href="/Customer/Delete/73865878346587" class="confirmLink" title="Delete Customer" data-confirm-message="Are you sure you want to delete this customer?">Delete</a>

我有我的javascript

    $('.confirmLink').click(function (e) {
    BodyScrolling(false);

    var theHref = $(this).attr("href");
    var theTitle = $(this).attr("title") == null ? "Confirm..." : $(this).attr("title");
    var theText = $(this).attr("data-confirm-message") == null ? "Are you sure?" : $(this).attr("data-confirm-message");

    $("#confirm-dialog-message").html(theText);
    $("#confirm-dialog").parent().css({ position: "fixed" }).end().dialog("open");
    $("#confirm-dialog").dialog({
        title: theTitle,
        close: function() {
            BodyScrolling(true);
        },
        buttons: [
        {
            text: "Yes",
            class: "mws-button red",
            click: function () {
                $("#confirm-dialog").dialog("close");
                window.location.href = theHref;
                return false;
            }
        },
        {
            text: "No",
            class: "mws-button black",
            click: function () {
                $("#confirm-dialog").dialog("close");
            }
        }]
    });
    return false;
});

因此,当我点击我的删除链接时,我确实会看到我的确认对话框,其中包含“是”和“否”按钮,css样式正确,并且已捕获链接href并将其绑定到“是”按钮。如果我点击“否”,我会被踢回去,没有进一步发生 - 正确!

如果我单击是,则应该将我发送到它捕获的原始href。我在重定向之前点击Yes按钮时发出了警告(theHref),它确实显示了正确的地址(/ Customer / Delete / 73865878346587),但重定向没有发生。

当我打开chrome调试器来调试javascript或查看是否发生任何错误时,一切都按预期工作并正确地重定向我!

在IE中,它也不起作用。

我试过......

window.location.href = theHref
window.location = theHref
location.href = theHref
$(location).attr('href', theHref)

我也试过添加return false;在我的重定向之后。什么都行不通。

我在上面添加的相同问题的链接说要确保在页面上呈现“是”按钮作为......我的。

任何人都可以放弃任何光明吗?

2 个答案:

答案 0 :(得分:0)

而不是window.location.href = theHref;

你试过window.location.replace(theHref);吗?

返回基础,请尝试:window.location = theHref;

答案 1 :(得分:0)

我找到了答案。 Javascript是一个红鲱鱼!

我确实尝试删除confirmLink jQuery类,以便链接只是一个标准链接,直接进入我的控制器以进行删除。当我做这个测试时,链接工作得很好。因此,我用我的javascript表示问题。但是,似乎情况并非如此,只有当Chrome中的调试器已经或者当时打开时,它才能再次运行。

当我再次访问非确认链接选项时,我发现这不能正常工作,因此表示问题不在于javascript。

您似乎无法从MVC中的HTML链接执行删除操作。这显然是因为涉及安全风险,因为任何人都可以执行对Id的删除。我在我的实现中已经想到了这一点,并添加了代码来检查请求的来源,如果它不是来自我的列表页面,那么它会抛出错误并且不会执行删除操作。我命名我的控制器也没关系,例如Test,执行我的HTTP GET请求的链接永远不会达到此目的。必须有一些算法来确定操作正在执行的操作,并阻止您对HttpGet请求执行操作。有关删除操作的详细信息,请查看此帖子http://stephenwalther.com/archive/2009/01/21/asp-net-mvc-tip-46-ndash-donrsquot-use-delete-links-because

您似乎只能通过HTTP Post执行此操作,这意味着使用Ajax.ActionLink或使用表单和提交按钮。然后必须为HttpPost指定你的Action。

如果像我一样,您希望将链接保留为HTML链接,那么您可以执行以下操作,即下面的代码。我保留了我的HTML链接,将其设置为指向我的HttpPost删除操作。为jquery添加了我的confirmLink类来绑定我的对话框。我拿起链接href并在jquery对话框中设置Yes按钮以动态创建Form并将方法设置为post并将操作设置为链接href。然后我可以在新动态创建的表单上调用submit来执行我的Post to the Delete操作。

我的删除链接

Html.ActionLink("Delete", "Delete", "Caterer", new { id = caterer.Id }, new { @class = "mws-ic-16 ic-delete imageButton confirmLink", @data_confirm_title = "Delete " + caterer.Name, @data_confirm_message = "Are you sure you want to delete this caterer, " + caterer.Name + "?" })

我的Javascript

function LoadConfirm() {
    $('.confirmLink').click(function (e) {
        e.preventDefault();
        BodyScrolling(false);

        var actionHref = $(this).attr("href");
        var confirmTitle = $(this).attr("data-confirm-title");
        confirmTitle = confirmTitle == null ? "Confirm..." : confirmTitle;

        var confirmMessage = $(this).attr("data-confirm-message");
        confirmMessage = confirmMessage == null ? "Are you sure?" : confirmMessage;

        $("#confirm-dialog").dialog({
            autoOpen: false,
            modal: true,
            width: 400,
            closeOnEscape: true,
            close: function () { BodyScrolling(true); },
            title: confirmTitle,
            resizable: false,
            buttons: [
            {
                text: "Yes",
                class: "mws-button red",
                click: function () {
                    StartLoading();
                    $(this).dialog("close");
                    var form = document.createElement("form");
                    form.setAttribute("method", "post");
                    form.setAttribute("action", actionHref);
                    form.submit();
                }
            },
            {
                text: "No",
                class: "mws-button black",
                click: function () {
                    $("#confirm-dialog").dialog("close");
                    return false;
                }
            }
            ]
        });
        $("#confirm-dialog #confirm-dialog-message").html(confirmMessage);
        $("#confirm-dialog").parent().css({ position: "fixed" });
        $("#confirm-dialog").dialog("open");
    });
}

我的行动

    [HttpPost]
    [Authorize(Roles = "User")]
    public ActionResult Delete(long id)
    {
        //Perform my delete

        return RedirectToActionPermanent("List");
    }