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