Inicio>código fuente ASP>Otras categorias
Descargar

Compatibilidad con Syncfusion Essential JS 1 y Essential JS 2 ASP.Net MVC

Esta demostración tiene como objetivo evitar problemas de compatibilidad con EJ1 y EJ2.

Solución

Los siguientes ajustes le ayudarán a representar los componentes EJ1 y EJ2 Syncfusion en una aplicación ASP.NET MVC de una sola página.

Agregar aplicación

Puede crear controles Essential JS 1 y Essential JS 2 utilizando los enlaces de introducción a continuación

  • Primeros pasos para el control EJ2 ASPMVC
  • Primeros pasos para el control EJ1 ASPMVC

Compatibilidad de estilos

Agregue estilos de compatibilidad. Tenemos estilos de compatibilidad Essential JS 1 y Essential JS 2 que no se afectarán entre sí. 

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

Compatibilidad de secuencias de comandos

Agregue scripts para Essential JS 1 y Essential JS 2 como se muestra a continuación. 

 @* 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: Es necesario agregar el script ej1 antes que el script ej2 o, de lo contrario, se generará un error de script.

Agregar compatibilidad

Para cumplir con este requisito, debe utilizar el siguiente código en la página _Layout.cshtml . Porque EJ1 y EJ2 tienen los mismos nombres de biblioteca para realizar diferentes acciones. Por lo tanto, pueden ocurrir conflictos cuando referimos ambos controles en la misma aplicación. Para superar esto, necesitamos ampliar estas bibliotecas en el espacio de nombres ej. 

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

Agregar administrador de secuencias de comandos

Definir el administrador de scripts para Essential JS 1 y Essential JS 2 

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

Finalmente, la página Diseño se ve así: 

 <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 control Essential JS 1 y control Essential JS 2

Puede inicializar los controles Essential JS 1 y Essential JS 2 usando la guía de introducción. En el siguiente fragmento hemos inicializado los controles de interfaz de usuario de Eessential JS 1 y 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
Información adicional
Aplicaciones relacionadas
Recomendado para ti
Información relacionada Todo