Jquery mobile 未在 MVC4 RedirectToAction 上正确更新 URL

Question

我遇到了 jquery mobile 没有更新来自控制器的 MVC4 RedirectToAction 调用的 URL 的问题。我已经阅读了其他具有多种解决方案的类似问题，但没有一个对我有用。我希望 jquery 移动加载消息出现在页面之间，所以我不能使用 $.mobile.ajaxEnabled = false 作为解决方案。

起始网址：

//localhost/Application/Demo/Views/FirstPageController/

如果我保留我的代码（如下），它会在应该显示此 URL 时显示相同的 URL：

//localhost/Application/Demo/Views/SecondPageController/Edit

我尝试使用 TempData 来保存控制器内的 dataurl，但最终只是将 dataurl 附加到上述 URL 上。

例如，

//localhost/Application/Demo/Views/FirstPageController/ 

将显示为

//localhost/Application/Demo/Views/FirstPageController/#Application/Demo/Views/SecondPageController/Edit

而不是

//localhost/Application/Demo/Views/SecondPageController/Edit

如何让它显示下一页的正确网址？

控制器：

    [HttpPost]
    public ActionResult Index(FirstPageViewModel viewModel)
    {
        return RedirectToAction("Edit", "SecondPageController");
    }

Layout.js（针对所有页面全局运行）

$(document).on("mobileinit", function () {
    $.mobile.loader.prototype.options.text = "Loading...";
    $.mobile.loader.prototype.options.textVisible = true;
    $.mobile.loader.prototype.options.theme = "b";
    $.mobile.loader.prototype.options.html = "";
    $.ajaxSetup({
        beforeSend: function (x, y) {
            showProgress();
        },
        complete: function (x, y) {
            hideProgress();
        }
    });
})

function showProgress(element) {
    if (element == undefined) {
        $("#FormSubmit").find("input").addClass("ui-disabled");
        $("#FormSubmit").find("select").addClass("ui-disabled");
        $("#FormSubmit").find("button").addClass("ui-disabled");
        $.mobile.loading('show');
    }
    else {
        $(element).addClass("ui-disabled");
        $.mobile.loading('show');
    }
}

function hideProgress(element) {
    if (element == undefined) {
        $("#FormSubmit").find("input").removeClass("ui-disabled");
        $("#FormSubmit").find("select").removeClass("ui-disabled");
        $("#FormSubmit").find("button").removeClass("ui-disabled");
        $.mobile.loading('hide');
    }
    else {
        $(element).removeClass("ui-disabled");
        $.mobile.loading('hide');
    }
}

按钮（来自第一个剃须刀页面）

<input type="submit" data-icon="arrow-r" data-mini="true"  data-iconpos="right"    name="Continuebutton" value="Continue" />

Answer 1

在新页面对象中手动设置您的 Url 以及重定向：

SetTempDataUrl("MyController", "MyAction", new[] { param1, param2});
RedirectToAction("MyAction", "MyController", new [] {param1, param2});

jqm html

<div data-role="page" id="mainPage" data-theme="a" @TempData[ "DataUrl" ] >
...
</div>

mvc 代码

public void SetTempDataUrl( string controller, string action = "", IEnumerable<string> param = null )
{
    List<string> content = new List<string>() { controller, action };

    if ( param != null )
    {
    content.AddRange( param );
    }

    TempData[ "DataUrl" ] = "data-url=" + Url.Content( "~" ) + string.Join( "/", content.Where( s => !string.IsNullOrEmpty( s ) ) );

}

说明

JQM 正在通过一些内部 ajax 加载方法更改页面。如果您在服务器代码中重定向操作，jqm 不会注意到这一点，也不会正确更改 url。

Answer 2

最终对我们的布局 js 执行此操作：

function showProgress(ajax) {
    var element = $("div[data-role='page']");
    if (element != undefined) {
        var docHeight = $(element).height();
        $(element).append("<div id='overlay' class='overlay'></div>");
        $(".overlay").height(docHeight)
        $(".overlay").fadeIn();
        $.mobile.loading('show')
    }

}


function hideProgress(ajax) {    
    if (ajax) {
        $.mobile.loading('hide')
    }
    var overlay = $("div[data-role='page']").find(".overlay");
    if (overlay != undefined) {
        $(overlay).fadeOut();
    }

}

$(document).on("mobileinit", function () {
    $.mobile.loader.prototype.options.text = "Loading...";
    $.mobile.loader.prototype.options.textVisible = true;
    $.mobile.loader.prototype.options.theme = "b";
    $.mobile.loader.prototype.options.html = "";
});