ej2 aspmvc ej1compatibility

Syncfusion Essential JS 1 und Essential JS 2 ASP.Net MVC-Kompatibilität

Diese Demo dient dazu, EJ1- und EJ2-Kompatibilitätsprobleme zu vermeiden.

Lösung

Die folgenden Einstellungen helfen Ihnen beim Rendern von EJ1- und EJ2-Syncfusion-Komponenten in einer einseitigen ASP.NET MVC-Anwendung.

Anwendung hinzufügen

Sie können Essential JS 1- und Essential JS 2-Steuerelemente erstellen, indem Sie die folgenden Links für die ersten Schritte verwenden

• Erste Schritte für die EJ2 ASPMVC-Steuerung
• Erste Schritte für die EJ1 ASPMVC-Steuerung

Stilkompatibilität

Kompatibilitätsstile hinzufügen. Wir haben den Kompatibilitätsstil Essential JS 1 und Essential JS 2, der sich nicht gegenseitig beeinflusst.

">

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

Skriptkompatibilität

Fügen Sie wie unten beschrieben Skripte für Essential JS 1 und Essential JS 2 hinzu.

@* Syncfusion Essential JS 2 Scripts *@ ">

 @* Syncfusion Essential JS 1 Scripts *@




@* Syncfusion Essential JS 2 Scripts *@

Hinweis: Das EJ1-Skript muss vor den EJ2-Skripten hinzugefügt werden, sonst wird ein Skriptfehler ausgegeben.

Kompatibilität hinzufügen

Um diese Anforderung zu erfüllen, müssen Sie den folgenden Code auf der Seite _Layout.cshtml verwenden. Da EJ1 und EJ2 dieselben Bibliotheksnamen haben, um die unterschiedlichen Aktionen auszuführen. Daher kann es zu Konflikten kommen, wenn wir auf beide Steuerelemente in derselben Anwendung verweisen. Um dies zu überwinden, müssen wir diese Bibliotheken im EJ-Namespace erweitern.

Skript-Manager hinzufügen

Definieren Sie den Skriptmanager für Essential JS 1 und Essential JS 2

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

Schließlich sieht die Layout-Seite so aus:

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

Deklarieren Sie Essential JS 1 Control und Essential JS 2 Control

Sie können die Steuerelemente „Essential JS 1“ und „Essential JS 2“ mit „Erste Schritte“ initialisieren. Mit dem folgenden Snippet haben wir Eessential JS 1 und Essential JS 2 ASP.NET MVC UI Controls initialisiert.

)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