jQuery Mobile / MVC: modification de l'URL du navigateur avec RedirectToAction

Question

Mon premier post...

Lorsque j'utilise RedirectToAction l'url dans le navigateur ne change pas. Comment puis-je y parvenir?

Je suis passer sur ASP.NET MVC 3.0 (également à l'aide de jQuery Mobile) après+ de 10 ans à l'aide de formulaires web. Je suis à environ 8 semaines, et après plusieurs livres et récurer de Google pour une réponse, je suis venue sèche.

J'ai un seul trajet défini Mondiale.asax:

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

J'ai un ShoppingController avec ces actions:

public ActionResult Cart() {...}

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

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

L'url quand je fais un get et post (avec le poste ayant le RedirectToAction) est toujours:

/Shopping/Products?ExternalId=GenAdmin

Après le post et RedirectToAction je veux que l'url dans le navigateur pour changer de:

/Shopping/Cart

J'ai essayé de Rediriger, et RedirectToRoute mais d'obtenir les mêmes résultats.

Toute aide serait grandement appréciée.

[Mise à jour] J'ai trouvé que jQuery Mobile AJAX postes sont le coupable ici. Si je désactive jQuery Mobile de l'AJAX, il fonctionne.

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

La commande des scripts ci-dessus est important. J'ai dû inclure le script de jQuery d'abord, puis d'inclure le script pour désactiver jQuery Mobile utilise de l'AJAX et puis d'inclure le script de jQuery Mobile.

Je voudrais encore trouver un moyen d'utiliser AJAX et ont la url de mise à jour correctement. Ou au moins être en mesure d'appeler jQuery Mobile message "chargement" (ou cuire ma propre).

Answer 1

Je crois que j'ai trouvé une réponse. Enfoui au plus profond dans le jQuery Mobile de la documentation, il y a des informations sur le réglage de l' data-url sur le div avec l' data-role="page". Quand je fais cela, je reçois la belle jQuery Mobile AJAX trucs (page message de chargement, les transitions de page) ET j'obtiens l'url dans le navigateur mis à jour correctement.

Essentiellement, c'est la façon dont je suis en train de faire...

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

Alors sur ma page de présentation, j'ai ce....

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

Sur mon HttpPost d'actions-je maintenant définir l' TempData["DataUrl"] donc, pour ces pages qu'il est défini et est rempli sur la page de mise en page. "Obtenir" les actions ne réglez pas le TempData["DataUrl"], afin qu'il ne soit pas renseigné sur la mise en page dans ceux de vos milieux de vie.

La seule chose qui ne fonctionne pas avec ceci, c'est lorsque vous cliquez droit sur... voir la source de la... dans le navigateur, le code html n'est pas toujours à la page, ce qui n'est pas inhabituel pour l'AJAX.

Answer 2

Je ne sais pas si c'est toujours réel, mais dans mon cas, j'ai écrit la méthode d'assistance suivante

 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());
    }
 

Et puis utilisez-le comme suit:

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

De cette façon, je n'ai pas besoin pour chaque action de redirection de stocker un TempData. A bien fonctionné pour moi à la fois pour Redirect et RedirectToAction. Cela ne fonctionnerait pas correctement si vous utilisez la méthode "View ()" à l'intérieur du contrôleur et renvoyez un nom de vue différent, ce qui changera l'interface utilisateur, mais conservera l'URL.

J'espère que cela aide Artem

Answer 3

David, cela m'a été d'une grande aide. Je voulais juste ajouter que dans mon cas, je devais utiliser le format suivant pour que l'URL s'affiche sous la bonne forme comme mes autres URL:

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

En remarque, j'ai également constaté que lors de l'attribution de la valeur à TempData ["DataUrl"], j'ai pu omettre les guillemets échappés et les saisir exactement comme ci-dessus et cela semble bien fonctionner pour moi. Merci encore pour votre aide.

Answer 4

Il y a un problème sur github https://github.com/jquery/jquery-mobile/issues/1571

Il a une belle solution sans avoir besoin de TempData