ej2 aspmvc ej1compatibility

Syncfusion Essential JS 1 和 Essential JS 2 ASP.Net MVC 相容性

此演示的目的是避免 EJ1 和 EJ2 相容性問題。

解決方案

以下設定可協助您在單頁 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 Control 和 Essential JS 2 Control

您可以使用入門來初始化 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