Ajax.BeginForm in Window not working

[Jeff]

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.

@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>

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

<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>

[Petur Subev]

Hello William,

I assume that the problem is because of the way you render the window to the output. 

Could you please try and change your code to use the following syntax:

//from

  

@(Html.Kendo().Window()

    //...

)

 

// to

 

@{

    Html.Kendo().Window()
      //...

    .Render();

}

Let me if it does not make any difference.

Kind regards,
Petur Subev
the Telerik team

[Jeff]

Thanks, Petur. That works perfectly!

[Yacov]

@(Html.Kendo().Window().Name("Import")
    .Title("Import")
    .Visible(false)
    .Modal(true)
    .Content(
        @<text>
            @using (Html.BeginForm("Import", null, null, FormMethod.Post, new { name = "mainForm" }))
            {
                @Html.TextArea("str")
                @Html.ButtonLinkEx("Import", "Import", null, new { href = "javascript:document.mainForm.submit();" })
            }
        </text>
    )
)

This was also my problem, Thanks for the solution.

Way putting the code in a block instead of inline solve the problem?