Beranda>Kode sumber ASP>Kategori lainnya
Unduh

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. 

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

Kompatibilitas Skrip

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

 @* Syncfusion Essential JS 1 Scripts *@
<script 
src="http://cdn.syncfusion.com/js/assets/external/jquery3.3.1.min.js"></script>
<script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
<script src="http://cdn.syncfusion.com/16.3.0.21/js/web/ej.web.all.min.js"></script>

@* Syncfusion Essential JS 2 Scripts *@
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>

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. 

 <script>
    var dataCopy = Object.assign({}, ej.data);
    $.extend(ej, Syncfusion);
    $.extend(ej.data, dataCopy);
</script>

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: 

 <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @* 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")
</head>

<body>
    @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)

    <script>
        var dataCopy = Object.assign({}, ej.data);
        $.extend(ej, Syncfusion);
        $.extend(ej.data, dataCopy);
    </script>
     
    @Html.EJ().ScriptManager()
    @Html.EJS().ScriptManager()

    <div class="container body-content">
        @RenderBody()
    </div>

</body>
</html>

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. 

 <h2> Essential JS 1 - Grid Control</h2>

    @(Html.EJ().Grid<object>("FlatGrid")
                            .Datasource((IEnumerable<object>)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();
                            })
    )


<h2> Essential JS 2 - Grid Component </h2>
   @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.gridData).Columns(col =>
    {     col.Field("OrderID").HeaderText("OrderID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
        col.Field("OrderDate").HeaderText("OrderDate").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();

col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();

    }).AllowPaging().PageSettings(page => page.PageSize(4).PageSizes(true)).Render()
Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua