156 votes

MVC 3: Comment rendre une vue sans sa page de mise en page lorsqu'elle est chargée via ajax?

Je suis en train d'apprendre à propos de l'Amélioration Progressive, et j'ai une question à propos de AJAXifying points de vue. Dans mon MVC 3 projet j'ai une page de mise en page, un viewstart page, et deux plates points de vue.

Le viewstart page se trouve à la racine du dossier de Vues et s'applique ainsi à tous les points de vue. Il précise que tous les points de vue doivent utiliser _Layout.cshtml de leur mise en page. La mise en page contient deux liens de navigation, un pour chaque vue. Les liaisons @Html.ActionLink() pour se rendre à la page.

Maintenant, j'ai ajouté jQuery et veulent détourner ces liens et d'utiliser Ajax pour charger leur contenu sur la page dynamiquement.

<script type="text/javascript">
    $(function () {
        $('#theLink').click(function () {
            $.ajax({
                url: $(this).attr('href'),
                type: "GET",
                success: function (response) {
                    $('#mainContent').html(response);
                }
            });
            return false;
        });
    });
</script>

Il ya deux façons que je peux penser à faire cela, mais je n'aime pas particulièrement soit:

1) je peux prendre la totalité de la Vue du contenu et de les placer dans une vue partielle, alors le principal, l'affichage de la vue partielle lorsqu'il est rendu. De cette façon, en utilisant Request.IsAjaxRequest() dans le contrôleur, je peux retourner View() ou de retour PartialView() basée sur si oui ou non la requête est une requête Ajax. Je ne peux pas retourner à l'affichage normal à la requête Ajax, car alors elle serait d'utiliser la mise en page et j'aimerais obtenir une deuxième copie de la mise en page injecté. Cependant, je n'aime pas ça parce que ça m'oblige à créer vide vues avec juste un @{Html.RenderPartial();} pour le standard requêtes GET.

    public ActionResult Index()
    {
        if (Request.IsAjaxRequest())
            return PartialView("partialView");
        else
            return View();
    }

Puis dans l'Index.cshtml ce faire:

@{Html.RenderPartial("partialView");}

2) je peux supprimer la mise en page désignation de _viewstart et spécifier manuellement lorsque la demande n'est PAS Ajax:

    public ActionResult Index()
    {
        if (Request.IsAjaxRequest())
            return View(); // Return view with no master.
        else
            return View("Index", "_Layout"); // Return view with master.
    }

Quelqu'un a une meilleure suggestion? Est-il un moyen de revenir à une vue sans sa mise en page? Il serait beaucoup plus facile à dire explicitement "n'incluent pas votre mise en page" si c'est une requête ajax, qu'il serait à inclure explicitement la mise en page si elle n'est pas ajax.

260voto

Darin Dimitrov Points 528142

En ~/Views/ViewStart.cshtml :

 @{
    Layout = Request.IsAjaxRequest() ? null : "~/Views/Shared/_Layout.cshtml";
}
 

et dans le contrôleur:

 public ActionResult Index()
{
    return View();
}
 

93voto

roncansan Points 752

Il suffit de mettre le code suivant en haut de la page

 @{
    Layout = "";
}
 

13voto

Matt Greer Points 29401

Je préfère, et de l'utilisation, de votre #1 option. Je n'aime pas #2 parce que pour moi, View() implique que vous êtes de retour d'une page entière. Il devrait être entièrement engagé et valide HTML de la page une fois que le moteur d'affichage est fait avec elle. PartialView() a été créé pour revenir arbitraire des morceaux de HTML.

Je ne pense pas que c'est une grosse affaire à un point de vue qui appelle simplement partielle. C'est toujours SEC, et vous permet d'utiliser la logique de la partielle dans les deux scénarios.

Beaucoup de gens n'aiment pas fragmenter leur action à l'appel de chemins avec Request.IsAjaxRequest(), et je peux le comprendre. Mais IMO, si tout ce que vous faites est de se décider à appeler View() ou PartialView() alors que la branche n'est pas une grosse affaire et est facile à entretenir (et de tester). Si vous vous trouvez à l'aide de IsAjaxRequest() afin de déterminer de grandes portions de la façon dont votre action se joue, puis faire un distinct AJAX action est probablement mieux.

13voto

Arash Points 311

Créez deux mises en page: 1. disposition vide, 2. mise en page principale et ensuite écrire dans _viewStart fichier ce code:

 @{
if (Request.IsAjaxRequest())
{
    Layout = "~/Areas/Dashboard/Views/Shared/_emptyLayout.cshtml";
}
else
{
    Layout = "~/Areas/Dashboard/Views/Shared/_Layout.cshtml";
}}
 

Bien sûr, ce n'est peut-être pas la meilleure solution

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X