Prasyarat

  • Visual Studio 2022.
  • NET 6 SDK digunakan dalam contoh.

ASP.NET

ASP.NET memperluas platform .NET dengan alat dan pustaka khusus untuk membuat aplikasi web. Ini adalah beberapa hal yang ditambahkan ASP.NET ke platform .NET:

  • Kerangka kerja dasar untuk memproses permintaan web dalam C#
  • Sintaks template halaman web, dikenal sebagai Razor, untuk membuat halaman web dinamis menggunakan C#
  • Pustaka untuk pola web umum, seperti Model View Controller (MVC)
  • Sistem autentikasi yang menyertakan pustaka, database, dan halaman template untuk menangani login, termasuk autentikasi multi-faktor dan autentikasi eksternal dengan Google, Twitter, dan lainnya.
  • Ekstensi editor untuk menyediakan penyorotan sintaks, penyelesaian kode, dan fungsi lain khusus untuk mengembangkan halaman web

Kode back-end Saat menggunakan ASP.NET kode back-end Anda, seperti logika bisnis dan akses data, ditulis menggunakan C#, F#, atau Visual Basic. Karena ASP.NET memperluas .NET, Anda dapat menggunakan ekosistem besar paket dan pustaka yang tersedia untuk semua pengembang .NET. Anda juga dapat menulis pustaka Anda sendiri yang dibagikan di antara aplikasi apa pun yang ditulis di platform .NET.

Halaman dinamis menggunakan C#, HTML, CSS, dan JavaScript Razor menyediakan sintaks untuk membuat halaman web dinamis menggunakan HTML dan C#. Kode C# Anda dievaluasi di server dan konten HTML yang dihasilkan dikirim ke pengguna. Kode yang mengeksekusi sisi klien ditulis dalam JavaScript. ASP.NET terintegrasi dengan framework JavaScript dan menyertakan template pra-konfigurasi untuk framework aplikasi satu halaman (SPA) seperti React dan Angular.

Membuat proyek ASP.NET

Untuk membuat program ASP.NET, ikuti langkah-langkah di bawah ini:

  1. Buat Proyek ASP.NET. Buat Proyek ASP.NET
  2. Instal pustaka terbaru dari NuGet. Pengelola NuGet
  3. Tambahkan spinner loader ke Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Viewer</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/Viewer.styles.css" asp-append-version="true" />
</head>
<body>

    <div id="loader">
        <div class="spinner"></div>
    </div>
	
    @RenderBody()

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

  1. Add JavaScript for spinner to Index.cshtml.

    <script type="text/javascript">
    function getLoader() {
        var loader = document.getElementById("loader");

        if (loader.style.display == "")
            loader.style.display = "block";
        else
            loader.style.display = "none";
    }
</script>

  2. Create upload method in HomeController.

    public class HomeController : Controller
{
    private readonly ILogger<HomeController> _logger;

    public HomeController(ILogger<HomeController> logger)
    {
        _logger = logger;
    }

    public IActionResult Index()
    {
        return View();
    }

    [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
    public IActionResult Error()
    {
        return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
    }

    [HttpPost]
    public ActionResult Upload(IFormFile file)
    {
        try
        {
            var ms = new MemoryStream();
            var image = Image.Load(file.OpenReadStream());
            image.Save(ms, new PngOptions());

            return View("Index", Convert.ToBase64String(ms.ToArray())); // return base64 model to Index
        }
        catch(Exception ex)
        {
            return BadRequest(ex.Message);
        }
       
    }
}

  3. Add upload file form to index.cshtml.

    @if (Model != null)
{
    <img src="data:image/png;base64, @Model" /> // show image in browser if file is uploaded
}

<form method="post" class="form-control" enctype="multipart/form-data" asp-controller="Home" asp-action="Upload" style="text-align: center;">
    <div>
        <span>Select File:</span>
        <input type="file" name="file" multiple />
    </div>
    <input type="submit" value="Upload" onclick='getLoader()' />
</form>

  4. Create style for spinner in wwwroot/css/site.css file.

    html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

img {
    display:block;
    margin:auto;
    max-height: 80%;
    max-width: 80%;
}

.spinner {
    margin: auto;
    margin-top: 20%;
    border: 16px solid #296fab; /* Blue */
    border-top: 16px solid #0a8f33; /* Green */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

#loader {
    display: none;
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #e1e1e1;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

Contoh eksekusi

  1. Klik tombol pilih tombol Pilih
  2. Pilih file DWG Pilih file
  3. Klik tombol Unggah
  4. Tunggu pemrosesan selesai Pilih file
  5. Setelah pemrosesan selesai, pemintal akan hilang dan gambar akan ditampilkan di layar Hasil

Lihat juga