Prerequisiti

  • Visual Studio 2022.
  • NET 6 SDK viene usato nell’esempio.

ASP.NET

ASP.NET estende la piattaforma .NET con strumenti e librerie specifici per la creazione di app Web. Queste sono alcune cose che ASP.NET aggiunge alla piattaforma .NET:

  • Framework di base per l’elaborazione delle richieste Web in C#
  • Sintassi dei modelli di pagine Web, nota come Razor, per la creazione di pagine Web dinamiche utilizzando C#
  • Librerie per pattern web comuni, come Model View Controller (MVC)
  • Sistema di autenticazione che include librerie, un database e pagine modello per la gestione degli accessi, inclusa l’autenticazione a più fattori e l’autenticazione esterna con Google, Twitter e altro.
  • Estensioni dell’editor per fornire l’evidenziazione della sintassi, il completamento del codice e altre funzionalità specifiche per lo sviluppo di pagine web

Codice di back-end Quando si utilizza ASP.NET, il codice back-end, ad esempio la logica aziendale e l’accesso ai dati, viene scritto utilizzando C#, F# o Visual Basic. Poiché ASP.NET estende .NET, è possibile utilizzare l’ampio ecosistema di pacchetti e librerie disponibili per tutti gli sviluppatori .NET. Puoi anche creare le tue librerie condivise tra qualsiasi applicazione scritta sulla piattaforma .NET.

Pagine dinamiche che utilizzano C#, HTML, CSS e JavaScript Razor fornisce una sintassi per la creazione di pagine Web dinamiche utilizzando HTML e C#. Il codice C# viene valutato sul server e il contenuto HTML risultante viene inviato all’utente. Il codice che esegue lato client è scritto in JavaScript. ASP.NET si integra con i framework JavaScript e include modelli preconfigurati per framework di app a pagina singola (SPA) come React e Angular.

Creazione del progetto ASP.NET

Per creare il programma ASP.NET, attenersi alla seguente procedura:

  1. Crea progetto ASP.NET. Crea progetto ASP.NET
  2. Installa le librerie più recenti da NuGet. Gestore NuGet
  3. Aggiungi lo spinner del caricatore a 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);
    }
}

Esempio di esecuzione

  1. Fare clic sul pulsante Scegli Scegli pulsante
  2. Seleziona il file DWG Seleziona file
  3. Fare clic sul pulsante Carica
  4. Attendere il completamento dell’elaborazione Seleziona file
  5. Al termine dell’elaborazione, lo spinner scomparirà e l’immagine verrà visualizzata sullo schermo Risultato

Guarda anche