Conseils pour utiliser UserControl pour générer du HTML

Le contrôle utilisateur est certainement familier à tout le monde dans le processus d'utilisation d'ASP.NET, à part les pages aspx, la plus courante est ascx. ascx est un composant doté d'une logique indépendante, qui fournit de puissantes fonctionnalités de réutilisation et peut considérablement améliorer l'efficacité du développement lorsqu'il est utilisé de manière rationnelle. Générer directement du contenu HTML via le contrôle utilisateur est en fait une technique relativement courante (surtout à l'ère AJAX). Cependant, il y a relativement peu de contenu dans ce domaine sur Internet. De nombreuses personnes ont encore du mal à assembler des chaînes, j'utilise donc ici un An. L'exemple présente brièvement cette technique.

Commenter un objet (article, image, musique, etc.) est l'une des fonctions les plus courantes de l'application. Tout d'abord, nous définissons une classe Comment et la méthode "get" qui y est utilisée :

public partial class Comment{    public DateTime CreateTime { get; set; } 
    public string Content { get; set; }
} 
public partial class Comment{    private static List<Comment> s_comments = new List<Comment>
    {        new Comment
        {
            CreateTime = DateTime.Parse("2007-1-1"),
            Content = "今天天气不错"
        },        new Comment
        {
            CreateTime = DateTime.Parse("2007-1-2"),
            Content = "挺风和日丽的"
        },        new Comment
        {
            CreateTime = DateTime.Parse("2007-1-3"),
            Content = "我们下午没有课"
        },        new Comment
        {
            CreateTime = DateTime.Parse("2007-1-1"),
            Content = "这的确挺爽的"
        }
    }; 
    public static List<Comment> GetComments(int pageSize, int pageIndex, out int totalCount)
    {
        totalCount = s_comments.Count; 
        List<Comment> comments = new List<Comment>(pageSize); 
        for (int i = pageSize * (pageIndex - 1);
            i < pageSize * pageIndex && i < s_comments.Count; i++)
        {
            comments.Add(s_comments[i]);
        } 
        return comments;
    }
}

Afin d'afficher une liste de commentaires, nous pouvons utiliser un contrôle utilisateur (ItemComments.aspx) pour l'encapsuler. Naturellement, la pagination est également indispensable :

