المتطلبات الأساسية

  • استوديو مرئي 2022.
  • يتم استخدام NET 6 SDK في المثال.

ASP.NET

يقوم ASP.NET بتوسيع نظام .NET الأساسي بأدوات ومكتبات خاصة لإنشاء تطبيقات الويب. هذه بعض الأشياء التي يضيفها ASP.NET إلى منصة .NET:

  • الإطار الأساسي لمعالجة طلبات الويب في C#
  • بناء جملة قوالب صفحة الويب ، المعروفة باسم Razor ، لبناء صفحات ويب ديناميكية باستخدام C#
  • مكتبات لأنماط الويب الشائعة ، مثل Model View Controller (MVC)
  • نظام مصادقة يتضمن مكتبات وقاعدة بيانات وصفحات قوالب للتعامل مع عمليات تسجيل الدخول ، بما في ذلك المصادقة متعددة العوامل والمصادقة الخارجية مع Google و Twitter وغير ذلك.
  • ملحقات المحرر لتوفير تمييز بناء الجملة وإكمال التعليمات البرمجية ووظائف أخرى خاصة لتطوير صفحات الويب

كود النهاية عند استخدام 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 ، اتبع الخطوات التالية:

  1. إنشاء مشروع ASP.NET. ! إنشاء مشروع ASP.NET
  2. قم بتثبيت أحدث المكتبات من NuGet. ! NuGet Manager
  3. أضف أداة تحميل التحميل إلى 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>

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

مثال على التنفيذ

  1. انقر فوق زر الاختيار ! اختر زر
  2. حدد ملف DWG ! اختر ملف
  3. انقر فوق الزر تحميل
  4. انتظر حتى تنتهي المعالجة ! حدد ملف
  5. بعد اكتمال المعالجة ، سيختفي القرص الدوار وسيتم عرض الصورة على الشاشة ! النتيجة

أنظر أيضا