or
function
anonymous(data
/**/
) {
var
o, e = kendo.htmlEncode;
with
(data) {
o =
'<tr data-uid="'
+ (data.uid)
...
...
@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
>
<
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
>