Trình xem tệp DWG dựa trên ASP.NET

điều kiện tiên quyết
ASP.NET
Tạo dự án ASP.NET
Ví dụ thực thi
Xem thêm

điều kiện tiên quyết

Studio trực quan 2022.
NET 6 SDK được sử dụng trong ví dụ này.

ASP.NET

ASP.NET mở rộng nền tảng .NET với các công cụ và thư viện dành riêng cho việc xây dựng các ứng dụng web. Đây là một số thứ mà ASP.NET thêm vào nền tảng .NET:

Khung cơ sở để xử lý yêu cầu web trong C#
Cú pháp tạo khuôn mẫu trang web, được gọi là Dao cạo, để xây dựng các trang web động bằng C#
Thư viện dành cho các mẫu web phổ biến, chẳng hạn như Bộ điều khiển Chế độ xem Mô hình (MVC)
Hệ thống xác thực bao gồm thư viện, cơ sở dữ liệu và trang mẫu để xử lý thông tin đăng nhập, bao gồm xác thực đa yếu tố và xác thực bên ngoài với Google, Twitter, v.v.
Tiện ích mở rộng của trình chỉnh sửa để cung cấp đánh dấu cú pháp, hoàn thành mã và các chức năng khác dành riêng cho việc phát triển các trang web

mã phụ trợ Khi sử dụng ASP.NET, mã back-end của bạn, chẳng hạn như logic nghiệp vụ và truy cập dữ liệu, được viết bằng C#, F# hoặc Visual Basic. Vì ASP.NET mở rộng .NET nên bạn có thể sử dụng hệ sinh thái lớn gồm các gói và thư viện có sẵn cho tất cả các nhà phát triển .NET. Bạn cũng có thể tạo các thư viện của riêng mình được chia sẻ giữa bất kỳ ứng dụng nào được viết trên nền tảng .NET.

Các trang động sử dụng C#, HTML, CSS và JavaScript Razor cung cấp cú pháp để tạo các trang web động bằng HTML và C#. Mã C# của bạn được đánh giá trên máy chủ và nội dung HTML kết quả được gửi tới người dùng. Mã thực thi phía máy khách được viết bằng JavaScript. ASP.NET tích hợp với các khung JavaScript và bao gồm các mẫu được định cấu hình sẵn cho các khung ứng dụng trang đơn (SPA) như React và Angular.

Tạo dự án ASP.NET

Để tạo chương trình ASP.NET, hãy làm theo các bước dưới đây:

Tạo dự án ASP.NET.
Cài đặt các thư viện mới nhất từ NuGet.
Thêm công cụ quay vòng trình tải vào 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);
    }
}