Kendo Ui comboBox答案

【问题标题】：Kendoui comboBoxKendo Ui comboBox
【发布时间】：2013-09-17 09:15:03
【问题描述】：

我有一个剃须刀页面，并以这种方式创建 Kendo 组合控件：

@(Html.Kendo()
                      .ComboBoxFor(model => model.GenderCode)
                      .Name("GenderCode")
                      .Placeholder("Choose Gender...")
                      .DataTextField("Text")
                      .DataValueField("Value")
                      .BindTo(new List<SelectListItem>()
                             {
                                 new SelectListItem()
                                 {
                                     Text = "Male", Value = "M"
                                 },
                                 new SelectListItem()
                                 {
                                     Text = "Female", Value = "F"
                                 }
                             })
                      .Suggest(true))

但它是这样渲染的：

<input data-val="true" data-val-required="Gender Code is required!" id="GenderCode" name="GenderCode" type="text" /><script>
    jQuery(function(){jQuery("#GenderCode").kendoDropDownList({"dataSource":[{"Text":"Male","Value":"M"},{"Text":"Female","Value":"F"}],"dataTextField":"Text","dataValueField":"Value"});});
</script>
            <span class="field-validation-valid" data-valmsg-for="GenderCode" data-valmsg-replace="true"></span>

谁能告诉我我做错了什么？

更新在我做了更多调查之后，我看到我收到一个错误“对象 [对象对象] 没有方法 'kendoDatePicker'”，当我在 Kendo 网站上查找时，它是这样说的：

http://docs.kendoui.com/getting-started/troubleshooting Kendo 小部件不可用或未定义的 JavaScript 错误如果页面中不止一次包含 jQuery，所有现有的 jQuery 插件（包括 Kendo UI）都将被清除。如果未包含所需的 Kendo JavaScript 文件，也会发生这种情况。将抛出以下 JavaScript 错误（取决于浏览器）： TypeError: Object # has no method 'kendoGrid' (在谷歌浏览器中) TypeError: $("#Grid").kendoGrid 不是函数（在 FireFox 中）对象不支持属性或方法“kendoGrid”（在 Internet Explorer 9+ 中）对象不支持此属性或方法（在旧版本的 Internet Explorer 中）

所以我检查了我的包，但我没有看到任何地方我的 jquery 包含加倍：

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.unobtrusive*",
                    "~/Scripts/jquery.validate*"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

        bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                    "~/Content/themes/base/jquery.ui.core.css",
                    "~/Content/themes/base/jquery.ui.resizable.css",
                    "~/Content/themes/base/jquery.ui.selectable.css",
                    "~/Content/themes/base/jquery.ui.accordion.css",
                    "~/Content/themes/base/jquery.ui.autocomplete.css",
                    "~/Content/themes/base/jquery.ui.button.css",
                    "~/Content/themes/base/jquery.ui.dialog.css",
                    "~/Content/themes/base/jquery.ui.slider.css",
                    "~/Content/themes/base/jquery.ui.tabs.css",
                    "~/Content/themes/base/jquery.ui.datepicker.css",
                    "~/Content/themes/base/jquery.ui.progressbar.css",
                    "~/Content/themes/base/jquery.ui.theme.css"));

        // The Kendo JavaScript bundle
        bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
                "~/Scripts/kendo/2013.2.716/kendo.web.min.js", // or kendo.all.min.js if you want to use Kendo UI Web and Kendo UI DataViz
                "~/Scripts/kendo/2013.2.716/kendo.aspnetmvc.min.js"));


        // The Kendo CSS bundle
        bundles.Add(new StyleBundle("~/Content/kendo").Include(
                "~/Content/kendo/2013.2.716/kendo.common.*",
                "~/Content/kendo/2013.2.716/kendo.default.*"));

更新 2 我已经切换并尝试了这个

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-2.0.3.js"));

            // The Kendo JavaScript bundle
            //bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
            //        "~/Scripts/kendo/2013.2.716/jquery.min.js"));

【问题讨论】：

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

【解决方案1】：

您可能需要重新检查依赖项。从this page 开始，对于组合框，它需要 jquery.js，我在你的包中没有看到。

【讨论】：

【解决方案2】：

问题是布局页面有 2 个脚本部分，一个在顶部，一个在底部。我将错误消失的底部注释掉了。

<head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        ...
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
    @Styles.Render("~/Content/kendo")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/kendo")

    </head>
    <body>
        <header>
            <div class="content-wrapper">
                <div class="float-left">
                    <p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>
                </div>
                <div class="float-right">
                    <section id="login">
                        @Html.Partial("_LoginPartial")
                    </section>
                    <nav>
                        <ul id="menu">
                            <li>@Html.ActionLink("User", "Index", "UserView", new { area = "" }, null)</li>
                            <li>@Html.ActionLink("Home", "Index", "Home", new { area = "" }, null)</li>
                            <li>@Html.ActionLink("API", "Index", "Help", new { area = "" }, null)</li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <div id="body">
            @RenderSection("featured", required: false)
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>
        </div>
        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; @DateTime.Now.Year - Pauper To President, Inc.</p>
                </div>
            </div>
        </footer>

      @*@Scripts.Render("~/bundles/jquery")*@
        @RenderSection("scripts", required: false)
    </body>

【讨论】：