מציג קבצי DWG המבוססים על ASP.NET

דרישות מוקדמות
ASP.NET
יצירת פרויקט ASP.NET
דוגמה לביצוע
ראה גם

דרישות מוקדמות

Visual Studio 2022.
NET 6 SDK משמש בדוגמה.

ASP.NET

ASP.NET מרחיבה את פלטפורמת NET עם כלים וספריות במיוחד לבניית אפליקציות אינטרנט. אלה כמה דברים ש-ASP.NET מוסיפה לפלטפורמת NET.

מסגרת בסיס לעיבוד בקשות אינטרנט ב-C#
תחביר תבנית דף אינטרנט, המכונה Razor, לבניית דפי אינטרנט דינמיים באמצעות C#
ספריות לדפוסי אינטרנט נפוצים, כגון Model View Controller (MVC)
מערכת אימות הכוללת ספריות, מסד נתונים ודפי תבנית לטיפול בכניסות לרבות אימות רב-גורמי ואימות חיצוני מול גוגל, טוויטר ועוד.
הרחבות עורך כדי לספק הדגשת תחביר, השלמת קוד ופונקציונליות אחרת במיוחד לפיתוח דפי אינטרנט

קוד אחורי בעת שימוש ב-ASP.NET הקוד האחורי שלך, כגון לוגיקה עסקית וגישה לנתונים, נכתב באמצעות C#, F# או Visual Basic. מכיוון ש-ASP.NET מרחיב את .NET, אתה יכול להשתמש במערכת האקולוגית הגדולה של חבילות וספריות הזמינה לכל מפתחי NET. אתה יכול גם לכתוב ספריות משלך המשותפות בין כל היישומים שנכתבו בפלטפורמת NET.

דפים דינמיים המשתמשים ב-C#, HTML, CSS ו-JavaScript Razor מספק תחביר ליצירת דפי אינטרנט דינמיים באמצעות HTML ו-C#. קוד ה-C# שלך מוערך בשרת ותוכן ה-HTML המתקבל נשלח למשתמש. קוד שמבצע בצד הלקוח כתוב ב-JavaScript. ASP.NET משתלב עם מסגרות JavaScript וכולל תבניות מוגדרות מראש עבור מסגרות של אפליקציה אחת (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);
    }
}