Förutsättningar

  • Visual Studio 2022.
  • NET 6 SDK används i exemplet.

ASP.NET

ASP.NET utökar .NET-plattformen med verktyg och bibliotek specifikt för att bygga webbappar. Detta är några saker som ASP.NET lägger till på .NET-plattformen:

  • Ramverk för att bearbeta webbbegäranden på C#
  • Webblöpsyntax, känd som Razor, för att bygga dynamiska webbsidor med C#
  • Bibliotek för vanliga webbmönster, såsom Modell-Visningskontroll (MVC)
  • Autentiseringssystem som innehåller bibliotek, en databas och mallsidor för att hantera inloggningar, inklusive tvåfaktorsautentisering och extern autentisering med Google, Twitter och mer.
  • Redigerarextensioner för att ge syntaxmarkering, kodkomplettering och andra funktioner specifikt för att utveckla webbsidor

Bakgrundskod När du använder ASP.NET är din bakgrundskod, såsom affärslogik och datacenter, skriven med C#, F# eller Visual Basic. Eftersom ASP.NET utökar .NET kan du använda den stora ekosystemet av paket och bibliotek som är tillgängliga för alla .NET-utvecklare. Du kan också skriva dina egna bibliotek som delas mellan alla program skrivna på .NET-plattformen.

Dynamiska sidor med C#, HTML, CSS och JavaScript Razor tillhandahåller en syntax för att skapa dynamiska webbsidor med HTML och C#. Din C#-kod utvärderas på servern och det resulterande HTML-innehållet skickas till användaren. Kod som körs klientsidan skrivs i JavaScript. ASP.NET integreras med JavaScript-ramverk och innehåller förkonfigurerade mallsidor för enkel sida app (SPA)-ramverk som React och Angular.

Skapa ASP.NET-projektet

För att skapa ASP.NET-programmet följer du stegen nedan:

  1. Skapa ASP.NET-projekt. Skapa ASP.NET-projekt
  2. Installera de senaste biblioteken från NuGet. NuGet-hanteraren
  3. Lägg till laddningsspinner i _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"] - Visare</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="~/Visare.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. Lägg till JavaScript för laddningsspinner till 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. Skapa uppladdningsmetod i 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())); // returnera base64-modellen till Index
        }
        catch(Exception ex)
        {
            return BadRequest(ex.Message);
        }
       
    }
}

  3. Lägg till uppladdningsfilformulär till index.cshtml.

    @if (Model != null)
{
    <img src="data:image/png;base64, @Model" /> // visa bild i webbläsaren om filen har laddats upp
}

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

  4. Skapa stil för laddningsspinner i wwwroot/css/site.css-filen.

    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; /* Blå */
    border-top: 16px solid #0a8f33; /* Grön */
    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);
    }
}

Exempel på körning

  1. Klicka på valda knappen Valda knapp
  2. Välj DWG-fil Välj fil
  3. Klicka på Upload-knappen
  4. Vänta tills bearbetningen är klar Välj fil
  5. När bearbetningen är klar försvinner laddningsspinnern och bilden visas på skärmen Resultat

Se även