我有一个剃刀页面,我用这种方式创建了剑道组合控件:
@(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"));
答案 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>© @DateTime.Now.Year - Pauper To President, Inc.</p>
</div>
</div>
</footer>
@*@Scripts.Render("~/bundles/jquery")*@
@RenderSection("scripts", required: false)
</body>