Kendo 编辑不在 jQuery 步中工作？
Kendo Editors not working in jQuery Steps?
我在表单中使用 jQuery steps。
我有一些模型属性，我想使用 Kendo Editors.
进行编辑
我使用以下（部分）代码，其余是 jQuery 向导的标记：
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.Start, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Start, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Start, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.End, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.End, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.End, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@(Html.Kendo().DropDownListFor(x => x.RecurrenceRule)
.Name("recurrenceRule")
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new List<SelectListItem>
{
new SelectListItem
{
Text = @"Nie",
Value = "Never"
},
new SelectListItem
{
Text = @"Täglich",
Value ="Daily"
},
new SelectListItem
{
Text = @"Monatlich",
Value ="monthly"
}
}))
</div>
</div>
}
由于某些原因，日期属性的编辑器没有正确显示，而 @(Html.Kendo().DropDownListFor( 工作正常。
在另一个步骤中（此处未记录）@(Html.Kendo().MultiselectFor( 也无法正常工作。
什么可能导致此问题？
更新：
将此代码放在 jQuery steps 的标记之外效果很好。这是我的向导代码：
@using (Ajax.BeginForm("Wizard_Submit", "Wizard", new
{
Area = ""
}, new AjaxOptions
{
HttpMethod = "Post",
InsertionMode = InsertionMode.Replace
}, new
{
id = "wizardSumbit"
}))
{
////0
<div id="wizard">
<h3></h3>
<section>
<p></p>
@(Html.Kendo().DropDownListFor(x => x.SlRateBaseTypes)
.Name("slRateBaseTypes")
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new List<SelectListItem>
{
new SelectListItem
{
Text = @"abc",
Value = ((int) SlRateBaseTypes.Course).ToString()
},
new SelectListItem
{
Text = @"cde",
Value = ((int) SlRateBaseTypes.Leisure).ToString()
}
}))
</section>
@*//1*@
<h3>Vorlage</h3>
<section>
<p>Wähle eine Vorlage aus</p>
@(Html.Kendo().DropDownListFor(x => x.OfferingTemplateId)
.Name("offeringTemplate")
.DataTextField("Text")
.DataValueField("Value")
.Events(x => x.Change("onOfferingTemplateChange"))
.DataSource(
source => source
.Read(read => read.Url(Url.Action("Wizard_GetOfferingTemplates", "Wizard")).Data("getSlRateBaseTypesSelection").Type(HttpVerbs.Post))
.ServerFiltering(true)
)
.AutoBind(false))
<div id="offeringTemplateDescription"></div>
</section>
@*//2*@
<h3></h3>
<section>
<p></p>
<label for="optional"></label>
@(Html.Kendo().MultiSelectFor(x => x.SlRateBaseTypes)
.Name("selectOfferingRateTypes")
.Placeholder("")
.AutoClose(false)
.DataTextField("Text")
.DataValueField("Value")
.DataSource(
source => source
.Read(read => read.Url(Url.Action("Wizard_GetPossibleOfferingRates", "Wizard")).Data("getSlRateBaseTypesSelection").Type(HttpVerbs.Post))
.ServerFiltering(true)
)
)
..
}
开发者选项显示如下：
"Cannot read property 'inspectKendoWidget' of undefined"
“类型错误：无法读取未定义的 属性 'inspectKendoWidget'
在：1:15
更新二：
这是记录的日期选择器的 html code：
<span class="k-widget k-datetimepicker k-header k-input" style="width: 100%;">
<span class="k-picker-wrap k-state-default"><input data-val="true" data-val-date="The field Start must be a date." data-val-required="The Start field is required." id="Start" name="Start" type="text" value="01.01.0001 00:00" data-role="datetimepicker" class="k-input" role="combobox" aria-expanded="false" aria-disabled="false" style="width: 100%;" vk_15f93="subscribed">
<span unselectable="on" class="k-select">
<span class="k-link k-link-date" aria-label="Open the date view">
<span unselectable="on" class="k-icon k-i-calendar" aria-controls="Start_dateview"><
/span>
</span>
<span class="k-link k-link-time" aria-label="Open the time view">
<span unselectable="on" class="k-icon k-i-clock" aria-controls="Start_timeview">
</span>
</span>
</span>
</span>
</span>
以防万一有人关心：
您必须删除 jQuery steps css 文件中的一些 css styles
-> 更改为：
.tabcontrol ul > li
{
display: block;
/*padding: 0;*/
}
更新：
同样重要的是：实际上，根据我在互联网上找到的另一个 post 修改 jquery.steps.js 文件解决了基本问题：
--> 评论此部分
//function render(wizard, options, state)
//{
// // Create a content wrapper and copy HTML from the intial wizard structure
// var wrapperTemplate = "<{0} class=\"{1}\">{2}</{0}>",
// orientation = getValidEnumValue(stepsOrientation, options.stepsOrientation),
// verticalCssClass = (orientation === stepsOrientation.vertical) ? " vertical" : "",
// contentWrapper = $(wrapperTemplate.format(options.contentContainerTag, "content " + options.clearFixCssClass, wizard.html())),
// stepsWrapper = $(wrapperTemplate.format(options.stepsContainerTag, "steps " + options.clearFixCssClass, "<ul role=\"tablist\"></ul>")),
// stepTitles = contentWrapper.children(options.headerTag),
// stepContents = contentWrapper.children(options.bodyTag);
// // Transform the wizard wrapper and remove the inner HTML
// wizard.attr("role", "application").empty().append(stepsWrapper).append(contentWrapper)
// .addClass(options.cssClass + " " + options.clearFixCssClass + verticalCssClass);
// // Add WIA-ARIA support
// stepContents.each(function (index)
// {
// renderBody(wizard, state, $(this), index);
// });
// stepTitles.each(function (index)
// {
// renderTitle(wizard, options, state, $(this), index);
// });
// refreshStepNavigation(wizard, options, state);
// renderPagination(wizard, options, state);
// }
-->替换为这个
function render(wizard, options, state) {
// Create a content wrapper and copy HTML from the intial wizard structure
var contentWrapperTemplate = "<{0} class=\"{1}\"></{0}>",
stepsWrapperTemplate = "<{0} class=\"{1}\">{2}</{0}>",
orientation = getValidEnumValue(stepsOrientation, options.stepsOrientation),
verticalCssClass = (orientation === stepsOrientation.vertical) ? " vertical" : "",
contentWrapper = $(contentWrapperTemplate.format(options.contentContainerTag, "content " + options.clearFixCssClass)),
stepsWrapper = $(stepsWrapperTemplate.format(options.stepsContainerTag, "steps " + options.clearFixCssClass, "<ul role=\"tablist\"></ul>"));
// Transform the wizard wrapper by wrapping the innerHTML in the content wrapper, then prepending the stepsWrapper
wizard.attr("role", "application").wrapInner(contentWrapper).prepend(stepsWrapper)
.addClass(options.cssClass + " " + options.clearFixCssClass + verticalCssClass);
//Now that wizard is tansformed, select the the title and contents elements
var populatedContent = wizard.find('.content'),
stepTitles = populatedContent.children(options.headerTag),
stepContents = populatedContent.children(options.bodyTag);
我在表单中使用 jQuery steps。
我有一些模型属性，我想使用 Kendo Editors.
我使用以下（部分）代码，其余是 jQuery 向导的标记：
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.Start, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Start, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Start, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.End, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.End, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.End, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@(Html.Kendo().DropDownListFor(x => x.RecurrenceRule)
.Name("recurrenceRule")
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new List<SelectListItem>
{
new SelectListItem
{
Text = @"Nie",
Value = "Never"
},
new SelectListItem
{
Text = @"Täglich",
Value ="Daily"
},
new SelectListItem
{
Text = @"Monatlich",
Value ="monthly"
}
}))
</div>
</div>
}
由于某些原因，日期属性的编辑器没有正确显示，而 @(Html.Kendo().DropDownListFor( 工作正常。
在另一个步骤中（此处未记录）@(Html.Kendo().MultiselectFor( 也无法正常工作。
什么可能导致此问题？
更新：
将此代码放在 jQuery steps 的标记之外效果很好。这是我的向导代码：
@using (Ajax.BeginForm("Wizard_Submit", "Wizard", new
{
Area = ""
}, new AjaxOptions
{
HttpMethod = "Post",
InsertionMode = InsertionMode.Replace
}, new
{
id = "wizardSumbit"
}))
{
////0
<div id="wizard">
<h3></h3>
<section>
<p></p>
@(Html.Kendo().DropDownListFor(x => x.SlRateBaseTypes)
.Name("slRateBaseTypes")
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new List<SelectListItem>
{
new SelectListItem
{
Text = @"abc",
Value = ((int) SlRateBaseTypes.Course).ToString()
},
new SelectListItem
{
Text = @"cde",
Value = ((int) SlRateBaseTypes.Leisure).ToString()
}
}))
</section>
@*//1*@
<h3>Vorlage</h3>
<section>
<p>Wähle eine Vorlage aus</p>
@(Html.Kendo().DropDownListFor(x => x.OfferingTemplateId)
.Name("offeringTemplate")
.DataTextField("Text")
.DataValueField("Value")
.Events(x => x.Change("onOfferingTemplateChange"))
.DataSource(
source => source
.Read(read => read.Url(Url.Action("Wizard_GetOfferingTemplates", "Wizard")).Data("getSlRateBaseTypesSelection").Type(HttpVerbs.Post))
.ServerFiltering(true)
)
.AutoBind(false))
<div id="offeringTemplateDescription"></div>
</section>
@*//2*@
<h3></h3>
<section>
<p></p>
<label for="optional"></label>
@(Html.Kendo().MultiSelectFor(x => x.SlRateBaseTypes)
.Name("selectOfferingRateTypes")
.Placeholder("")
.AutoClose(false)
.DataTextField("Text")
.DataValueField("Value")
.DataSource(
source => source
.Read(read => read.Url(Url.Action("Wizard_GetPossibleOfferingRates", "Wizard")).Data("getSlRateBaseTypesSelection").Type(HttpVerbs.Post))
.ServerFiltering(true)
)
)
..
}
开发者选项显示如下：
"Cannot read property 'inspectKendoWidget' of undefined" “类型错误：无法读取未定义的 属性 'inspectKendoWidget' 在：1:15
更新二：
这是记录的日期选择器的 html code：
<span class="k-widget k-datetimepicker k-header k-input" style="width: 100%;">
<span class="k-picker-wrap k-state-default"><input data-val="true" data-val-date="The field Start must be a date." data-val-required="The Start field is required." id="Start" name="Start" type="text" value="01.01.0001 00:00" data-role="datetimepicker" class="k-input" role="combobox" aria-expanded="false" aria-disabled="false" style="width: 100%;" vk_15f93="subscribed">
<span unselectable="on" class="k-select">
<span class="k-link k-link-date" aria-label="Open the date view">
<span unselectable="on" class="k-icon k-i-calendar" aria-controls="Start_dateview"><
/span>
</span>
<span class="k-link k-link-time" aria-label="Open the time view">
<span unselectable="on" class="k-icon k-i-clock" aria-controls="Start_timeview">
</span>
</span>
</span>
</span>
</span>
以防万一有人关心：
您必须删除 jQuery steps css 文件中的一些 css styles
-> 更改为：
.tabcontrol ul > li
{
display: block;
/*padding: 0;*/
}
更新： 同样重要的是：实际上，根据我在互联网上找到的另一个 post 修改 jquery.steps.js 文件解决了基本问题：
--> 评论此部分
//function render(wizard, options, state)
//{
// // Create a content wrapper and copy HTML from the intial wizard structure
// var wrapperTemplate = "<{0} class=\"{1}\">{2}</{0}>",
// orientation = getValidEnumValue(stepsOrientation, options.stepsOrientation),
// verticalCssClass = (orientation === stepsOrientation.vertical) ? " vertical" : "",
// contentWrapper = $(wrapperTemplate.format(options.contentContainerTag, "content " + options.clearFixCssClass, wizard.html())),
// stepsWrapper = $(wrapperTemplate.format(options.stepsContainerTag, "steps " + options.clearFixCssClass, "<ul role=\"tablist\"></ul>")),
// stepTitles = contentWrapper.children(options.headerTag),
// stepContents = contentWrapper.children(options.bodyTag);
// // Transform the wizard wrapper and remove the inner HTML
// wizard.attr("role", "application").empty().append(stepsWrapper).append(contentWrapper)
// .addClass(options.cssClass + " " + options.clearFixCssClass + verticalCssClass);
// // Add WIA-ARIA support
// stepContents.each(function (index)
// {
// renderBody(wizard, state, $(this), index);
// });
// stepTitles.each(function (index)
// {
// renderTitle(wizard, options, state, $(this), index);
// });
// refreshStepNavigation(wizard, options, state);
// renderPagination(wizard, options, state);
// }
-->替换为这个
function render(wizard, options, state) {
// Create a content wrapper and copy HTML from the intial wizard structure
var contentWrapperTemplate = "<{0} class=\"{1}\"></{0}>",
stepsWrapperTemplate = "<{0} class=\"{1}\">{2}</{0}>",
orientation = getValidEnumValue(stepsOrientation, options.stepsOrientation),
verticalCssClass = (orientation === stepsOrientation.vertical) ? " vertical" : "",
contentWrapper = $(contentWrapperTemplate.format(options.contentContainerTag, "content " + options.clearFixCssClass)),
stepsWrapper = $(stepsWrapperTemplate.format(options.stepsContainerTag, "steps " + options.clearFixCssClass, "<ul role=\"tablist\"></ul>"));
// Transform the wizard wrapper by wrapping the innerHTML in the content wrapper, then prepending the stepsWrapper
wizard.attr("role", "application").wrapInner(contentWrapper).prepend(stepsWrapper)
.addClass(options.cssClass + " " + options.clearFixCssClass + verticalCssClass);
//Now that wizard is tansformed, select the the title and contents elements
var populatedContent = wizard.find('.content'),
stepTitles = populatedContent.children(options.headerTag),
stepContents = populatedContent.children(options.bodyTag);