Razor Pages slow rendering

S Lalith Prasad 0 Reputation points
2024-08-18T04:33:51.42+00:00

Following are my Razor pages cshtml and cs files:

Base64.cshtml:

@page
@model razor.Pages.Utilities.Base64Model
@{
    ViewData["Title"] = "Convert document to Base64";
}
<style>
    .input-group-text {
        cursor: pointer;
        transition: color 0.3s ease;
    }
    .icon-clipboard {
        color: #000;
    }
    .icon-check {
        color: green;
    }
</style>
<div class="container">
    <h1>Convert Document to Base64</h1>
    <form method="post" enctype="multipart/form-data" class="mt-4">
        <input type="file" id="file" name="file" class="form-control" />
        <button class="mt-4 btn btn-primary w-100 text-center" type="submit">
            Convert
        </button>
    </form>
    @if (!string.IsNullOrEmpty(Model.Base64String))
    {
        <div class="mt-4">
            <label for="base64String">Base64String</label>
            <div class="input-group mt-2">
                <textarea id="base64String" class="form-control" rows="10">@Model.Base64String</textarea>
                <span class="input-group-text" id="copyButtonOne">
                    <i class="bi bi-clipboard icon-clipboard" id="clipboardIconOne"></i>
                    <i class="bi bi-check icon-check d-none" id="checkIconOne"></i>
                </span>
            </div>
        </div>
    }
    @if (!string.IsNullOrEmpty(Model.MimeType))
    {
        <div class="mt-4">
            <label for="base64StringWithMimeType">Base64String With MimeType</label>
            <div class="input-group mt-2">
                <textarea id="base64StringWithMimeType" class="form-control" rows="10">@($"{Model.MimeType}{Model.Base64String}")</textarea>
                <span class="input-group-text" id="copyButtonTwo">
                    <i class="bi bi-clipboard icon-clipboard" id="clipboardIconTwo"></i>
                    <i class="bi bi-check icon-check d-none" id="checkIconTwo"></i>
                </span>
            </div>
        </div>
    }
</div>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        let copyButtonOne = document.getElementById('copyButtonOne');
        let copyButtonTwo = document.getElementById('copyButtonTwo');
        let base64String = document.getElementById('base64String');
        let base64StringWithMimeType = document.getElementById('base64StringWithMimeType');
        let clipboardIconOne = document.getElementById('clipboardIconOne');
        let checkIconOne = document.getElementById('checkIconOne');
        let clipboardIconTwo = document.getElementById('clipboardIconTwo');
        let checkIconTwo = document.getElementById('checkIconTwo');
        copyButtonOne.addEventListener('click', function () {
            navigator.clipboard.writeText(base64String.value).then(function () {
                clipboardIconOne.classList.add('d-none');
                checkIconOne.classList.remove('d-none');
                setTimeout(function () {
                    clipboardIconOne.classList.remove('d-none');
                    checkIconOne.classList.add('d-none');
                }, 500);
            })
        });
        copyButtonTwo.addEventListener('click', function () {
            navigator.clipboard.writeText(base64StringWithMimeType.value).then(function () {
                clipboardIconTwo.classList.add('d-none');
                checkIconTwo.classList.remove('d-none');
                setTimeout(function () {
                    clipboardIconTwo.classList.remove('d-none');
                    checkIconTwo.classList.add('d-none');
                }, 500);
            })
        });
    }); 
</script>

Base64.cshtml.cs:

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace razor.Pages.Utilities
{
    public class Base64Model : PageModel
    {
        [BindProperty]
        public string? Base64String { get; set; }
        [BindProperty]
        public string? MimeType { get; set; }
        public async Task OnPostAsync(IFormFile file)
        {
            if (file is not null && file.Length > 0)
            {
                using MemoryStream stream = new MemoryStream();
                await file.CopyToAsync(stream);
                byte[] fileBytes = stream.ToArray();
                Base64String = Convert.ToBase64String(fileBytes);
                MimeType = $"data:{GetMimeType(file.FileName)};base64,";
            }
        }
        private string GetMimeType(string fileName)
        {
            var extension = Path.GetExtension(fileName).ToLowerInvariant();
            return extension switch
            {
                ".svg" => "image/svg+xml",
                ".png" => "image/png",
                ".jpg" => "image/jpeg",
                ".jpeg" => "image/jpeg",
                ".gif" => "image/gif",
                ".pdf" => "application/pdf",
                ".txt" => "text/plain",
                ".html" => "text/html",
                ".htm" => "text/html",
                ".css" => "text/css",
                ".js" => "application/javascript",
                ".json" => "application/json",
                ".xml" => "application/xml",
                ".csv" => "text/csv",
                ".zip" => "application/zip",
                ".tar" => "application/x-tar",
                ".gz" => "application/gzip",
                ".bz2" => "application/x-bzip2",
                ".7z" => "application/x-7z-compressed",
                ".mp3" => "audio/mpeg",
                ".wav" => "audio/wav",
                ".ogg" => "audio/ogg",
                ".mp4" => "video/mp4",
                ".avi" => "video/x-msvideo",
                ".mov" => "video/quicktime",
                ".mkv" => "video/x-matroska",
                ".webm" => "video/webm",
                ".ico" => "image/x-icon",
                ".bmp" => "image/bmp",
                ".tiff" => "image/tiff",
                ".heif" => "image/heif",
                ".heic" => "image/heic",
                ".woff" => "font/woff",
                ".woff2" => "font/woff2",
                ".eot" => "application/vnd.ms-fontobject",
                ".ttf" => "font/ttf",
                ".otf" => "font/otf",
                ".jsonld" => "application/ld+json",
                _ => "application/octet-stream",
            };
        }
    }
}

as you can see, I have two text areas in cshtml. the first text area loads very fast but then the page takes around 2 ~ 3 seconds to load the second text area. I think the second text area also should load quickly along with the first text area as I am just appending the MimeType to the generated Base64string. what am I missing?

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,553 questions
{count} votes

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.