ดาวน์โหลด Sol_Ajax_Spa_MVC_Core - ดาวน์โหลดซอร์สโค้ด Sol_Ajax_Spa_MVC

Sol_Ajax_Spa_MVC_Core

หมวดหมู่อื่นๆ

1.0.0

ดาวน์โหลด

- ประกาศสำคัญ: พื้นที่เก็บข้อมูลนี้ถูกเก็บถาวรแล้ว

ขอขอบคุณที่สนใจโครงการนี้! ตั้งแต่วันที่ 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 Package Manger:

 PM> Install-Package AjaxSpaMvcCore -Version 1.0.1

การใช้ .Net CLI:

 > dotnet add package AjaxSpaMvcCore --version 1.0.1

ขั้นตอนที่ 2:

ไปที่ไฟล์ Startup.cs เพิ่มมิดเดิลแวร์ต่อไปนี้ใน Configure Method

 app . UseAjaxSpa ( ) ;

ขั้นตอนที่ 3:

เพิ่มการอ้างอิงตัวช่วยแท็ก Ajax spa ในไฟล์ _ViewImports.cshtml ภายในโฟลเดอร์ View

 @addTagHelper * , AjaxSpaMvcCore

หมายเหตุ: สร้างโซลูชัน

ขั้นตอนที่ 4:

ไปที่ไฟล์ _Layout.cshtml ทำตามขั้นตอนต่อไปนี้

เพิ่มการอ้างอิงฝั่งไคลเอ็นต์ต่อไปนี้ก่อนแท็กปิดเนื้อหา

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

แทนที่เมธอด 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 " );
}