Voraussetzungen

  • Visual Studio 2022.
  • Im Beispiel wird das NET 6 SDK verwendet.

ASP.NET

ASP.NET erweitert die .NET-Plattform um Tools und Bibliotheken speziell für die Erstellung von Web-Apps. Dies sind einige Dinge, die ASP.NET zur .NET-Plattform hinzufügt:

  • Basisframework zur Verarbeitung von Webanfragen in C#
  • Syntax für Webseitenvorlagen, bekannt als Razor, zum Erstellen dynamischer Webseiten mit C#
  • Bibliotheken für gängige Webmuster, z. B. Model View Controller (MVC)
  • Authentifizierungssystem, das Bibliotheken, eine Datenbank und Vorlagenseiten für die Handhabung von Anmeldungen umfasst, einschließlich Multi-Faktor-Authentifizierung und externer Authentifizierung mit Google, Twitter und mehr.
  • Editor-Erweiterungen zur Bereitstellung von Syntaxhervorhebung, Code-Vervollständigung und anderen Funktionen speziell für die Entwicklung von Webseiten

Back-End-Code Wenn Sie ASP.NET verwenden, wird Ihr Back-End-Code, z. B. Geschäftslogik und Datenzugriff, mit C#, F# oder Visual Basic geschrieben. Da ASP.NET .NET erweitert, können Sie das große Ökosystem an Paketen und Bibliotheken nutzen, das allen .NET-Entwicklern zur Verfügung steht. Sie können auch Ihre eigenen Bibliotheken erstellen, die von allen auf der .NET-Plattform geschriebenen Anwendungen gemeinsam genutzt werden.

Dynamische Seiten mit C#, HTML, CSS und JavaScript Razor bietet eine Syntax zum Erstellen dynamischer Webseiten mit HTML und C#. Ihr C#-Code wird auf dem Server ausgewertet und der resultierende HTML-Inhalt an den Benutzer gesendet. Code, der clientseitig ausgeführt wird, ist in JavaScript geschrieben. ASP.NET lässt sich in JavaScript-Frameworks integrieren und enthält vorkonfigurierte Vorlagen für Single-Page-App-Frameworks (SPA) wie React und Angular.

Erstellen des ASP.NET-Projekts

Um das ASP.NET-Programm zu erstellen, führen Sie die folgenden Schritte aus:

  1. Erstellen Sie ein ASP.NET-Projekt. ASP.NET-Projekt erstellen
  2. Installieren Sie die neuesten Bibliotheken von NuGet. NuGet Manager
  3. Fügen Sie den Loader-Spinner zu Layout.cshtml hinzu
<!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);
    }
}

Ausführungsbeispiel

  1. Klicken Sie auf die Schaltfläche „Auswählen“. Schaltfläche „Auswählen“
  2. Wählen Sie eine DWG-Datei aus Datei auswählen
  3. Klicken Sie auf die Schaltfläche „Hochladen“.
  4. Warten Sie, bis die Verarbeitung abgeschlossen ist Datei auswählen
  5. Nachdem die Verarbeitung abgeschlossen ist, verschwindet der Spinner und das Bild wird auf dem Bildschirm angezeigt Ergebnis

Siehe auch