ej2 aspmvc ej1compatibility

Kompatibilitas Syncfusion Essential JS 1 dan Essential JS 2 ASP.Net MVC

Demo ini bertujuan untuk menghindari masalah kompatibilitas EJ1 & EJ2.

Larutan

Set di bawah ini membantu Anda merender komponen Syncfusion EJ1 dan EJ2 dalam satu halaman Aplikasi ASP.NET MVC.

Menambahkan Aplikasi

Anda dapat membuat kontrol Essential JS 1 dan Essential JS 2 menggunakan tautan memulai di bawah ini

• Memulai kontrol EJ2 ASPMVC
• Memulai kontrol ASPMVC EJ1

Kompatibilitas Gaya

Tambahkan gaya kompatibilitas. Kami memiliki gaya kompatibilitas Essential JS 1 dan Essential JS 2 yang tidak akan saling mempengaruhi.

">

 
    @* 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")

Kompatibilitas Skrip

Tambahkan skrip untuk Essential JS 1 dan Essential JS 2 seperti di bawah ini.

@* Syncfusion Essential JS 2 Scripts *@ ">

 @* Syncfusion Essential JS 1 Scripts *@




@* Syncfusion Essential JS 2 Scripts *@

Catatan: Perlu menambahkan skrip ej1 sebelum skrip ej2 atau skrip tersebut akan menimbulkan kesalahan skrip.

Menambahkan Kompatibilitas

Untuk mencapai persyaratan ini, Anda perlu menggunakan kode di bawah ini di halaman _Layout.cshtml . Karena EJ1 dan EJ2 memiliki nama perpustakaan yang sama untuk melakukan tindakan berbeda. Jadi konflik mungkin terjadi saat kami merujuk kedua kontrol ini ke aplikasi yang sama. Untuk mengatasinya kita perlu memperluas perpustakaan ini di namespace ej.

Menambahkan Manajer Skrip

Tentukan Manajer skrip untuk Essential JS 1 dan Essential JS 2

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

Akhirnya, halaman Layout terlihat seperti:

@* 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()
    

Deklarasikan Kontrol Essential JS 1 & Kontrol Essential JS 2

Anda dapat menginisialisasi kontrol Essential JS 1 & Essential JS 2 dengan memulai. Cuplikan di bawah ini kami telah menginisialisasi Kontrol UI Eessential JS 1 & Essential JS 2 ASP.NET MVC.

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

Essential JS 2 - Grid Component

@Html.EJS().Grid("Grid").DataSource((IEnumerable