Utilisation de Html.Partial et Html.RenderPartial dans ASP.NET MVC

  1. Utilisation de Html.Partial et Html.RenderPartial

Les méthodes Html.Partial et Html.RenderPartial permettent toutes deux d'afficher des fragments HTML, mais présentent des différences importantes.

Html.Partial génère une chaîne de caractères contenant le contenu de la vue (incluant un processus d'échappement), tandis que Html.RenderPartial écrit directement le résultat dans le contexte HTTP actuel (ce qui améliore les performances). Par conséquent, leur utilisation dans les vues diffère :

MVC2 :

  • Écriture directe dans HttpContext
  • Retour sous forme de chaîne directement dans la page

MVC3 :

  • @Html.Partial("BasicChart")
  • @{ Html.RenderPartial("BasicChart"); }

Les trois surcharges supplémentaires de ces méthodes sont particulièrement utiles. La deuxième surcharge @Html.RenderPartial("BasicChart", model) permet d'utiliser des modèles fortement typés dans les vues partielles, en passant le modèle via le deuxième paramètre depuis la vue principale sans passer par le contrôleur. Par exemple, transmettre un élément spécifique d'une liste comme myClass.

La troisième surcharge permet également de passer ViewData, comme : @{Html.RenderPartial("BasicChart", ViewData["myData"]);}

Exemple :

<div id="logindisplay">

@Html.Partial("_LogOnPartial")@

@{

Html.RenderPartial("_LogOnPartial");

}

</div>

Autres méthodes liées :

@RenderBody, @RenderSection, @RenderPage, Html.RenderPartial, Html.RenderAction

  1. RenderBody Dans Razor, il n'y a plus de "maquette parente", mais plutôt des pages de disposition (_Layout.cshtml) situées dans le dossier partagé. Cette page contient généralement l'appel @RenderBody(). Son rôle est similaire à celui des contrôles serveur d'une maquette, fusionnant le contenu de la vue avec la disposition. Cette méthode ne prend aucun paramètre et ne peut apparaître qu'une seule fois.
  2. RenderPage Cette méthode affiche une page complète. Par exemple, un en-tête fixe peut être placé dans une vue partagée et appelé depuis la page de disposition : @RenderPage("/Views/Shared/_Header.cshtml") Avec des paramètres : @RenderPage("/Views/Shared/_Header.cshtml", new { parm="my", parm2="you" }) Récupération des paramètres dans la page appelante : @PageData["param"]
  3. RenderSection La page de disposition peut définir des sections. Si une vue utilise cette section, elle peut être rendue séparément : @RenderPage("~/Views/Shared/_Header.cshtml") @RenderBody() @RenderSection("head") Une section doit être définie dans la vue pour éviter les erreurs : @section head{ //do } Pour éviter les exceptions, on peut utiliser un paramètre booléen : @RenderSection("SubMenu", false) Ou : @if (IsSectionDefined("SubMenu")) { @RenderSection("SubMenu", false) } else { <p>SubMenu Section is not defined!</p> }
  4. Html.Partial Chaque appel crée une instance TextWriter et met le contenu en mémoire avant de le renvoyer dans un objet MvcString. Souvent, on utilise @{ Html.RenderPartial("Details"); } au lieu de @Html.Partial.

Différence entre RenderPage() et RenderPartial() RenderPage() ne peut accéder qu'aux données passées en paramètre, tandis que RenderPartial() peut utiliser ViewData, Model, etc.

Html.RenderPartial vs Html.RenderAction RenderPartial convient aux UserControl réutilisables avec des données simples via Model. RenderAction est préférable lorsqu'on doit récupérer des données depuis une base de données via un contrôleur.

  1. Html.Partial("MyView") Retourne un MvcHtmlString selon les règles standards de recherche de vues (dossier courant puis Shared).

Html.RenderPartial("MyView") Identique à Partial mais écrit directement dans le flux de réponse. Plus performant car pas de mise en tampon mémoire. Doit être utilisé dans un bloc de code : @{Html.RenderPartial("MyView");}.

RenderPage("MyView.cshtml") Affiche une vue spécifiée par chemin et nom de fichier, écrit directement dans le flux. Accepte un modèle en deuxième paramètre.

RenderPage("MyView.cshtml", MyModel)

Préférence : @RenderPage("_LayoutHeader.cshtml") plutôt que @{Html.RenderPartial("_LayoutHeader");}

Par simplicité de syntaxe et lisibilité. Aucune différence fonctionnelle.

  1. <span>@Html.Raw("aaa<br/>bb")</span> Affiche aaa bb

@{ ViewBag.Title = "Index<br/>aa"; }

<span>@ViewBag.Title</span> Affiche Index<br/>aa

ASP.NET MVC3.0 : @Html.Partial, @Html.Action, @Html.RenderPartial, @Html.RenderAction

  1. Les méthodes avec "Render" retournent void, écrivent directement dans la sortie ; celles sans "Render" retournent MvcHtmlString. @Html.Partial correspond à @{Html.RenderPartial(...);} @Html.Action correspond à @{Html.RenderAction(...);}
  2. Html.Partial nécessite juste un nom de vue, Html.Action requiert une action qui retourne PartialView.
  3. Pour les UserControl simples, Html.Partial est préférable. Pour ceux nécessitant un modèle, Html.Action est plus adapté. Cepandant, Html.Partial peut aussi recevoir un modèle via ses surcharges.
  4. Avantage d'Html.Action : possibilité de choisir différents UserControl selon les scénarios. Exemple : si l'utilisateur n'est pas connecté, afficher LogOnUserControl, sinon UserInfoControl.

Différences entre Html.Partial, Html.RenderPartial, Html.Action et Html.RenderAction | Html.Partial retourne une chaîne, Html.RenderPartial écrit directement dans la réponse, retourne void. Dans Razor : @Html.Partial("ViewName")``@{Html.RenderPartial("ViewName"); }On peut stocker le résultat de Html.Partial dans une variable, pas Html.RenderPartial. Html.RenderPartial écrit directement dans Response. La même logique s'applique à Html.Action et Html.RenderAction.

Dans ASP.NET MVC, plusieurs approches existent pour implémenter AJAX : MicrosoftAjax, jQuery, Prototype, etc.

Fichiers JavaScript requis :

<script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>

Helpers HTML fournis :

  • Ajax.ActionLink()
  • Ajax.BeginForm()
  • Ajax.RouteLink()
  • Ajax.BeginRouteForm()

Ajax.ActionLink

Exemple : View

<div id="myPnl" style="width: 300px; height: 30px; border: 1px dotted silver;">
</div>

@Ajax.ActionLink("Click Me", "GetTime", new AjaxOptions { UpdateTargetId = "myPnl" })

Controller

public ActionResult GetTime()
{
    return Content(DateTime.Now.ToString());
}

L'exemple envoie une requête asynchrone via un lien vers GetTime, qui retourne du texte mis à jour dans l'élément spécifié.

Propriétés d'AjaxOptions : | Confirm | Affiche une boîte de confirmation JS avant l'action | | HttpMethod | GET ou POST | | InsertMode | InsertAfter, InsertBefore, Replace | | LoadingElementDuration | Durée d'affichage de l'élément de chargement | | LoadingElementId | ID de l'élément de chargement | | OnBegin | Méthode JS exécutée avant la requête | | OnComplete | Méthode JS exécutée après la requête | | OnFailure | Méthode JS exécutée en cas d'échec | | OnSuccess | Méthode JS exécutée en cas de succès | | UpdateTargetId | ID de l'élément à mettre à jour | | Url | URL cible |

Différence entre OnComplete et OnSuccess : OnComplete avant mise à jour, OnSuccess après. ActionLink et AjaxOptions : les deux produisent un HTML différent mais fonctionnent pareil.

Ajax.BeginForm

Permet de soumettre un formulaire via AJAX.

View

@model MvcAjax.Models.UserModel
@{
    ViewBag.Title = "AjaxForm";
}
<div id="myPnl" style="width: 300px; height: 30px; border: 1px dotted silver;">
</div>
@using (Ajax.BeginForm("SaveUser", new AjaxOptions { UpdateTargetId = "myPnl" }))
{
    | @Html.LabelFor(m =&gt; m.UserName) | @Html.TextBoxFor(m =&gt; m.UserName) |
|---|---|
| @Html.LabelFor(m =&gt; m.Email) | @Html.TextBoxFor(m =&gt; m.Email) |
| @Html.LabelFor(m =&gt; m.Desc) | @Html.TextBoxFor(m =&gt; m.Desc) |
| <input type="submit" value="Submit"></input> |
} 

Model

using System.ComponentModel.DataAnnotations;

namespace MvcAjax.Models
{
    public class UserModel
    {
        [Display(Name = "Username")]
        public string UserName { get; set; }

        [Display(Name = "Email")]
        public string Email { get; set; }

        [Display(Name = "Description")]
        public string Desc { get; set; }
    }
}

Controller

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

[HttpPost]
public ActionResult SaveUser(UserModel userModel)
{
    //Code de sauvegarde
    return Content("Save Complete!");
}

JavaScriptResult

Dans les requêtes normales, JavaScriptResult est envoyé comme fichier. En AJAX, il est exécuté.

Exemple :

[HttpPost]
public ActionResult SaveUser(UserModel userModel)
{
    //Code de sauvegarde
    return JavaScript("alert('Save Complete!');");
}

Étiquettes: ASP.NET mvc HtmlHelper AJAX PartialView

Publié le 22 août à 10h30