ej2 aspmvc ej1compatibility

Syncfusion Essential JS 1 et Essential JS 2 Compatibilité ASP.Net MVC

Cette démo a pour but d'éviter les problèmes de compatibilité EJ1 et EJ2.

Solution

Les paramètres ci-dessous vous aident à restituer les composants EJ1 et EJ2 Syncfusion dans une application ASP.NET MVC d'une seule page.

Ajout d'une application

Vous pouvez créer des contrôles Essential JS 1 et Essential JS 2 en utilisant les liens de démarrage ci-dessous

• Premiers pas pour le contrôle EJ2 ASPMVC
• Premiers pas pour le contrôle EJ1 ASPMVC

Compatibilité des styles

Ajoutez des styles de compatibilité. Nous avons les styles de compatibilité Essential JS 1 et Essential JS 2 qui ne s'affecteront pas.

">

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

Compatibilité des scripts

Ajoutez des scripts pour Essential JS 1 et Essential JS 2 comme ci-dessous.

@* Syncfusion Essential JS 2 Scripts *@ ">

 @* Syncfusion Essential JS 1 Scripts *@




@* Syncfusion Essential JS 2 Scripts *@

Remarque : il faut ajouter le script ej1 avant les scripts ej2, sinon cela générera une erreur de script.

Ajout de compatibilité

Pour répondre à cette exigence, vous devez utiliser le code ci-dessous dans la page _Layout.cshtml . Parce que EJ1 et EJ2 ont les mêmes noms de bibliothèque pour effectuer les différentes actions. Des conflits peuvent donc survenir lorsque nous référençons ces deux contrôles dans la même application. Pour surmonter ce problème, nous devons étendre ces bibliothèques dans l'espace de noms ej.

Ajout du gestionnaire de scripts

Définir le gestionnaire de scripts pour Essential JS 1 et Essential JS 2

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

Enfin, la page Mise en page ressemble à :

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

Déclarer le contrôle Essential JS 1 et le contrôle Essential JS 2

Vous pouvez initialiser les contrôles Essential JS 1 et Essential JS 2 en utilisant la procédure de démarrage. Dans l'extrait ci-dessous, nous avons initialisé les contrôles d'interface utilisateur Eessential JS 1 et 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