Bagikan melalui

Menambahkan Konten Dinamis ke Halaman Singgahan (C#)

oleh Microsoft

Pelajari cara mencampur konten dinamis dan cache di halaman yang sama. Substitusi pasca-cache memungkinkan Anda menampilkan konten dinamis, seperti iklan banner atau item berita, dalam halaman yang telah di-cache output.

Dengan memanfaatkan penembolokan output, Anda dapat secara dramatis meningkatkan performa aplikasi MVC ASP.NET. Alih-alih meregenerasi halaman masing-masing dan setiap kali halaman diminta, halaman dapat dibuat sekali dan di-cache dalam memori untuk beberapa pengguna.

Tetapi, ada masalah. Bagaimana jika Anda perlu menampilkan konten dinamis di halaman? Misalnya, bayangkan Anda ingin menampilkan iklan spanduk di halaman. Anda tidak ingin iklan banner di-cache sehingga setiap pengguna melihat iklan yang sangat sama. Anda tidak akan menghasilkan uang seperti itu!

Untungnya, ada solusi yang mudah. Anda dapat memanfaatkan fitur kerangka kerja ASP.NET yang disebut substitusi pasca-cache. Substitusi pasca-cache memungkinkan Anda mengganti konten dinamis di halaman yang telah di-cache dalam memori.

Biasanya, ketika Anda mengeluarkan cache halaman dengan menggunakan atribut [OutputCache], halaman di-cache di server dan klien (browser web). Saat Anda menggunakan substitusi pasca-cache, halaman hanya di-cache di server.

Menggunakan Substitusi Pasca-Cache

Menggunakan substitusi pasca-cache memerlukan dua langkah. Pertama, Anda perlu menentukan metode yang mengembalikan string yang mewakili konten dinamis yang ingin Anda tampilkan di halaman cache. Selanjutnya, Anda memanggil metode HttpResponse.WriteSubstitution() untuk menyuntikkan konten dinamis ke halaman.

Bayangkan, misalnya, bahwa Anda ingin menampilkan item berita yang berbeda secara acak di halaman yang di-cache. Kelas di Listing 1 memaparkan satu metode, bernama RenderNews(), yang secara acak mengembalikan satu item berita dari daftar tiga item berita.

Daftar 1 – Models\News.cs

using System;
using System.Collections.Generic;
using System.Web;

namespace MvcApplication1.Models
{
    public class News
    {
        public static string RenderNews(HttpContext context)
        {
            var news = new List<string> 
                { 
                    "Gas prices go up!", 
                    "Life discovered on Mars!", 
                    "Moon disappears!" 
                };
            
            var rnd = new Random();
            return news[rnd.Next(news.Count)];
        }
    }
}

Untuk memanfaatkan substitusi pasca-cache, Anda memanggil metode HttpResponse.WriteSubstitution(). Metode WriteSubstitution() menyiapkan kode untuk mengganti wilayah halaman yang di-cache dengan konten dinamis. Metode WriteSubstitution() digunakan untuk menampilkan item berita acak dalam tampilan di Daftar 2.

Daftar 2 – Views\Home\Index.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Views.Home.Index" %>
<%@ Import Namespace="MvcApplication1.Models" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Index</title>
</head>
<body>
    <div>

    <% Response.WriteSubstitution(News.RenderNews); %>
        
    <hr />
    
    The content of this page is output cached.
    <%= DateTime.Now %>

    </div>
</body>
</html>

Metode RenderNews diteruskan ke metode WriteSubstitution(). Perhatikan bahwa metode RenderNews tidak dipanggil (tidak ada tanda kurung). Sebaliknya referensi ke metode diteruskan ke WriteSubstitution().

Tampilan Indeks di-cache. Tampilan dikembalikan oleh pengontrol di Daftar 3. Perhatikan bahwa tindakan Index() dihiasi dengan atribut [OutputCache] yang menyebabkan tampilan Indeks di-cache selama 60 detik.

Daftar 3 – Controllers\HomeController.cs

using System.Web.Mvc;

namespace MvcApplication1.Controllers
{
    [HandleError]
    public class HomeController : Controller
    {
        [OutputCache(Duration=60, VaryByParam="none")]
        public ActionResult Index()
        {
            return View();
        }
    }
}

Meskipun tampilan Indeks di-cache, item berita acak yang berbeda ditampilkan saat Anda meminta halaman Indeks. Saat Anda meminta halaman Indeks, waktu yang ditampilkan oleh halaman tidak berubah selama 60 detik (lihat Gambar 1). Fakta bahwa waktu tidak berubah membuktikan bahwa halaman di-cache. Namun, konten yang disuntikkan oleh metode WriteSubstitution() - item berita acak - berubah dengan setiap permintaan .

Gambar 1 - Menyuntikkan item berita dinamis di halaman yang di-cache

clip_image002

Menggunakan Substitusi Pasca-Cache dalam Metode Pembantu

Cara yang lebih mudah untuk memanfaatkan substitusi pasca-cache adalah dengan merangkum panggilan ke metode WriteSubstitution() dalam metode pembantu kustom. Pendekatan ini diilustrasikan oleh metode pembantu dalam Daftar 4.

Daftar 4 – AdHelper.cs

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.Mvc;

namespace MvcApplication1.Helpers
{
    public static class AdHelper
    {
        public static void RenderBanner(this HtmlHelper helper)
        {
            var context = helper.ViewContext.HttpContext;
            context.Response.WriteSubstitution(RenderBannerInternal);
        }
        
        private static string RenderBannerInternal(HttpContext context)
        {
            var ads = new List<string> 
                { 
                    "/ads/banner1.gif", 
                    "/ads/banner2.gif", 
                    "/ads/banner3.gif" 
                };

            var rnd = new Random();
            var ad = ads[rnd.Next(ads.Count)];
            return String.Format("<img src='{0}' />", ad);
        }
    }
}

Daftar 4 berisi kelas statis yang mengekspos dua metode: RenderBanner() dan RenderBannerInternal(). Metode RenderBanner() mewakili metode pembantu yang sebenarnya. Metode ini memperluas kelas HtmlHelper ASP.NET MVC standar sehingga Anda dapat memanggil Html.RenderBanner() dalam tampilan seperti metode pembantu lainnya.

Metode RenderBanner() memanggil metode HttpResponse.WriteSubstitution() meneruskan metode RenderBannerInternal() ke metode WriteSubstitution().

Metode RenderBannerInternal() adalah metode privat. Metode ini tidak akan diekspos sebagai metode pembantu. Metode RenderBannerInternal() secara acak mengembalikan satu gambar iklan banner dari daftar tiga gambar iklan banner.

Tampilan Indeks yang dimodifikasi di Daftar 5 menggambarkan bagaimana Anda dapat menggunakan metode pembantu RenderBanner(). Perhatikan bahwa direktif %@ Impor %> tambahan <disertakan di bagian atas tampilan untuk mengimpor namespace layanan MvcApplication1.Helpers. Jika Anda mengabaikan untuk mengimpor namespace layanan ini, maka metode RenderBanner() tidak akan muncul sebagai metode pada properti Html.

Daftar 5 – Views\Home\Index.aspx (dengan metode RenderBanner()

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Views.Home.Index" %>
<%@ Import Namespace="MvcApplication1.Models" %>
<%@ Import Namespace="MvcApplication1.Helpers" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Index</title>
</head>
<body>
    <div>

    <% Response.WriteSubstitution(News.RenderNews); %>
    
    <hr />
    
    <% Html.RenderBanner(); %>
    
    <hr />
    
    The content of this page is output cached.
    <%= DateTime.Now %>

    </div>
</body>
</html>

Saat Anda meminta halaman yang dirender oleh tampilan di Daftar 5, iklan banner yang berbeda ditampilkan dengan setiap permintaan (lihat Gambar 2). Halaman di-cache, tetapi iklan banner disuntikkan secara dinamis oleh metode pembantu RenderBanner().

Gambar 2 – Tampilan Indeks yang menampilkan iklan spanduk acak

clip_image004

Ringkasan

Tutorial ini menjelaskan bagaimana Anda dapat memperbarui konten secara dinamis di halaman cache. Anda mempelajari cara menggunakan metode HttpResponse.WriteSubstitution() untuk memungkinkan konten dinamis disuntikkan di halaman yang di-cache. Anda juga mempelajari cara merangkum panggilan ke metode WriteSubstitution() dalam metode pembantu HTML.

Manfaatkan penembolokan jika memungkinkan - ini dapat berdampak dramatis pada performa aplikasi web Anda. Seperti yang dijelaskan dalam tutorial ini, Anda dapat memanfaatkan penembolokan bahkan ketika Anda perlu menampilkan konten dinamis di halaman Anda.

SebelumnyaBerikutnya

  • Last updated on