Razor Pages slow rendering
S Lalith Prasad
0
Reputation points
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?
Sign in to answer