Jquery mobile在MVC4 RedirectToAction上没有正确更新URL

时间:2013-11-20 21:53:33

标签: asp.net-mvc jquery jquery-mobile

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

开始网址:

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

如果我按原样(下方)保留我的代码,则在显示此网址时会显示相同的网址:

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

2 个答案:

答案 0 :(得分:0)

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

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。

答案 1 :(得分:0)

结束我们的布局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 = "";
});