Tipps zur Verwendung von UserControl zum Generieren von HTML

Benutzersteuerung ist sicherlich jedem bei der Verwendung von ASP.NET bekannt. Neben ASPX-Seiten ist ASCX die häufigste. ASCX ist eine Komponente mit unabhängiger Logik, die leistungsstarke Wiederverwendungsfunktionen bietet und bei rationaler Verwendung die Entwicklungseffizienz erheblich verbessern kann. Das direkte Generieren von HTML-Inhalten über die Benutzersteuerung ist eigentlich eine relativ verbreitete Technik (insbesondere in der AJAX-Ära). Allerdings gibt es in diesem Bereich im Internet immer noch relativ wenig Inhalte, daher verwende ich hier eine An Beispiel stellt diese Technik kurz vor.

Das Kommentieren eines Objekts (Artikel, Bild, Musik usw.) ist eine der häufigsten Funktionen in der Anwendung. Zuerst definieren wir eine Kommentarklasse und die darin verwendete „get“-Methode:

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

Um eine Liste von Kommentaren anzuzeigen, können wir sie mit einem Benutzersteuerelement (ItemComments.aspx) kapseln. Natürlich ist auch das Paging unerlässlich:

<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)
   { %>

und:

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

Dann verwenden Sie diese Komponente in der Seite (ViewItem.aspx):

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

und:

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

Der Effekt nach dem Öffnen von ViewItem.aspx ist wie folgt:

Zeit: 1.1.2007 0:00:00 Inhalt: Das Wetter ist heute gut

---

Zeit: 2.1.2007 0:00:00 Inhalt: Sehr sonnig

---

Zeit: 03.01.2007 0:00:00 Inhalt: Wir haben nachmittags keinen Unterricht

---

Nächste Seite

Die Funktion dieser Seite ist sehr einfach, nämlich Kommentare anzuzeigen. Die Seitenzahl des aktuellen Kommentars wird mithilfe des Seitenelements von QueryString angegeben. Anschließend werden die Eigenschaften des ItemComments.ascx-Steuerelements abgerufen und in ViewItem.aspx festgelegt. Das ItemComments-Steuerelement ruft Daten ab und bindet sie basierend auf seinen eigenen Eigenschaften. Der Anzeigeinhalt wird vollständig in ascx definiert. Aufgrund der Notwendigkeit einer Paging-Funktion enthält dieses Kommentarsteuerelement auch Links zur vorherigen Seite und zur nächsten Seite. Das Ziel ihrer Links ist sehr einfach, nämlich die Seite ViewItem.aspx, und fügt nur die Abfragezeichenfolge der Seitennummer hinzu .

Die Funktion ist abgeschlossen, aber wenn ich sie verwende, fühlt es sich plötzlich unangemessen an. Warum? Denn wenn wir die Seite umblättern oder der Benutzer einen Kommentar postet, wird die gesamte Seite aktualisiert. Das ist nicht gut. Sie müssen wissen, dass die ViewItem-Seite möglicherweise mehrere andere Anzeigeteile enthält und diese unverändert bleiben. Und wenn auch mehrere andere Teile paginiert werden müssen, kann es erforderlich sein, die aktuelle Seitenzahl jedes Teils auf der Seite beizubehalten, sodass der Entwicklungsaufwand immer noch relativ hoch ist.

Dann verwenden wir AJAX. Unabhängig davon, ob der Benutzer die Seite umblättert oder beim Anzeigen der Kommentare einen Kommentar hinterlässt, hat dies keine Auswirkungen auf andere Inhalte auf der Seite. Um diese Funktion zu entwickeln, ist natürlich serverseitige Unterstützung erforderlich. Wie geht das? Im Allgemeinen haben wir immer zwei Möglichkeiten:

1. Der Server gibt JSON-Daten zurück und betreibt das DOM auf dem Client zum Rendern.

2. Der Server gibt den HTML-Inhalt direkt zurück und legt dann den Container auf dem Client fest (z. B. p mit der ID der obigen Kommentare).

Unabhängig davon, welcher Ansatz gewählt wird, wird die „Präsentations“-Logik normalerweise erneut geschrieben (die erste Präsentationslogik wird in ItemComments.ascx geschrieben). Wenn Sie den ersten Ansatz verwenden, muss die Präsentationslogik auf der Clientseite durch Manipulation des DOM gerendert werden. Wenn Sie den zweiten Ansatz verwenden, müssen Sie die Zeichenfolgenverkettung auf der Serverseite durchführen. Beide Ansätze verstoßen gegen das DRY-Prinzip. Wenn die Präsentationsmethode in ItemComments.ascx geändert wird, muss auch die andere Stelle entsprechend geändert werden. Unabhängig davon, ob es sich um den Betrieb von DOM-Elementen oder das Zusammenfügen von Zeichenfolgen handelt, ist die Wartung schwieriger und die Entwicklungseffizienz ist natürlich nicht hoch.

Es wäre großartig, wenn wir den HTML-Inhalt direkt aus dem ItemComments-Steuerelement abrufen könnten – also machen wir das. Schauen Sie sich bitte den folgenden Code an (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 { ... }
}

Einfacher Code, nicht wahr? Erstellen Sie einfach das Objekt, legen Sie die Eigenschaften fest und geben Sie es dann über Response.Write aus. Es ist wirklich keine große Sache – aber der Schlüssel liegt in der ViewManager-Klasse. Schauen wir uns an, wie es implementiert wird:

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

Es gibt nur zwei Methoden in ViewManager: LoadViewControl und RenderView. Die Funktion der LoadViewControl-Methode besteht darin, eine Control-Instanz zu erstellen und zurückzugeben, und die Funktion der RenderView-Methode besteht darin, HTML zu generieren. Der Trick dieser Implementierung besteht darin, ein neu erstelltes Page-Objekt als „Container“ zum Generieren von Steuerelementen zu verwenden. Am Ende führen wir tatsächlich den gesamten Lebenszyklus des Page-Objekts aus und geben die Ergebnisse aus. Da dieses leere Page-Objekt keinen anderen Code generiert, erhalten wir den vom Benutzersteuerelement generierten Code.

Aber um diesen AJAX-Effekt zu erzielen, müssen zwei Dinge getan werden.

Die erste besteht darin, einfach den Umblätterlink im ItemComments-Steuerelement so zu ändern, dass er beim Klicken eine JavaScript-Funktion aufruft. Der Code für „Vorherige Seite“ lautet beispielsweise:

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

Zweitens implementieren Sie die Client-Methode getComments. Hier habe ich das Prototyp-Framework verwendet. Der Vorteil besteht darin, dass ich recht prägnanten Code verwenden kann, um den AJAX-Effekt des Ersetzens von HTML zu erzielen:

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

Fertig.

Tatsächlich ist die Verwendung von UserControl zum Generieren von HTML-Code, wie bereits erwähnt, eine sehr verbreitete Technik. Insbesondere da AJAX-Anwendungen immer beliebter werden, können durch den sinnvollen Einsatz der oben genannten Methoden problemlos AJAX-Effekte zu unseren Anwendungen hinzugefügt werden. Und in vielen Fällen können wir UserControl verwenden, um den Inhalt zu bearbeiten, auch wenn wir den Inhalt nicht auf der Seite anzeigen müssen. Weil das Schreiben von UserControl hinsichtlich der Entwicklungseffizienz und Wartbarkeit viel höher ist als das Verketten von Zeichenfolgen. Da diese Methode tatsächlich das bewährte Modell von WebForms verwendet, ist sie auch hinsichtlich der Ausführungseffizienz recht effizient. Darüber hinaus hat die Verwendung von UserCotrol für die HTML-Generierung, wie im Beispiel gerade, weitere Vorteile:

1. Die Seitenrendering-Logik wird nur einmal implementiert, was die Wartbarkeit verbessert.

2. hat keinen Einfluss auf die SEO der Seite, da die href von weiterhin gültig ist.

Tatsächlich ist WebForms ein sehr leistungsfähiges Modell, daher verwendet die Ansicht von ASP.NET MVC auch die WebForms-Engine. Durch das obige Beispiel können wir tatsächlich viele andere Dinge tun – beispielsweise die Verwendung von UserControl zum Generieren von XML-Daten, da UserControl selbst keinen zusätzlichen Inhalt mitbringt.

Das obige ist der detaillierte Inhalt vonTipps zur Verwendung von UserControl zum Generieren von HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!