I'm trying to place a form inside a Kendo Window, and not having any success. Basically, the problem is that the generated html contains an empty form tag, instead of having the fields placed within the form tag.
Here's my cshtml file. I place two identical forms on the page, one 'normal' and one inside a Kendo Window.
I’ve included the generated html below. Notice that the first form is surrounded by a form tag, as expected. But the form tag inside the window is empty.
Not surprisingly, given the generated html, the forms behave differently. When I click on Submit without entering anything, the normal form displays validation errors, while the one in the window does nothing. When I enter valid data and click on Submit, the normal form submits the ajax post, while the one in the window does nothing.
If I replace the Ajax.BeginForm statement inside the window with the raw form tag html, then both forms work as expected.
Any suggestions for how to put a form inside a Kendo UI window without resorting to the raw html would be appreciated.
Thanks,
Ken
Here's my cshtml file. I place two identical forms on the page, one 'normal' and one inside a Kendo Window.
@model SkyBooks.Web.Models.EmailInfo
@{
ViewBag.Title = "title";
}
<
div
style
=
"float:right"
>
<
span
id
=
"btnCreateRole"
class
=
"k-button"
>Create New User Role</
span
>
</
div
>
<
div
style
=
'clear: both'
></
div
>
<
h2
>Kendo UI Window with Ajax Form test</
h2
>
@* Plain Ajax Form Without Kendo Window *@
<
div
id
=
"personalDetail"
>This is where the feedback goes</
div
>
@using (Ajax.BeginForm("AjaxCreate", "KendoWindowAjax", new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "personalDetail", LoadingElementId = "divLoading" }))
{
@Html.ValidationSummary(true)
<
fieldset
>
<
legend
>Ajax.BeginForm Demo</
legend
>
<
div
class
=
"editor-label"
>
@Html.LabelFor(model => model.Name)
</
div
>
<
div
class
=
"editor-field"
>
@Html.EditorFor(model => model.Name)
@Html.ValidationMessageFor(model => model.Name)
</
div
>
<
div
class
=
"editor-label"
>
@Html.LabelFor(model => model.EmailAddress)
</
div
>
<
div
class
=
"editor-field"
>
@Html.TextBoxFor(model => model.EmailAddress)
@Html.ValidationMessageFor(model => model.EmailAddress)
</
div
>
<
input
type
=
"submit"
value
=
"Submit"
/>
<
div
id
=
"divLoading"
style
=
"display:none"
>
@* loader image created at: http://www.ajaxload.info/ *@
<
img
src
=
"@Url.Content("
~/Content/images/ajax-loader.gif")" />
</
div
>
</
fieldset
>
}
@* And this is an attempt at an ajax form inside a Kendo Window *@
@(Html.Kendo().Window()
.Name("window")
.Title("New User Role")
.Content(@<
text
>
@using (Ajax.BeginForm("AjaxCreate", "KendoWindowAjax", new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "personalDetail", LoadingElementId = "divLoading2" }))
{
@Html.ValidationSummary(true)
<
fieldset
>
<
legend
>Ajax.BeginForm Demo</
legend
>
<
div
class
=
"editor-label"
>
@Html.LabelFor(model => model.Name)
</
div
>
<
div
class
=
"editor-field"
>
@Html.EditorFor(model => model.Name)
@Html.ValidationMessageFor(model => model.Name)
</
div
>
<
div
class
=
"editor-label"
>
@Html.LabelFor(model => model.EmailAddress)
</
div
>
<
div
class
=
"editor-field"
>
@Html.TextBoxFor(model => model.EmailAddress)
@Html.ValidationMessageFor(model => model.EmailAddress)
</
div
>
<
input
type
=
"submit"
value
=
"Submit"
/>
<
div
id
=
"divLoading2"
style
=
"display:none"
>
@* loader image created at: http://www.ajaxload.info/ *@
<
img
src
=
"@Url.Content("
~/Content/images/ajax-loader.gif")" />
</
div
>
</
fieldset
>
}
</
text
>)
.Draggable()
.Events(ev => ev.Close("onClose"))
.Visible(true)
.Modal(true)
)
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
<
script
>
function onClose() {
$("#btnCreateRole").removeClass("k-state-disabled");
}
$(document).ready(function () {
$("#btnCreateRole").bind("click", function () {
if (!$("#btnCreateRole").hasClass("k-state-disabled")) {
$("#window").data("kendoWindow").center().open();
$("#btnCreateRole").addClass("k-state-disabled");
}
});
});
</
script
>
Not surprisingly, given the generated html, the forms behave differently. When I click on Submit without entering anything, the normal form displays validation errors, while the one in the window does nothing. When I enter valid data and click on Submit, the normal form submits the ajax post, while the one in the window does nothing.
If I replace the Ajax.BeginForm statement inside the window with the raw form tag html, then both forms work as expected.
Any suggestions for how to put a form inside a Kendo UI window without resorting to the raw html would be appreciated.
Thanks,
Ken
<
section
id
=
"main"
>
<
div
style
=
"float:right"
>
<
span
id
=
"btnCreateRole"
class
=
"k-button"
>Create New User Role</
span
>
</
div
>
<
div
style
=
'clear: both'
></
div
>
<
h2
>Kendo UI Window with Ajax Form test</
h2
>
<
div
id
=
"personalDetail"
>This is where the feedback goes</
div
>
<
form
action
=
"/KendoWindowAjax/AjaxCreate"
data-ajax
=
"true"
data-ajax-loading
=
"#divLoading"
data-ajax-method
=
"Post"
data-ajax-mode
=
"replace"
data-ajax-update
=
"#personalDetail"
id
=
"form0"
method
=
"post"
> <
fieldset
>
<
legend
>Ajax.BeginForm Demo</
legend
>
<
div
class
=
"editor-label"
>
<
label
for
=
"Name"
>Name</
label
>
</
div
>
<
div
class
=
"editor-field"
>
<
input
class
=
"text-box single-line"
data-val
=
"true"
data-val-required
=
"The Name field is required."
id
=
"Name"
name
=
"Name"
type
=
"text"
value
=
""
/>
<
span
class
=
"field-validation-valid"
data-valmsg-for
=
"Name"
data-valmsg-replace
=
"true"
></
span
>
</
div
>
<
div
class
=
"editor-label"
>
<
label
for
=
"EmailAddress"
>EmailAddress</
label
>
</
div
>
<
div
class
=
"editor-field"
>
<
input
data-val
=
"true"
data-val-length
=
"The EmailAddress must be from 6 to 20 characters long."
data-val-length-max
=
"20"
data-val-length-min
=
"6"
data-val-required
=
"The EmailAddress field is required."
id
=
"EmailAddress"
name
=
"EmailAddress"
type
=
"text"
value
=
""
/>
<
span
class
=
"field-validation-valid"
data-valmsg-for
=
"EmailAddress"
data-valmsg-replace
=
"true"
></
span
>
</
div
>
<
input
type
=
"submit"
value
=
"Submit"
/>
<
div
id
=
"divLoading"
style
=
"display:none"
>
<
img
src
=
"/Content/images/ajax-loader.gif"
/>
</
div
>
</
fieldset
>
</
form
>
<
form
action
=
"/KendoWindowAjax/AjaxCreate"
data-ajax
=
"true"
data-ajax-loading
=
"#divLoading2"
data-ajax-method
=
"Post"
data-ajax-mode
=
"replace"
data-ajax-update
=
"#personalDetail"
id
=
"form1"
method
=
"post"
></
form
><
div
id
=
"window"
>
<
fieldset
>
<
legend
>Ajax.BeginForm Demo</
legend
>
<
div
class
=
"editor-label"
>
<
label
for
=
"Name"
>Name</
label
>
</
div
>
<
div
class
=
"editor-field"
>
<
input
class
=
"text-box single-line"
data-val
=
"true"
data-val-required
=
"The Name field is required."
id
=
"Name"
name
=
"Name"
type
=
"text"
value
=
""
/>
<
span
class
=
"field-validation-valid"
data-valmsg-for
=
"Name"
data-valmsg-replace
=
"true"
></
span
>
</
div
>
<
div
class
=
"editor-label"
>
<
label
for
=
"EmailAddress"
>EmailAddress</
label
>
</
div
>
<
div
class
=
"editor-field"
>
<
input
data-val
=
"true"
data-val-length
=
"The EmailAddress must be from 6 to 20 characters long."
data-val-length-max
=
"20"
data-val-length-min
=
"6"
data-val-required
=
"The EmailAddress field is required."
id
=
"EmailAddress"
name
=
"EmailAddress"
type
=
"text"
value
=
""
/>
<
span
class
=
"field-validation-valid"
data-valmsg-for
=
"EmailAddress"
data-valmsg-replace
=
"true"
></
span
>
</
div
>
<
input
type
=
"submit"
value
=
"Submit"
/>
<
div
id
=
"divLoading2"
style
=
"display:none"
>
<
img
src
=
"/Content/images/ajax-loader.gif"
/>
</
div
>
</
fieldset
>
</
div
><
script
>
jQuery(function(){jQuery("#window").kendoWindow({"close":onClose,"modal":true,"iframe":false,"draggable":true,"title":"New User Role","resizable":false,"content":null,"actions":["Close"]});});
</
script
>
<
script
>
function onClose() {
$("#btnCreateRole").removeClass("k-state-disabled");
}
$(document).ready(function () {
$("#btnCreateRole").bind("click", function () {
if (!$("#btnCreateRole").hasClass("k-state-disabled")) {
$("#window").data("kendoWindow").center().open();
$("#btnCreateRole").addClass("k-state-disabled");
}
});
});
</
script
>
</
section
>