Buat Pengelola Berkas ASP.NET MVC Gratis yang Menampilkan PDF

Anda menginginkan sebuah halaman yang menampilkan daftar berkas yang disimpan di server, memungkinkan pengguna mengunduh atau menghapusnya, dan membuka PDF apa pun di dalam browser tanpa meninggalkan situs. Panduan berikut menunjukkan cara melakukannya dengan ASP.NET MVC biasa, cache sesi bawaan, dan penampil dokumen universal Doconut.

1. Buat Aplikasi MVC Minimal

Buat proyek MVC baru di Visual Studio (edisi apa pun, termasuk edisi Community yang gratis).

Tambahkan FileController yang akan menampung aksi pengelola berkas:

public class FileController : Controller
{
    private readonly string _root = Path.Combine(Directory.GetCurrentDirectory(), "App_Data", "Docs");

    public IActionResult Index()
    {
        var files = Directory.GetFiles(_root).Select(Path.GetFileName).ToList();
        return View(files);
    }

    public IActionResult Download(string name)
    {
        var path = Path.Combine(_root, name);
        if (!System.IO.File.Exists(path)) return NotFound();
        var mime = "application/octet-stream";
        return PhysicalFile(path, mime, name);
    }

    public IActionResult Delete(string name)
    {
        var path = Path.Combine(_root, name);
        if (System.IO.File.Exists(path)) System.IO.File.Delete(path);
        return RedirectToAction(nameof(Index));
    }

    public async Task<IActionResult> ViewPdf(string name)
    {
        var path = Path.Combine(_root, name);
        if (!System.IO.File.Exists(path)) return NotFound();

        // Token penampil dibuat di sini (lihat bagian 2)
        var token = await _viewer.OpenDocumentAsync(
            path,
            new Doconut.PdfConfig { AllowSearch = true },
            new DocOptions(),
            CancellationToken.None);

        ViewBag.Token = token;
        ViewBag.BasePath = "doconut";          // matches the middleware branch
        ViewBag.ResPath = "doconut-res/images";// embedded resources
        return View();
    }

    private readonly Doconut.Viewer _viewer;
    public FileController(Doconut.Viewer viewer) => _viewer = viewer;
}

Pengontrol melakukan tiga hal:

Index – membaca folder App_Data/Docs dan mengirimkan nama berkas ke tampilan.
Download / Delete – aksi MVC standar yang menggunakan pembantu PhysicalFile bawaan.
ViewPdf – membuka PDF yang dipilih dengan Doconut, menerima token keamanan, dan mengirimkannya ke tampilan Razor.

2. Siapkan Status Sesi dan Layanan Doconut

Penampil Doconut bergantung pada status sesi ASP.NET untuk melindungi token yang mengidentifikasi dokumen. Tambahkan layanan yang diperlukan di Program.cs (atau Startup.cs untuk proyek .NET 6):

var builder = WebApplication.CreateBuilder(args);

// layanan MVC
builder.Services.AddControllersWithViews();

// cache sesi – diperlukan untuk validasi token
builder.Services.AddDistributedMemoryCache();
builder.Services.AddSession();

// pendaftaran Doconut – arahkan ke file lisensi Anda
builder.Services.AddDoconut(options =>
{
    options.LicensePath = Path.Combine(AppContext.BaseDirectory, "wwwroot", "Doconut.Viewer.lic");
    options.MiddlewarePath = "/doconut";
    options.ResourcesPath = "/doconut-res";
    options.UnsafeMode = false; // pertahankan keamanan default
});

var app = builder.Build();

// Sesi harus dijalankan sebelum middleware penampil
app.UseSession();

// Middleware Doconut harus dipetakan ke jalur yang dikonfigurasi di atas.
// Lihat dokumentasi Doconut untuk pemanggilan pemetaan yang tepat (mis., app.Map("/doconut", …)).

app.UseRouting();
app.UseEndpoints(endpoints => endpoints.MapDefaultControllerRoute());

app.Run();

Poin penting:

AddDistributedMemoryCache menyediakan penyimpanan dalam memori yang dibutuhkan oleh AddSession.
UseSession() harus muncul sebelum middleware Doconut; jika tidak, Anda akan melihat kesalahan runtime “Session middleware not configured.”
MiddlewarePath dan ResourcesPath adalah string koordinasi – cabang middleware sebenarnya harus cocok dengan jalur yang Anda konfigurasikan.

3. Buat Tampilan File‑Manager

Buat Views/File/Index.cshtml. Ini menampilkan daftar file dan menyediakan tindakan untuk mengunduh, menghapus, dan Lihat PDF.

