الصفحة الرئيسية>كود مصدر ASP>فئات أخرى
تنزيل

توافق Syncfusion Essential JS 1 وEssential JS 2 ASP.Net MVC

الغرض التجريبي هذا هو تجنب مشكلات توافق EJ1 وEJ2.

حل

تساعدك الإعدادات أدناه على عرض مكونات EJ1 وEJ2 Syncfusion في تطبيق ASP.NET MVC بصفحة واحدة.

إضافة التطبيق

يمكنك إنشاء عناصر تحكم Essential JS 1 وEssential JS 2 باستخدام روابط البدء أدناه

  • البدء في التحكم في EJ2 ASPMVC
  • البدء في التحكم في EJ1 ASPMVC

توافق النمط

إضافة أنماط التوافق. لدينا نمط توافق 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>

ملحوظة: تحتاج إلى إضافة برنامج ej1 قبل برامج ej2 وإلا فسوف يؤدي ذلك إلى حدوث خطأ في البرنامج النصي.

إضافة التوافق

لتحقيق هذا المتطلب، تحتاج إلى استخدام الكود أدناه في صفحة _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>

أعلن عن التحكم الأساسي في JS 1 والتحكم الأساسي في JS 2

يمكنك تهيئة عناصر التحكم Essential JS 1 وEssential JS 2 باستخدام البدء. المقتطف أدناه قمنا بتهيئة عناصر تحكم واجهة المستخدم Eessential JS 1 & 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()
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل