ej2 aspmvc ej1compatibility

Совместимость Syncfusion Essential JS 1 и Essential JS 2 с ASP.Net MVC

Эта демонстрационная версия предназначена для того, чтобы избежать проблем совместимости EJ1 и EJ2.

Решение

Приведенные ниже настройки помогут вам визуализировать компоненты EJ1 и EJ2 Syncfusion в одностраничном приложении ASP.NET MVC.

Добавление приложения

Вы можете создать элементы управления 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 *@

Примечание. Необходимо добавить сценарий ej1 перед сценариями ej2, иначе возникнет ошибка сценария.

Добавление совместимости

Чтобы выполнить это требование, вам необходимо использовать приведенный ниже код на странице _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.

)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