@model List<string>
<h2>Document Library</h2>
<table>
    <thead><tr><th>Name</th><th>Actions</th></tr></thead>
    <tbody>
@foreach (var f in Model)
{
    <tr>
        <td>@f</td>
        <td>
            <a asp-action="Download" asp-route-name="@f">Download</a> |
            <a asp-action="Delete"   asp-route-name="@f">Delete</a> |
            @if (Path.GetExtension(f).Equals(".pdf", StringComparison.OrdinalIgnoreCase))
            {
                <a asp-action="ViewPdf" asp-route-name="@f">View PDF</a>
            }
        </td>
    </tr>
}
    </tbody>
</table>

Ketika pengguna mengklik View PDF, aksi ViewPdf membuat token dan mengembalikan tampilan kedua yang menampung widget penampil.

4. Render Penampil Doconut

Buat Views/File/ViewPdf.cshtml. Halaman ini hanya memerlukan elemen kontainer; widget JavaScript dimuat dari sumber daya yang tersemat.

@{
    var token = ViewBag.Token as string;
    var basePath = ViewBag.BasePath as string;
    var resPath = ViewBag.ResPath as string;
}
<h2>PDF Preview</h2>
<div id="div_ctlDoc"></div>

<script src="@($"{basePath}/docViewer.js")"></script>
<link rel="stylesheet" href="@($"{basePath}/docViewer.css")" />

<script>
    $('#div_ctlDoc').docViewer({
        AccessToken: '@token',
        BasePath: '@basePath',
        ResPath: '@resPath',
        FitType: 'width',
        showThumbs: true,
        autoLoad: true,
        onError: function (msg) { console.error(msg); }
    });
</script>

Widget membaca AccessToken yang Anda berikan, menghubungi endpoint /doconut/DocImage.axd, dan men‑stream setiap halaman sebagai gambar. Karena token terikat pada sesi ASP.NET saat ini, pengguna tidak dapat menyalin URL dan melihat dokumen dari browser lain tanpa cookie sesi yang sama.

5. Menangani Kedaluwarsa Token dan Keamanan

Batas waktu token default Doconut adalah 60 menit (dapat dikonfigurasi melalui DocOptions.TimeOut). Jika penampil menerima “Document session not found” atau “You Are Not Authorized To View This Page”, sesi tersebut telah kedaluwarsa atau permintaan datang dari konteks browser yang berbeda.

Solusi umum:

Muat ulang halaman – kontroler akan menghasilkan token baru.
Perpanjang batas waktu – kirim DocOptions khusus saat membuka dokumen:

var options = new DocOptions { TimeOut = TimeSpan.FromHours(2) };
var token = await _viewer.OpenDocumentAsync(
    path,
    new Doconut.PdfConfig { AllowSearch = true },
    options,
    CancellationToken.None);

Pengaturan lintas asal – pastikan atribut SameSite pada cookie sesi kompatibel dengan domain front‑end Anda. Default Lax berfungsi untuk kebanyakan portal same‑origin.

6. Memperluas Manager (Opsional)

Manajer file inti sudah berfungsi, tetapi Anda mungkin ingin menambahkan:

Unggah – formulir sederhana yang mengirim IFormFile dan menyimpannya ke _root.
Navigasi folder – ubah aksi Index untuk menerima jalur relatif dan lindungi dari traversal direktori (Path.GetFullPath + pemeriksaan StartsWith(_root)).
Pencarian – filter files berdasarkan nama sebelum mengirimnya ke tampilan.

Semua ekstensi ini tetap berada dalam pola MVC yang sama dan terus mendapatkan manfaat dari penampil Doconut yang dilindungi sesi.

7. Apa yang Telah Anda Capai

Sebuah manajer file ASP.NET MVC gratis – tanpa pustaka UI pihak ketiga, tanpa biaya lisensi.
Rendering PDF di dalam browser melalui penampil universal Doconut, menghindari kebutuhan instalasi Office atau Adobe pada klien.
Akses berbasis token yang aman yang memanfaatkan status sesi ASP.NET, mencegah berbagi URL secara sembarangan.
Sebuah basis kode tunggal yang bekerja untuk .NET 6 dan .NET 8 serta dapat dipindahkan ke Razor Pages atau minimal APIs dengan hanya mengubah panggilan pendaftaran (AddDoconut, UseSession).

Deploy aplikasi ke IIS, Azure App Service, atau Docker – konfigurasi Program.cs yang sama bekerja di mana saja karena Doconut berjalan di .NET 6+ dan tidak memerlukan komponen Office native apa pun.

Pengelola Berkas ASP.NET MVC Gratis dengan Penampil PDF Bawaan