Comment construire une interface seule page dans ASP.NET MVC?

Question

Je veux construire un webapplication avec une "seule page Interface", en utilisant ASP.NET MVC.

Je l'ai recherché si cela était au moins possible et je pense que la réponse est: non pas par des moyens simples (lecture http://msdn.microsoft.com/en-us/magazine/cc507641.aspx#S2 -dernier paragraphe;. cet article est de mai 2008, bien que)

J'ai trouvé d'autres exemples mis en œuvre ce par codage / piratage avec jQuery. Cependant, je suis à la recherche d'une solution propre, en utilisant des approches standards .NET, si possible.

Ce que je veux est exactement la même fonctionnalité lorsque vous créez un nouveau « MVC Web Application ». Cependant, au lieu de liens vers "/ Home / A propos de" qui recharge la page entière, je veux des liens vers " # Accueil / A propos" qui ne charge que la nouvelle partie via AJAX.

L'approche standard de l'appel des modèles (vue partielle) avec Html.RenderPartial est exactement ce que je veux, alors seulement les charger dans à travers les requêtes AJAX.

Bien sûr, il est peut-être que je ne peux pas utiliser ces modèles qui sont rendus par le maître-page pour une raison quelconque (peut-être qu'il est attend d'être appelé toujours dans un certain contexte d'un certain placer environ). Mais peut-être il y a une autre solution propre pour savoir comment construire votre modèle pages et aller les chercher du maître-page.

Qui a une belle solution pour mettre en œuvre une telle chose, une seule page Interface?

PS: Je développe dans Visual Web Developer 2008 Express Edition avec MVC 1.0 est installé, en C #

[modifier] Ci-dessous je lis que le travail avec les modèles est possible et que jQuery semble en effet comme inévitable, donc je l'ai testé. Le code suivant transforme des liens réguliers créés par Html.ActionLink en liens d'ancrage (avec #) pour contenir l'histoire, puis récupérer la page via AJAX et que l'injection de la partie html Je suis intéressé (à savoir la page partielle dans div # PartialView):

$("a").each(function() {
    $(this).click(function() {
        $("div#partialView").load($(this).attr("href") + " div#partialView");
        location.hash = $(this).attr("href");
        return false;
    });
});

Ces liens permettent également degredation gracieux.

Mais ce qui me reste maintenant, est toujours le aller chercher ensemble page au lieu de la page partielle. Altérant le contrôleur n'a pas aidé; il m'a fourni encore html de la page entière, avec toutes ces déclarations:

public ActionResult About()
{
    return View();
    return View("About");
    return PartialView();
    return PartialView("About");
}

Comment pourrais-je revenir seulement le contenu de la partie que je suis intéressé (à savoir le contenu Accueil / About.aspx)? Ce que je voudrais est POSTer une valeur avec AJAX (par exemple « RequestType = ajax ») de sorte que mon contrôleur connaît la page est récupérée via AJAX et retourne la page partielle; sinon elle retournera la page entière (à savoir lorsque vous visitez / Accueil / A propos de au lieu de # Accueil / A propos).

est une bonne pratique de modifier Global.asax.cs peut-être, pour créer un nouveau schéma de routage pour AJAX appels, qui ne renvoie les pages partielles? (Je ne l'ai pas regardé dans ce bien, encore.)

[Edit2] Robert Koritnik avait raison: j'ai aussi besoin d'une page About.ascx (UserControl) avec seulement le petit HTML contenu de cette page. La première ligne de About.aspx était liée avec le maître-page par MasterPageFile="~/..../Site.master" qui a fait que tous les fichiers HTML a été imprimé.

Mais pour être en mesure d'exécuter ce qui suit dans mon contrôleur:

public ActionResult About()
{
    return Request.IsAjaxRequest() ? (ActionResult)PartialView() : View();
}

Je avais besoin de modifier la façon dont un PartialView (fichier .ascx) et un fichier View (.aspx) a été trouvé, sinon les deux méthodes retourneraient la même page (About.aspx, ce qui en fin de compte dans une boucle infinie). Après avoir mis les points suivants dans Global.asax.cs, les pages correctes seront retournées avec PartialView() et View():

protected void Application_Start()
{
    foreach (WebFormViewEngine engine in ViewEngines.Engines.Where(c => c is WebFormViewEngine))
    {
        /* Normal search order:
        new string[] { "~/Views/{1}/{0}.aspx",
            "~/Views/{1}/{0}.ascx",
            "~/Views/Shared/{0}.aspx"
            "~/Views/Shared/{0}.ascx"
        };
        */

        // PartialViews match with .ascx files
        engine.PartialViewLocationFormats = new string[] { "~/Views/{1}/{0}.ascx", "~/Views/Shared/{0}.ascx" };

        // Views match with .aspx files
        engine.ViewLocationFormats = new string[] { "~/Views/{1}/{0}.aspx", "~/Views/Shared/{0}.aspx" };
    }

    RegisterRoutes(RouteTable.Routes);
}

Answer 1

Affichage du livre entier par rapport Vue partielle

On dirait que vous avez foiré quelque chose. Si vous créez une page About.aspx avec tout le code HTML nécessaire pour afficher la page entière n'importe pas vraiment si vous dites

return PartialView('About');

La vue retourne toujours tout le code HTML qui est écrit en elle.

Vous devez créer une directive About.ascx qui seulement le contenu de la page lui-même sans l'en-tête et d'autres choses qui fait partie de la page.

Votre About.aspx page originale aura quelque chose comme ceci dans son contenu (pour éviter de répéter l'écriture deux fois le même contenu):

<%= Html.RenderPartial("About") %>

Et vous pouvez avoir deux actions de contrôleur. Celui qui retourne une vue régulière et qui retourne une vue partielle:

return View("About"); // returns About.aspx that holds the content of the About.ascx as well
return PartialView("About"); // only returns the partial About.ascx

En ce qui concerne les routes dans Global.asax

Au lieu d'écrire des itinéraires séparés pour Ajax appels que vous préférez écrire un filtre d'action qui fonctionne comme un filtre similaire d'action AcceptVerbsAttribute. De cette façon, vos demandes du client demeureraient les mêmes (et empêchant ainsi l'utilisateur de demander manuellement mal des choses), mais en fonction de la demande de type l'action du contrôleur correct été exécutée.

Answer 2

Eh bien, vous pouvez charger Vue partielle sur demande par le biais AJAX. Dans l'exemple, je vais utiliser jquery pour faire un appel ajax.

Ceux-ci pourraient être l'action dans le contrôleur (nommé HomeController):

public ActionResult About()
    {
        //Do some logic...
        //AboutView is the name of your partial view
        return View("AboutView");
    }

JQuery ajax appellent pour placer le code html retured en place que vous voulez:

var resultDiv = $('#contentDIV');

    $.ajax({
        type: "POST",
        url: "/Home/About",
        success: function(responseHTML) {
            resultDiv.replaceWith(responseHTML);
        }
    });

[edit-question est mis à jour]

Il est possible de faire exactement ce que vous voulez. La première action du contrôleur peut vous redonner la vue partielle, donc le mien « AboutView » aurait pu être quelque chose comme ceci:

<table>
<tr>
    <th>
        Column1Header
    </th>
    <th>
        Column2Header
    </th>
</tr>
<tr>
    <td>
    ...
    </td>
    <td>
    ...
    </td>
</tr>

et ce code HTML est exactement ce que vous allez avoir dans responseHTML le gestionnaire de succès dans la méthode ajax jquery.

Deuxièmement, vous pouvez distinguer dans l'action du contrôleur si la demande est une demande ajax:

public ActionResult About()
    {
        //partial AboutView is returned if request is ajax
        if (Request.IsAjaxRequest())
            return View("AboutView");
        else //else it will be the default view (page) for this action: "About"
            return View();
    }

Answer 3

Nous avons un site qui fait exactement cela, et que vous voulez vraiment utiliser la route jQuery ici - beaucoup plus facile à mettre en œuvre à long terme. Et vous pouvez facilement le faire avec élégance pour les utilisateurs se dégrader qui ne supporte pas Javascript -. Comme Google

Answer 4

il est pas du tout clair que demandez, vous est-il un exemple complet ou pour certaines fonctionnalités spécifiques? Vous devriez être en mesure de le faire sans JQuery pour les scénarios simples, vous pouvez utiliser les aides de vue Ajax comme la méthode ActionLink. De plus, je ne comprends pas vraiment ce qui est votre problème avec RenderPartial, mais peut-être vous cherchez quelque chose comme RenderAction de ASP.NET MVC Futures.

Answer 5

ASP.NET MVC 4 (actuellement en version bêta) ajoute le support pour les applications dans une seule page En MVC.

http://www.asp.net/single-page-application

Mise à jour: ... et ils ont enlevé du MVC 4 RC

Mise à jour: ... et il est de retour avec la mise à jour d'automne 2012