ej2 aspmvc ej1compatibility ดาวน์โหลด - ej2 aspmvc ej1compatibility ดาวน์โหลดซอร์สโค้ด

ความเข้ากันได้ของ Syncfusion Essential JS 1 และ Essential JS 2 ASP.Net MVC

การสาธิตนี้มีวัตถุประสงค์เพื่อหลีกเลี่ยงปัญหาความเข้ากันได้ของ EJ1 และ EJ2

สารละลาย

การตั้งค่าด้านล่างช่วยให้คุณเรนเดอร์ส่วนประกอบ EJ1 และ EJ2 Syncfusion ในแอปพลิเคชัน ASP.NET MVC หน้าเดียว

กำลังเพิ่มแอปพลิเคชัน

คุณสามารถสร้างส่วนควบคุม Essential JS 1 และ Essential JS 2 ได้โดยใช้ลิงก์เริ่มต้นด้านล่าง

เริ่มต้นใช้งานการควบคุม EJ2 ASPMVC
เริ่มต้นใช้งานการควบคุม EJ1 ASPMVC

ความเข้ากันได้ของสไตล์

เพิ่มรูปแบบความเข้ากันได้ เรามีรูปแบบความเข้ากันได้ของ Essential JS 1 และ Essential JS 2 ซึ่งจะไม่ส่งผลกระทบต่อกัน

 
    @* Syncfusion Essential JS 1 Styles *@
    @Styles.Render("https://cdn.syncfusion.com/16.1.0.24/js/web/bootstrap-theme/ej.web.all.compatibility.min.css")

    @* Syncfusion Essential JS 2 Styles *@
    @Styles.Render("https://cdn.syncfusion.com/ej2/styles/compatibility/material.css")

ความเข้ากันได้ของสคริปต์

เพิ่มสคริปต์สำหรับ Essential JS 1 และ Essential JS 2 ดังต่อไปนี้

@* Syncfusion Essential JS 2 Scripts *@ ">

 @* Syncfusion Essential JS 1 Scripts *@




@* Syncfusion Essential JS 2 Scripts *@

หมายเหตุ: จำเป็นต้องเพิ่มสคริปต์ ej1 ก่อนสคริปต์ ej2 ไม่เช่นนั้นสคริปต์จะเกิดข้อผิดพลาด

การเพิ่มความเข้ากันได้

เพื่อให้บรรลุข้อกำหนดนี้ คุณต้องใช้โค้ดด้านล่างในหน้า _Layout.cshtml เนื่องจาก EJ1 และ EJ2 มีชื่อไลบรารีเดียวกันเพื่อดำเนินการที่แตกต่างกัน ดังนั้นข้อขัดแย้งอาจเกิดขึ้นเมื่อเราอ้างอิงการควบคุมทั้งสองนี้ในแอปพลิเคชันเดียวกัน เพื่อเอาชนะสิ่งนี้ เราจำเป็นต้องขยายไลบรารีนี้ในเนมสเปซ ej

การเพิ่มตัวจัดการสคริปต์

กำหนดตัวจัดการสคริปต์สำหรับทั้ง Essential JS 1 และ Essential JS 2

 @Html.EJ().ScriptManager()
@Html.EJS().ScriptManager()

สุดท้าย หน้าเค้าโครงจะมีลักษณะดังนี้:

@* Syncfusion Essential JS 1 Styles *@ @Styles.Render("http://cdn.syncfusion.com/16.3.0.21/js/web/flat-azure/ej.web.all.min.css") @* Syncfusion Essential JS 2 Styles *@ @Styles.Render("https://cdn.syncfusion.com/ej2/styles/compatibility/material.css") @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") @Scripts.Render("~/Scripts/jsrender.min.js") @* Syncfusion Essential JS 1 Scripts *@ @Scripts.Render("~/Scripts/ej/web/ej.web.all.min.js") @* Syncfusion Essential JS 2 Scripts *@ @Scripts.Render("~/Scripts/ej2/ej2.min.js") @RenderSection("scripts", required: false) @Html.EJ().ScriptManager() @Html.EJS().ScriptManager()

@RenderBody()

 
    
    
    @* Syncfusion Essential JS 1 Styles *@
    @Styles.Render("http://cdn.syncfusion.com/16.3.0.21/js/web/flat-azure/ej.web.all.min.css")
    @* Syncfusion Essential JS 2 Styles *@
    @Styles.Render("https://cdn.syncfusion.com/ej2/styles/compatibility/material.css")



    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/Scripts/jsrender.min.js")
    @* Syncfusion Essential JS 1 Scripts *@
    @Scripts.Render("~/Scripts/ej/web/ej.web.all.min.js")
    @* Syncfusion Essential JS 2 Scripts *@
    @Scripts.Render("~/Scripts/ej2/ej2.min.js")
    @RenderSection("scripts", required: false)

    
     
    @Html.EJ().ScriptManager()
    @Html.EJS().ScriptManager()

    
        @RenderBody()

ประกาศการควบคุม Essential JS 1 และการควบคุม JS 2 ที่จำเป็น

คุณสามารถเริ่มต้นการควบคุม Essential JS 1 และ Essential JS 2 ได้โดยใช้การเริ่มต้น ตัวอย่างด้านล่างนี้เราได้เริ่มต้นการควบคุม UI ของ Eessential JS 1 และ Essential JS 2 ASP.NET MVC UI แล้ว

)ViewBag.gridData) .AllowPaging().PageSettings(page => page.PageSize(4)) .Columns(col => { col.Field("OrderID").HeaderText("Order ID").TextAlign(TextAlign.Right).Width(75).Add(); col.Field("CustomerID").HeaderText("CustomerID").Width(80).Add(); col.Field("ShipName").HeaderText("ShipName").Width(100).Add(); col.Field("ShipCity").HeaderText("ShipCity").Width(100).Add(); col.Field("Freight").Format("{0:c3}").HeaderText("Freight").Width(80).TextAlign(TextAlign.Right).Add(); }) )