ej2 aspmvc ej1compatibility
1.0.0
このデモの目的は、EJ1 と EJ2 の互換性の問題を回避することです。
以下の setps は、単一ページの 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()
