Безкоштовний менеджер файлів ASP.NET MVC з вбудованим переглядачем PDF
← Back to Blog••5 min read

Безкоштовний менеджер файлів ASP.NET MVC з вбудованим переглядачем PDF

Створіть безкоштовний менеджер файлів ASP.NET MVC, який показує PDF

Ви хочете сторінку, яка перелічує файли, збережені на сервері, дозволяє користувачеві завантажувати або видаляти їх, і відкриває будь‑який PDF у браузері без переходу з сайту. Наступний посібник покаже, як саме це зробити за допомогою чистого ASP.NET MVC, вбудованого кешу сесії та універсального переглядача документів Doconut.


1. Створення мінімального MVC‑додатку

Створіть новий MVC‑проект у Visual Studio (будь‑яка редакція, включаючи безкоштовну Community).

Додайте FileController, який буде містити дії менеджера файлів:

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

        // The viewer token is created here (see section 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;
}

Контролер виконує три дії:

  1. Index – читає папку App_Data/Docs і передає імена файлів у представлення.
  2. Download / Delete – стандартні дії MVC, які використовують вбудований допоміжний метод PhysicalFile.
  3. ViewPdf – відкриває вибраний PDF за допомогою Doconut, отримує токен безпеки та передає його у Razor‑представлення.

2. Налаштування стану сесії та сервісів Doconut

Переглядач Doconut покладається на стан сесії ASP.NET для захисту токену, який ідентифікує документ. Додайте необхідні сервіси у Program.cs (або Startup.cs для проєктів .NET 6):

var builder = WebApplication.CreateBuilder(args);

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

// Session cache – required for token validation
builder.Services.AddDistributedMemoryCache();
builder.Services.AddSession();

// Doconut registration – point to your license file
builder.Services.AddDoconut(options =>
{
    options.LicensePath = Path.Combine(AppContext.BaseDirectory, "wwwroot", "Doconut.Viewer.lic");
    options.MiddlewarePath = "/doconut";
    options.ResourcesPath = "/doconut-res";
    options.UnsafeMode = false; // keep the default security
});

var app = builder.Build();

// Session must run before the viewer middleware
app.UseSession();

// The Doconut middleware must be mapped to the path configured above.
// See Doconut documentation for the exact mapping call (e.g., app.Map("/doconut", …)).

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

app.Run();

Ключові моменти:

  • AddDistributedMemoryCache забезпечує пам’яттєве сховище, необхідне для AddSession.
  • UseSession() повинен бути викликаний до middleware Doconut; інакше ви отримаєте помилку під час виконання “Session middleware not configured.”
  • MiddlewarePath та ResourcesPath — це координуючі рядки; фактична гілка middleware має відповідати налаштованому шляху.

3. Створення перегляду файлового менеджера

Створіть Views/File/Index.cshtml. Він виводить список файлів і надає дії для завантаження, видалення та перегляду 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>

Коли користувач натискає View PDF, дія ViewPdf створює токен і повертає друге представлення, яке містить віджет переглядача.


4. Відображення Doconut Viewer

Створіть Views/File/ViewPdf.cshtml. На цій сторінці потрібен лише контейнер; JavaScript‑віджет завантажується з вбудованих ресурсів.

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

Віджет читає переданий AccessToken, звертається до кінцевої точки /doconut/DocImage.axd і передає кожну сторінку у вигляді зображення. Оскільки токен прив’язаний до поточної ASP.NET‑сесії, користувач не може скопіювати URL і переглянути документ в іншому браузері без того самого cookie сесії.


5. Обробка закінчення терміну дії токену та безпека

Типовий термін дії токену Doconut становить 60 хвилин (можна змінити через DocOptions.TimeOut). Якщо переглядач отримує «Document session not found» або «You Are Not Authorized To View This Page», це означає, що сесія закінчилася або запит надходить з іншого контексту браузера.

Типові способи вирішення:

  • Оновити сторінку – контролер згенерує новий токен.
  • Збільшити час очікування – передайте власний DocOptions під час відкриття документа:
var options = new DocOptions { TimeOut = TimeSpan.FromHours(2) };
var token = await _viewer.OpenDocumentAsync(
    path,
    new Doconut.PdfConfig { AllowSearch = true },
    options,
    CancellationToken.None);
  • Налаштування крос‑origin – переконайтеся, що атрибут SameSite у cookie сесії сумісний з доменом вашого фронтенду. За замовчуванням Lax підходить більшості однодоменної інтеграції.

6. Розширення менеджера (необов’язково)

Основний файловий менеджер вже працює, проте ви можете додати:

  • Завантаження – проста форма, що надсилає IFormFile і зберігає його у _root.
  • Навігація по папках – змініть дію Index, щоб приймати відносний шлях і захищати його від обходу директорій (Path.GetFullPath + перевірка StartsWith(_root)).
  • Пошук – фільтруйте files за назвою перед передачею у представлення.

Усі ці розширення залишаються в межах того ж MVC‑шаблону і продовжують користуватися захищеним токеном Doconut‑переглядачем.


7. Чого ви досягли

  • Безкоштовний ASP.NET MVC файловий менеджер – без сторонніх UI‑бібліотек і без ліцензійних платежів.
  • Відображення PDF у браузері за допомогою універсального переглядача Doconut, без потреби у встановленні Office чи Adobe на клієнті.
  • Безпечний доступ на основі токену, що використовує стан ASP.NET‑сесії, запобігаючи довільному поширенню URL.
  • Єдина кодова база, що працює на .NET 6 і .NET 8 і може бути перенесена на Razor Pages або мінімальні API, змінюючи лише реєстраційні виклики (AddDoconut, UseSession).

Розгорніть застосунок в IIS, Azure App Service або Docker – та сама конфігурація Program.cs працює скрізь, оскільки Doconut працює на .NET 6+ і не потребує нативних компонентів Office.

#ASP.NET MVC#File Manager#PDF Viewer#.NET#Doconut#Менеджер файлів#Переглядач PDF