jQuery Mobile/MVC：使用 RedirectToAction 获取浏览器 URL

Question

我的第一篇文章...

当我使用 RedirectToAction 时，浏览器中的 url 不会改变。我怎样才能做到这一点？

在使用 Web 表单 10 多年后，我正在切换到 ASP.NET MVC 3.0（也使用 jQuery Mobile）。我已经完成了大约 8 周，经过几本书并在 Google 上搜索了答案，我快要干了。

我在 Global.asax 中定义了一条路线：

routes.MapRoute(
"Routes",
"{controller}/{action}/{id}",
new { controller = "Shopping", action = "Index", id = UrlParameter.Optional }

我有一个包含以下操作的 ShoppingController：

public ActionResult Cart() {...}

public ActionResult Products(string externalId) {...}

[HttpPost]
public ActionResult Products(List<ProductModel> productModels)
{
    // do stuff
    return RedirectToAction("Cart");
}

当我进行获取和发布（帖子具有 RedirectToAction）时的 url 始终是：

/Shopping/Products?ExternalId=GenAdmin

在发布和 RedirectToAction 之后，我希望浏览器中的 url 更改为：

/Shopping/Cart

我尝试过 Redirect 和 RedirectToRoute，但得到了相同的结果。

任何帮助将不胜感激。

[更新] 我发现 jQuery Mobile AJAX 帖子是这里的罪魁祸首。如果我关闭 jQuery Mobile 的 AJAX 就可以了。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
    // do not handle links via ajax by default
    $(document).bind("mobileinit", function () { $.mobile.ajaxEnabled = false; });
</script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />

上述脚本的顺序很重要。我必须先将脚本包含到 jQuery 中，然后包含脚本以禁用 jQuery Mobile 对 AJAX 的使用，然后再将脚本包含到 jQuery Mobile。

我仍然想找到一种使用 AJAX 并正确更新 url 的方法。或者至少能够调用 jQuery Mobile 的“正在加载”消息（或烘焙我自己的）。

Answer 1

我想我找到了答案。深埋在jQuery Mobile documentation中，有关于在div上用data-role="page"设置data-url的信息。当我这样做时，我得到了很好的 jQuery Mobile AJAX 东西（页面加载消息、页面转换）并且我在浏览器中正确更新了 url。

基本上，我就是这样做的......

[HttpPost]
public ActionResult Products(...)
{
    // ... add products to cart
    TempData["DataUrl"] = "data-url=\"/Cart\"";
    return RedirectToAction("Index", "Cart");
}

然后在我的布局页面上我有这个....

<div data-role="page" data-theme="c" @TempData["DataUrl"]>

在我的HttpPost 操作中，我现在设置了TempData["DataUrl"]，因此对于那些页面，它被设置并填充在布局页面上。 “获取”操作不会设置 TempData["DataUrl"]，因此在这些情况下它不会填充到布局页面上。

唯一不适用的是，当您在浏览器中右键单击...查看源代码...时，html 并不总是适用于您所在的页面，而对于 AJAX 来说很不寻常。

Answer 2

不确定它是否仍然是实际的，但就我而言，我编写了以下辅助方法

public static IHtmlString GetPageUrl<TModel>(this HtmlHelper<TModel> htmlHelper, ViewContext viewContext)
    {
        StringBuilder urlBuilder = new StringBuilder();
        urlBuilder.Append("data-url='");
        urlBuilder.Append(viewContext.HttpContext.Request.Url.GetComponents(UriComponents.PathAndQuery, UriFormat.UriEscaped));
        urlBuilder.Append("'");
        return htmlHelper.Raw(urlBuilder.ToString());
    }

然后按如下方式使用：

<div data-role="page" data-theme="d" @Html.GetPageUrl(ViewContext) >

这样我就不需要为每个重定向操作存储一个 TempData。对 Redirect 和 RedirectToAction 都很好。如果您在控制器内使用方法“View()”并返回不同的视图名称，这将无法正常工作，这将改变 UI，但会保留 url。

希望对你有帮助 阿尔乔姆

Answer 3

大卫，这对我帮助很大。我只是想补充一点，在我的情况下，我必须使用以下格式来让 Url 以正确的形式显示为我的其他 url：

TempData["DataUrl"] = "data-url=/appName/controller/action";      
return RedirectToAction("action", "controller");

作为旁注，我还发现，在将值分配给 TempData["DataUrl"] 时，我能够省略转义引号并完全按照上面的方式输入，这对我来说似乎工作正常。再次感谢您的帮助。

Answer 4

github上有问题 https://github.com/jquery/jquery-mobile/issues/1571

它有一个很好的解决方案，不需要 TempData