Sol_Ajax_Spa_MVC_Core

؟ ملاحظة هامة: تم أرشفة هذا المستودع

شكرا لاهتمامك بهذا المشروع! اعتبارًا من 10 أغسطس 2024، قررنا أرشفة هذا المستودع. ماذا يعني هذا؟

• لا يوجد تطوير جديد: لن نعمل بنشاط على تطوير ميزات جديدة أو إصلاح المشكلات.
• للقراءة فقط: أصبح المستودع الآن للقراءة فقط. لا يزال بإمكانك استنساخه، ولكن لن يتم قبول أي تغييرات أخرى.
• حلول بديلة: إذا كنت تبحث عن حلول بديلة أو مشاريع مماثلة، ففكر في استكشاف الرابط التالي: مقالة متوسطة: تحويل تطبيقات ASP.NET Core MVC إلى تطبيقات ذات صفحة واحدة باستخدام AppRun

تطبيق صفحة واحدة في Asp.net core (Spa MVC Core)

أسلوب أفضل لتحويل تطبيق ASP.NET Core إلى تطبيق صفحة واحدة باستخدام منهجية Ajax. الشعار الرئيسي هو تقليل جهد المطور أثناء العمل على إنشاء SPA وتحسين أداء تطبيق الويب على جانب الخادم والعميل.

النقطة الرئيسية

• لا حاجة لكتابة كود Jquery لإنشاء تطبيق صفحة واحدة.
• تحتوي مكتبة Ajax Spa على وظيفة ajax مدمجة والتي سيتم استدعاؤها تلقائيًا.
• استخدم التوجيه الافتراضي من جانب الخادم.
• يمكن للمطور أيضًا استخدام إطار عمل جافا سكريبت آخر جنبًا إلى جنب.

ملحوظة

سيتم تطبيق هذه المكتبة على حل Asp.net core 3.1 إلى 6.0.

يثبت

الخطوة 1:

قم بتثبيت حزمة nuget التالية في الحل الخاص بك.

باستخدام مدير حزمة Nuget:

 PM> Install-Package AjaxSpaMvcCore -Version 1.0.1

باستخدام .Net CLI:

 > dotnet add package AjaxSpaMvcCore --version 1.0.1

الخطوة 2:

انتقل إلى ملف Startup.cs ، وأضف البرامج الوسيطة التالية في طريقة التكوين .

 app . UseAjaxSpa ( ) ;

الخطوة 3:

قم بإضافة مرجع مساعد Ajax spa Tag على ملف _ViewImports.cshtml داخل مجلد العرض.

 @addTagHelper * , AjaxSpaMvcCore

ملاحظة: بناء الحل.

الخطوة 4:

انتقل إلى ملف _Layout.cshtml ، وقم بالعملية التالية.

1. قم بإضافة مرجع جانب العميل التالي قبل علامة إغلاق النص

 < script src =" ~/AjaxSpaResource/js/core.js " > </ script >
< script src =" ~/AjaxSpaResource/js/spa.js " > </ script >

2. استبدل طريقة RenderBody() بالمساعد التالي لعلامة ajax spa، مثل هذا

< main role = " main " class = " pb-3 " >
    @* @RenderBody() *@
    < ajax-spa render-body = " @RenderBody() " ></ ajax-spa >
 </ main >

الخطوة 5:

قم بتطبيق صفحة التخطيط باستخدام طريقة ملحق ApplyLayoutAsync() في ملف _ViewStart.cshtml .

 @ using AjaxSpaMvcCore
@{
    // Layout = "_Layout";
    Layout = await Context . Request . ApplyLayoutAsync ( " ~/Views/Shared/_Layout.cshtml " );
}

أنشئ الحل وقم بتشغيل تطبيق الويب على المتصفح. ستلاحظ أن مشاهدات طفلك لا يتم تحديثها في المتصفح.

نقوم بتحويل حل Asp.net الأساسي MVC بالكامل إلى تطبيق صفحة واحدة باستخدام هذه المكتبة.