jQuery Mobile无法在MVC4 RedirectToAction上正确更新URL

Question

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

起始网址：

//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

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

控制器：

    [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

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

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