ej2 aspmvc ej1compatibility
1.0.0
이 데모 목적은 EJ1 및 EJ2 호환성 문제를 방지하는 것입니다.
아래 설정은 단일 페이지 ASP.NET MVC 응용 프로그램에서 EJ1 및 EJ2 Syncfusion 구성 요소를 렌더링하는 데 도움이 됩니다.
아래 시작 링크를 사용하여 Essential JS 1 및 Essential JS 2 컨트롤을 만들 수 있습니다.
호환성 스타일을 추가합니다. 서로 영향을 미치지 않는 Essential JS 1 및 Essential JS 2 호환성 스타일이 있습니다.
<head>
@* 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")
</head>
Essential JS 1 및 Essential JS 2에 대한 스크립트를 아래와 같이 추가합니다.
@* Syncfusion Essential JS 1 Scripts *@
<script
src="http://cdn.syncfusion.com/js/assets/external/jquery3.3.1.min.js"></script>
<script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
<script src="http://cdn.syncfusion.com/16.3.0.21/js/web/ej.web.all.min.js"></script>
@* Syncfusion Essential JS 2 Scripts *@
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
참고: ej2 스크립트 앞에 ej1 스크립트를 추가해야 합니다. 그렇지 않으면 스크립트 오류가 발생합니다.
이 요구 사항을 충족하려면 _Layout.cshtml 페이지에서 아래 코드를 사용해야 합니다. EJ1과 EJ2는 서로 다른 작업을 수행하기 위해 동일한 라이브러리 이름을 갖기 때문입니다. 따라서 동일한 응용 프로그램에서 이 두 컨트롤을 참조하면 충돌이 발생할 수 있습니다. 이를 극복하려면 ej 네임스페이스에서 이 라이브러리를 확장해야 합니다.
<script>
var dataCopy = Object.assign({}, ej.data);
$.extend(ej, Syncfusion);
$.extend(ej.data, dataCopy);
</script>
Essential JS 1 및 Essential JS 2 모두에 대한 스크립트 관리자 정의
@Html.EJ().ScriptManager()
@Html.EJS().ScriptManager()
마지막으로 레이아웃 페이지는 다음과 같습니다.
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@* 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")
</head>
<body>
@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)
<script>
var dataCopy = Object.assign({}, ej.data);
$.extend(ej, Syncfusion);
$.extend(ej.data, dataCopy);
</script>
@Html.EJ().ScriptManager()
@Html.EJS().ScriptManager()
<div class="container body-content">
@RenderBody()
</div>
</body>
</html>
시작하기를 사용하여 Essential JS 1 및 Essential JS 2 컨트롤을 초기화할 수 있습니다. 아래 코드 조각에서는 Eessential JS 1 및 Essential JS 2 ASP.NET MVC UI 컨트롤을 초기화했습니다.
<h2> Essential JS 1 - Grid Control</h2>
@(Html.EJ().Grid<object>("FlatGrid")
.Datasource((IEnumerable<object>)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();
})
)
<h2> Essential JS 2 - Grid Component </h2>
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.gridData).Columns(col =>
{ col.Field("OrderID").HeaderText("OrderID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
col.Field("OrderDate").HeaderText("OrderDate").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
}).AllowPaging().PageSettings(page => page.PageSize(4).PageSizes(true)).Render()
