نمایشگر فایل های DWG بر اساس ASP.NET

پیش نیازها
ASP.NET
ایجاد پروژه ASP.NET
مثال اجرا
[همچنین رجوع کنید](# بخش 5)

پیش نیازها

ویژوال استودیو 2022.
NET 6 SDK در مثال استفاده شده است.

ASP.NET

ASP.NET پلتفرم دات نت را با ابزارها و کتابخانه هایی به طور خاص برای ساخت برنامه های وب گسترش می دهد. اینها مواردی هستند که ASP.NET به پلتفرم دات نت اضافه می کند:

چارچوب پایه برای پردازش درخواست های وب در سی شارپ
نحو قالب بندی صفحات وب، معروف به Razor، برای ساخت صفحات وب پویا با استفاده از سی شارپ
کتابخانه هایی برای الگوهای رایج وب، مانند کنترلر نمای مدل (MVC)
سیستم احراز هویت که شامل کتابخانه‌ها، پایگاه داده و صفحات الگو برای مدیریت ورود به سیستم، از جمله احراز هویت چند مرحله‌ای و احراز هویت خارجی با Google، Twitter و غیره است.
پسوندهای ویرایشگر برای ارائه برجسته کردن نحو، تکمیل کد و سایر عملکردها به طور خاص برای توسعه صفحات وب

کد پشتیبان هنگام استفاده از ASP.NET کدهای بک‌اند شما، مانند منطق تجاری و دسترسی به داده، با استفاده از C#، F# یا Visual Basic نوشته می‌شوند. از آنجایی که ASP.NET دات نت را گسترش می دهد، می توانید از اکوسیستم بزرگ بسته ها و کتابخانه های موجود برای همه توسعه دهندگان دات نت استفاده کنید. همچنین می‌توانید کتابخانه‌های خود را بنویسید که بین هر برنامه‌ای که بر روی پلتفرم دات‌نت نوشته شده به اشتراک گذاشته می‌شود.

صفحات پویا با استفاده از C#، HTML، CSS و JavaScript Razor یک نحو برای ایجاد صفحات وب پویا با استفاده از HTML و C# ارائه می دهد. کد سی شارپ شما بر روی سرور ارزیابی می شود و محتوای HTML حاصل برای کاربر ارسال می شود. کدی که سمت کلاینت را اجرا می کند در جاوا اسکریپت نوشته شده است. ASP.NET با چارچوب های جاوا اسکریپت ادغام می شود و شامل قالب های از پیش پیکربندی شده برای چارچوب های برنامه تک صفحه ای (SPA) مانند React و Angular است.

ایجاد پروژه ASP.NET

برای ایجاد برنامه ASP.NET مراحل زیر را دنبال کنید:

پروژه ASP.NET ایجاد کنید.
جدیدترین کتابخانه های NuGet را نصب کنید.
اسپینر لودر را به 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>

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>

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);
        }
       
    }
}

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>

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);
    }
}