<asp:Repeater runat="server" ID="rptComments">
    <ItemTemplate>
        时间：<%# (Container.DataItem as Comment).CreateTime.ToString() %><br />
        内容：<%# (Container.DataItem as Comment).Content %> 
    </ItemTemplate>
    <SeparatorTemplate>
        <hr />
    </SeparatorTemplate>    <FooterTemplate>
        <hr />
    </FooterTemplate></asp:Repeater> <% if (this.PageIndex > 1)
   { %>
        <a href="/ViewItem.aspx?page=<%= this.PageIndex - 1 %>" title="上一页">上一页</a> <% } %><% if (this.PageIndex * this.PageSize < this.TotalCount)
   { %>

et :

public partial class ItemComments : System.Web.UI.UserControl{    protected override void OnPreRender(EventArgs e)
    {        base.OnPreRender(e); 
        this.rptComments.DataSource = Comment.GetComments(this.PageSize,            this.PageIndex, out this.m_totalCount);        this.DataBind();
    } 
    public int PageIndex { get; set; } 
    public int PageSize { get; set; } 
    private int m_totalCount;    public int TotalCount
    {        get
        {            return this.m_totalCount;
        }
    }
}

Utilisez ensuite ce composant dans la page (ViewItem.aspx) :

<p id="comments"><demo:ItemComments ID="itemComments" runat="server" /></p>

et :

public partial class ViewItem : System.Web.UI.Page{    protected void Page_Load(object sender, EventArgs e)
    {        this.itemComments.PageIndex = this.PageIndex;
    } 
    protected int PageIndex
    {        get
        {            int result = 0;            Int32.TryParse(this.Request.QueryString["page"], out result); 
            return result > 0 ? result : 1;
        }
    }
}

L'effet après l'ouverture de ViewItem.aspx est le suivant :

Heure : 2007/1/1 0:00:00 Contenu : Il fait beau aujourd'hui

---

Heure : 2007/1/2 0:00:00 Contenu : Très ensoleillé

---

Heure : 3/1/2007 0:00:00 Contenu : Nous n'avons pas de cours l'après-midi

---

Page suivante

La fonction de cette page est très simple, c'est-à-dire afficher les commentaires. Le numéro de page du commentaire actuel sera spécifié à l'aide de l'élément de page de QueryString, puis les propriétés du contrôle ItemComments.ascx seront obtenues et définies dans ViewItem.aspx. Le contrôle ItemComments obtiendra les données et les liera en fonction de ses propres propriétés. Quant au contenu d'affichage, tout est défini en ascx. En raison de la nécessité d'une fonction de pagination, ce contrôle de commentaire contient également des liens vers la page précédente et la page suivante. La cible de leurs liens est très simple, qui est la page ViewItem.aspx, et ajoute uniquement la chaîne de requête du numéro de page. .

La fonction est terminée, mais lorsque je l'utilise, cela me semble soudain inapproprié. Pourquoi ? Car lorsque l’on tourne la page, ou lorsque l’utilisateur poste un commentaire, c’est toute la page qui est rafraîchie. Ce n'est pas bon. Vous devez savoir qu'il peut y avoir plusieurs autres parties d'affichage dans la page ViewItem, et elles restent inchangées. Et si plusieurs autres parties doivent également être paginées, il peut alors être nécessaire de conserver le numéro de page actuel de chaque partie sur la page, de sorte que la complexité du développement reste relativement élevée.

Alors utilisons AJAX. Que l'utilisateur tourne la page ou laisse un commentaire tout en consultant les commentaires, cela n'affectera pas les autres contenus de la page. Pour développer cette fonction, un support côté serveur est naturellement nécessaire, alors comment faire ? Généralement, nous avons toujours deux options :

1. Le serveur renvoie les données JSON et exploite le DOM sur le client pour le rendu.

2. Le serveur renvoie directement le contenu HTML, puis définit le conteneur sur le client (par exemple, p avec l'identifiant des commentaires ci-dessus).

Cependant, quelle que soit l'approche adoptée, la logique de « présentation » est généralement réécrite (la première logique de présentation est écrite dans ItemComments.ascx). Si vous utilisez la première approche, la logique de présentation doit être rendue côté client en manipulant le DOM ; si vous utilisez la deuxième approche, vous devez alors effectuer une concaténation de chaînes côté serveur ; L'une ou l'autre approche viole le principe DRY. Lorsque la méthode de présentation dans ItemComments.ascx est modifiée, l'autre endroit doit également être modifié en conséquence. De plus, qu'il s'agisse d'utiliser des éléments DOM ou d'épisser des chaînes, il est plus difficile à maintenir et l'efficacité du développement n'est naturellement pas élevée.

Ce serait formidable si nous pouvions obtenir le contenu HTML directement à partir du contrôle ItemComments - alors faisons-le. Veuillez regarder le code suivant (GetComments.ashx) :

public class GetComments : IHttpHandler{    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain"; 
        ViewManager<ItemComments> viewManager = new ViewManager<ItemComments>();        
        ItemComments control = viewManager.LoadViewControl("~/ItemComments.ascx");
 
        control.PageIndex = Int32.Parse(context.Request.QueryString["page"]);
        control.PageSize = 3;
 
        context.Response.Write(viewManager.RenderView(control));
    } 
    public bool IsReusable { ... }
}

Code simple, n'est-ce pas ? Créez simplement l'objet, définissez les propriétés, puis affichez-le via Response.Write. Ce n'est vraiment pas grave - mais la clé réside dans la classe ViewManager. Voyons comment elle est implémentée :

public class ViewManager<T> where T : UserControl{    private Page m_pageHolder; 
    public T LoadViewControl(string path)
    {        this.m_pageHolder = new Page();        return (T)this.m_pageHolder.LoadControl(path);
    } 
    public string RenderView(T control)
    {        StringWriter output = new StringWriter(); 
        this.m_pageHolder.Controls.Add(control);        HttpContext.Current.Server.Execute(this.m_pageHolder, output, false); 
        return output.ToString();
    }
}

Il n'y a que deux méthodes dans ViewManager : LoadViewControl et RenderView. La fonction de la méthode LoadViewControl est de créer une instance de Control et de la renvoyer, et la fonction de la méthode RenderView est de générer du HTML. L'astuce de cette implémentation consiste à utiliser un objet Page nouvellement créé comme « conteneur » pour générer des contrôles. En fin de compte, nous exécutons en fait l'intégralité du cycle de vie de l'objet Page et générons les résultats. Puisque cet objet Page vide ne génère aucun autre code, nous obtenons le code généré par le contrôle utilisateur.

Mais pour obtenir cet effet AJAX, deux choses doivent être faites.

La première consiste simplement à modifier le lien de changement de page dans le contrôle ItemComments afin qu'il appelle une fonction JavaScript lorsqu'on clique dessus. Par exemple, le code de « page précédente » deviendra :

<a href="/ViewItem.aspx?page=<%= this.PageIndex - 1 %>" title="上一页"    
onclick="return getComments(<%= this.PageIndex - 1 %>);">上一页</a>

Deuxièmement, implémentez la méthode client getComments. Ici, j'ai utilisé le framework prototype. L'avantage est que je peux utiliser un code assez concis pour obtenir l'effet AJAX de remplacement du HTML :

<script type="text/javascript" language="javascript">
    function getComments(pageIndex)
    {        new Ajax.Updater(            "comments",            "/GetComments.ashx?page=" + pageIndex + "&t=" + new Date(),
            { method: "get" }); 
        
        return false; // IE only
    }</script>

Vous avez terminé.

En fait, comme mentionné précédemment, utiliser UserControl pour générer du code HTML est une technique très courante. D'autant plus que les applications AJAX deviennent de plus en plus populaires, une utilisation raisonnable des méthodes mentionnées ci-dessus peut facilement ajouter des effets AJAX à nos applications. Et dans de nombreux cas, nous pouvons utiliser UserControl pour modifier le contenu même si nous n'avons pas besoin d'afficher le contenu sur la page. Parce que l'écriture de UserControl est beaucoup plus efficace en termes d'efficacité de développement et de maintenabilité que la concaténation de chaînes. Étant donné que cette méthode utilise en fait le modèle éprouvé de WebForms, elle est également très efficace en termes d'efficacité d'exécution. De plus, comme pour l'exemple tout à l'heure, l'utilisation de UserCotrol pour la génération HTML présente d'autres avantages :

1. La logique de rendu des pages n'est implémentée qu'une seule fois, ce qui améliore la maintenabilité.

2. n'affectera pas le référencement de la page, car le href de sur le client est toujours valide.

En fait, WebForms est un modèle très puissant, donc la vue d'ASP.NET MVC utilise également le moteur WebForms. Grâce à l'exemple ci-dessus, nous pouvons en réalité faire beaucoup d'autres choses, comme utiliser UserControl pour générer des données XML, car UserControl lui-même n'apporte aucun contenu supplémentaire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!