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