Kendoui comboBox

时间:2013-09-17 09:15:03

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

我有一个剃刀页面,我用这种方式创建了剑道组合控件:

@(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'”当我在剑道网站上查看这个时就是这么说:

http://docs.kendoui.com/getting-started/troubleshooting Kendo小部件不可用或未定义的JavaScript错误 如果在页面中多次包含jQuery,则所有现有的jQuery插件(包括Kendo UI)都将被删除。如果未包含所需的Kendo JavaScript文件,也会发生。 将抛出以下JavaScript错误(取决于浏览器): TypeError:对象#没有方法'kendoGrid'(在Google Chrome中) 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"));

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

问题是布局页面有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>