Página Inicial>Código fonte ASP>Outras categorias
Baixar

Compatibilidade com Syncfusion Essential JS 1 e Essential JS 2 ASP.Net MVC

Esta demonstração tem como objetivo evitar problemas de compatibilidade com EJ1 e EJ2.

Solução

As configurações abaixo ajudam você a renderizar os componentes EJ1 e EJ2 Syncfusion em um aplicativo ASP.NET MVC de página única.

Adicionando aplicativo

Você pode criar controles Essential JS 1 e Essential JS 2 usando os links de introdução abaixo

  • Introdução ao controle EJ2 ASPMVC
  • Introdução ao controle EJ1 ASPMVC

Compatibilidade de estilo

Adicione estilos de compatibilidade. Temos estilos de compatibilidade Essential JS 1 e Essential JS 2 que não afetarão um ao outro. 

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

Compatibilidade de scripts

Adicione scripts para Essential JS 1 e Essential JS 2 conforme abaixo. 

 @* 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>

Nota: É necessário adicionar o script ej1 antes dos scripts ej2 ou ocorrerá um erro de script.

Adicionando compatibilidade

Para atender a esse requisito, você precisa usar o código abaixo na página _Layout.cshtml . Porque EJ1 e EJ2 possuem os mesmos nomes de biblioteca para realizar as diferentes ações. Portanto, podem ocorrer conflitos quando referimos esses dois controles na mesma aplicação. Para superar isso, precisamos estender essas bibliotecas no namespace ej. 

 <script>
    var dataCopy = Object.assign({}, ej.data);
    $.extend(ej, Syncfusion);
    $.extend(ej.data, dataCopy);
</script>

Adicionando Gerenciador de Scripts

Defina o gerenciador de scripts para Essential JS 1 e Essential JS 2 

 @Html.EJ().ScriptManager()
@Html.EJS().ScriptManager()

Finalmente, a página Layout se parece com: 

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

Declarar controle JS 1 essencial e controle JS 2 essencial

Você pode inicializar os controles Essential JS 1 e Essential JS 2 usando os primeiros passos. No trecho abaixo, inicializamos os controles de UI Eessential JS 1 e Essential JS 2 ASP.NET MVC. 

 <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()
Expandir
Informações adicionais
Aplicativos Relacionados
Recomendado para você
Informações Relacionadas Todos