ej2 aspmvc ej1compatibility Download - ej2 aspmvc ej1compatibility Quellcode herunterladen

ej2 aspmvc ej1compatibility

Andere Kategorien

1.0.0

Herunterladen

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.

 <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>

Skriptkompatibilität

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

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

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.

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

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:

 <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>

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.

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

Expandieren

Zusätzliche Informationen