Önkoşullar

  • Görsel Stüdyo 2022.
  • Örnekte NET 6 SDK kullanılmıştır.

ASP.NET

ASP.NET, .NET platformunu özellikle web uygulamaları oluşturmaya yönelik araçlar ve kitaplıklarla genişletir. ASP.NET’in .NET platformuna eklediği şeylerden bazıları şunlardır:

  • C# dilinde web isteklerini işlemek için temel çerçeve
  • C# kullanarak dinamik web sayfaları oluşturmak için Razor olarak bilinen web sayfası şablonlama sözdizimi
  • Model Görünüm Denetleyicisi (MVC) gibi yaygın web kalıpları için kitaplıklar
  • Çok faktörlü kimlik doğrulama ve Google, Twitter ve daha fazlası ile harici kimlik doğrulama dahil olmak üzere oturum açma işlemleri için kitaplıklar, bir veritabanı ve şablon sayfaları içeren kimlik doğrulama sistemi.
  • Özellikle web sayfalarını geliştirmek için sözdizimi vurgulama, kod tamamlama ve diğer işlevleri sağlayan düzenleyici uzantıları

Arka uç kodu ASP.NET kullanırken iş mantığı ve veri erişimi gibi arka uç kodunuz C#, F# veya Visual Basic kullanılarak yazılır. ASP.NET, .NET’i genişlettiği için, tüm .NET geliştiricilerinin kullanabileceği geniş paket ve kitaplık ekosistemini kullanabilirsiniz. .NET platformunda yazılmış herhangi bir uygulama arasında paylaşılan kendi kitaplıklarınızı da yazabilirsiniz.

C#, HTML, CSS ve JavaScript kullanan dinamik sayfalar Razor, HTML ve C# kullanarak dinamik web sayfaları oluşturmak için bir sözdizimi sağlar. C# kodunuz sunucuda değerlendirilir ve ortaya çıkan HTML içeriği kullanıcıya gönderilir. İstemci tarafında yürütülen kod, JavaScript’te yazılır. ASP.NET, JavaScript çerçeveleriyle entegre olur ve React ve Angular gibi tek sayfa uygulama (SPA) çerçeveleri için önceden yapılandırılmış şablonlar içerir.

ASP.NET projesini oluşturma

ASP.NET programını oluşturmak için aşağıdaki adımları takip ediniz:

  1. ASP.NET Projesi oluşturun. ASP.NET Projesi Oluştur
  2. NuGet’ten en son kitaplıkları yükleyin. NuGet Yöneticisi
  3. Layout.cshtml dosyasına yükleyici döndürücü ekleyin
<!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);
    }
}

Yürütme örneği

  1. Seç düğmesine tıklayın Düğmeyi seç
  2. DWG dosyasını seçin ![Dosya seç](resimler/dosya seç-1.png)
  3. Yükle düğmesini tıklayın
  4. İşlemin bitmesini bekleyin Dosya seç
  5. İşlem tamamlandıktan sonra döndürücü kaybolacak ve görüntü ekranda görüntülenecektir. Sonuç

Ayrıca bakınız