jQuery Mobile/MVC:使用 RedirectToAction 获取要更改的浏览器 URL [英] jQuery Mobile/MVC: Getting the browser URL to change with RedirectToAction

问题描述

我的第一篇文章...

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

在使用 Web 表单 10 多年后，我将切换到 ASP.NET MVC 3.0(也使用 jQuery Mobile).我已经学习了大约 8 周，在读了几本书并在谷歌上搜索答案后，我快干了.

我在 Global.asax 中定义了一个路由:

routes.MapRoute("路线","{控制器}/{动作}/{id}",新{控制器=购物"，动作=索引"，id=UrlParameter.Optional}

我有一个具有以下操作的 ShoppingController:

public ActionResult Cart() {...}公共 ActionResult 产品(字符串 externalId){...}[HttpPost]公共 ActionResult 产品(ListproductModels){//做东西return RedirectToAction("购物车");}

当我执行 get 和 post(带有 RedirectToAction 的 post)时的 url 总是:

/Shopping/Products?ExternalId=GenAdmin

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

/购物/购物车

我尝试了 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">//默认不通过ajax处理链接$(document).bind("mobileinit", function () { $.mobile.ajaxEnabled = false; });<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 的加载"消息(或烘焙我自己的).

解决方案

我想我已经找到了答案.在 jQuery Mobile 文档 深处，有关于使用 data-role="page" 在 div 上设置 data-url.当我这样做时，我得到了很好的 jQuery Mobile AJAX 内容(页面加载消息、页面转换)并且我在浏览器中正确更新了 url.

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

[HttpPost]公共 ActionResult 产品(...){//... 将产品添加到购物车TempData["DataUrl"] = "data-url="/Cart"";return RedirectToAction("Index", "Cart");}

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

在我的 HttpPost 操作中，我现在设置 TempData["DataUrl"] 以便为那些页面设置并填充在布局页面上.获取"操作不会设置 TempData["DataUrl"]，因此在这些情况下不会在布局页面上填充它.

唯一不太适用的事情是，当您右键单击...查看源...在浏览器中，html 并不总是适用于您所在的页面，这不是AJAX 不寻常.

My first post...

When I use RedirectToAction the url in the browser doesn't change. How can I achieve this?

I'm switching over to ASP.NET MVC 3.0 (also using jQuery Mobile) after 10+ years using web forms. I'm about 8 weeks into it, and after several books and scouring Google for an answer, I'm coming up dry.

I have a single route defined in Global.asax:

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

I have a ShoppingController with these actions:

public ActionResult Cart() {...}

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

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

The url when I do a get and post (with the post having the RedirectToAction) is always:

/Shopping/Products?ExternalId=GenAdmin

After the post and RedirectToAction I want the url in the browser to change to:

/Shopping/Cart

I've tried Redirect, and RedirectToRoute but get the same results.

Any help would be greatly appreciated.

[Update] I found that jQuery Mobile AJAX posts are the culprit here. If I turn off jQuery Mobile's AJAX it works.

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

The ordering of the above scripts is important. I had to include the script to jQuery first, then include the script to disable jQuery Mobile's use of AJAX and then include the script to jQuery Mobile.

I'd still like to find a way to use AJAX and have the url update properly. Or at the least be able to call jQuery Mobile's "loading" message (or bake my own).

解决方案

I think I've found an answer. Buried deep in the jQuery Mobile documentation, there is information about setting the data-url on the div with data-role="page". When I do this, I get the nice jQuery Mobile AJAX stuff (page loading message, page transitions) AND I get the url in the browser updated correctly.

Essentially, this is how I'm doing it...

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

Then on my layout page I have this....

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

On my HttpPost actions I now set the TempData["DataUrl"] so for those pages it gets set and is populated on the layout page. "Get" actions don't set the TempData["DataUrl"] so it doesn't get populated on the layout page in those situtations.

The only thing that doesn't quite work with this, is when you right-click... view source... in the browser, the html isn't always for the page you are on, which isn't unusual for AJAX.

这篇关于jQuery Mobile/MVC:使用 RedirectToAction 获取要更改的浏览器 URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！