Telerik ASP.NET MVC 5 的多个 jQuery 脚本答案

【问题标题】：multiple jQuery Scripts with Telerik ASP.NET MVC 5Telerik ASP.NET MVC 5 的多个 jQuery 脚本
【发布时间】：2023-03-22 15:10:01
【问题描述】：

我在一个页面上使用两个 jQuery 脚本时遇到问题。一个是我的引导模板，第二个是我的 Telerik JQuery（UI 组件）。

我一直在互联网上搜索解决方案，我找到了“jQuery.noConflict()”方法。

建议将此方法放在我要使用的脚本之前..（？）但是 Telerik 组件是使用 Html Helpers 创建的：

示例：

@(Html.Kendo().Scheduler<Schoolproject.Models.ViewModels.ShiftViewModel>()
    .Name("scheduler")
    .Date(DateTime.Today)
    .StartTime(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 11, 00, 00))
    .WorkDayStart(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 00, 00, 00))
    .WorkDayEnd(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 23, 59, 59))
    .WorkWeekStart(0)
    .WorkWeekEnd(6)
    .Height(600)

    .Views(views =>
    {
        views.DayView(dayView => dayView.WorkDayCommand(false));
        views.WeekView(weekView => weekView.Selected(true));
        views.WeekView(weekView => weekView.WorkDayCommand(false));
        views.MonthView();
        views.AgendaView();
    })

    .Resources(resource =>
    {
        resource.Add(m => m.UserId)
            .Title("Personeel")
            .DataTextField("Text")
            .DataValueField("Value")
            .DataColorField("Color")
            .BindTo(new[] {
                    new { Text = "Alex", Value = 1, Color = "#f8a398" } ,
                    new { Text = "Bob", Value = 2, Color = "#51a0ed" } ,
                    new { Text = "Charlie", Value = 3, Color = "#56ca85" }

            });


    })

    .DataSource(d => d
    .Model(m =>
    {
        m.Id(f => f.ShiftId);
        m.Field(f => f.UserId).DefaultValue(1);
        m.Field(f => f.IsPublished == true);

    })
    .Events(e => e.Error("error_handler"))
    .Read("Availabilities_Read", "Scheduler")
    .Create("Availabilities_Create", "Scheduler")
    .Update("Availabilities_Update", "Scheduler")
    .Destroy("Availabilities_Destroy", "Scheduler")
    )
    )

我的 2 个 jQuery 文件呈现在我的“Shared/_LayoutPage.cshtml”中

有人能告诉我应该在哪里添加这个 jQuery.noConflift() 方法以使我的 Telerik UI 组件正常工作吗？

提前致谢，

N00由程序员

【问题讨论】：

jquery UI 依赖于jquery，您必须先加载jquery，然后再加载jqueryUI。所有的 jquery 脚本都应该在第一次加载
@JohnAnkanna，我尝试了你的解决方案，它奏效了！我的错误是我将 Telerik Jquery UI 放在了正文部分末尾的模板的 jquery 文件的 HEAD 部分中。我切换了两者，现在它可以工作了......不需要额外的代码。 :))))
@JohnAnkanna，哈哈，这听起来很尴尬，但我不知道如何突出您的评论 xD。这就是为什么我添加了一个带有指向您的指针的新答案；）
@Polarbear90 当您将鼠标悬停在左侧时，您可以看到向上的按钮

标签： javascript jquery asp.net-mvc kendo-ui telerik

【解决方案1】：

您可以定义 $.noConflict() 在哪里添加您的 javascript 引用，即 MVC 中的布局页面，如下所示：

<script src="jquery.js"></script>
<script src="other_lib.js"></script>

<script>
    $.noConflict();
    jQuery( document ).ready(function( $ ) {
      // Code that uses jQuery's $ can follow here.
    });
    // Code that uses other library's $ can follow here.
</script>

另一方面，请确保您已按正确顺序加载了 javascript 文件。这是布局页面中的示例顺序：

<head>        
    <script src="@Url.Content("~/Scripts/kendo/2015.1.408/jquery.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2015.1.408/jszip.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2015.1.408/kendo.all.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2015.1.408/kendo.aspnetmvc.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>
</head>

希望这会有所帮助...

【讨论】：

为什么 other_lib.js 在 jquery.js 之前？
第一个加载的js是jquery.min.js，第二个是jszip.min.js。其他库是什么？？？
穆拉特，我不知道，这就是我问的原因，因为从你的第一个例子中我不清楚这部分。否则我理解答案并同意，但这个细微的差别让我感到困扰并阻止我投票:)
重点是：如果js2使用了js1中的一些方法，那么你必须先加载js1然后是 js2。因此，当 javascript 文件之间存在依赖关系时，它会产生很大的不同。一般最好先加载jquery或者常用的javascript文件。
我同意你的观点并编辑了我的答案，以便其他人也可以从这个答案中受益。非常感谢您帮助我意识到错误；）

【解决方案2】：

对于那些想知道解决方案是什么的人：

我把Template的jQuery文件放在

部分，把Kendo的jQuery文件放在部分的末尾。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>ScheduleMe | @ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Styles.Render("~/font-awesome/css")

    @Scripts.Render("~/bundles/jquery")


</head>
<body>

    <!-- Wrapper-->
    <div id="wrapper">

        <!-- Navigation -->
        @Html.Partial("_Navigation")

        <!-- Page wraper -->
        <div id="page-wrapper" class="gray-bg">

            <!-- Top Navbar -->
            @Html.Partial("_TopNavbar")

            <!-- Main view  -->
            @RenderBody()

            <!-- Footer -->
            @Html.Partial("_Footer")

        </div>
        <!-- End page wrapper-->

    </div>
    <!-- End wrapper-->

    @Scripts.Render("~/bundles/kendo")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/plugins/metsiMenu")
    @Scripts.Render("~/plugins/pace")
    @Scripts.Render("~/plugins/slimScroll")
    @Scripts.Render("~/bundles/inspinia")
    @Styles.Render("~/Content/kendo/css")

    @RenderSection("scripts", required: false)

</body>
</html>

我的剑道对象生成没有任何问题+模板功能也可以工作！

我 = 快乐！

感谢 John Ankanna 提供此答案，以及其他人的努力和时间！

【讨论】：