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

Question

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

开始URL:

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

如果我把我的代码保持原样（如下），它将在应该显示以下URL时显示相同的URL：

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

我曾尝试使用TempData在控制器中保存一个数据URL，但它最终只是将数据URL附加到上面的URL上。

例如，

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

将显示为

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

而不是

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

如何让它为下一页显示正确的url？

控制器：

    [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 = "";
});