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()
