ej2 aspmvc ej1compatibility

Syncfusion Essential JS 1 および Essential JS 2 ASP.Net MVC の互換性

このデモの目的は、EJ1 と EJ2 の互換性の問題を回避することです。

解決

以下の setps は、単一ページの ASP.NET MVC アプリケーションで EJ1 および EJ2 Syncfusion コンポーネントをレンダリングするのに役立ちます。

アプリケーションの追加

以下の開始リンクを使用して、Essential JS 1 および Essential JS 2 コントロールを作成できます。

• EJ2 ASPMVC 制御の入門
• EJ1 ASPMVC 制御の入門

スタイルの互換性

互換性のあるスタイルを追加します。 Essential JS 1 と Essential JS 2 の互換性スタイルがあり、相互に影響しません。

">

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

スクリプトの互換性

以下のように Essential JS 1 と Essential JS 2 のスクリプトを追加します。

@* Syncfusion Essential JS 2 Scripts *@ ">

 @* Syncfusion Essential JS 1 Scripts *@




@* Syncfusion Essential JS 2 Scripts *@

注: ej2 スクリプトの前に ej1 スクリプトを追加する必要があります。追加しないとスクリプト エラーがスローされます。

互換性の追加

この要件を達成するには、 _Layout.cshtmlページで以下のコードを使用する必要があります。 EJ1 と EJ2 は、異なるアクションを実行するために同じライブラリ名を持っているためです。したがって、同じアプリケーションでこの両方のコントロールを参照すると、競合が発生する可能性があります。これを克服するには、このライブラリを ej 名前空間で拡張する必要があります。

スクリプトマネージャーの追加

Essential JS 1 と Essential JS 2 の両方のスクリプト マネージャーを定義する

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

最終的に、[レイアウト] ページは次のようになります。

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

Essential JS 1 コントロールと Essential JS 2 コントロールの宣言

「はじめに」を使用して、Essential JS 1 および Essential JS 2 コントロールを初期化できます。以下のスニペットでは、Eessential JS 1 および Essential JS 2 ASP.NET MVC UI コントロールを初期化しています。

)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