Ajax.BeginForm in Window not working

4 posts, 1 answers
  1. Jeff
    Jeff avatar
    3 posts
    Member since:
    Mar 2008

    Posted 11 Feb 2013 Link to this post

    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>
  2. Answer
    Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 13 Feb 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Jeff
    Jeff avatar
    3 posts
    Member since:
    Mar 2008

    Posted 13 Feb 2013 Link to this post

    Thanks, Petur. That works perfectly!
  5. Yacov
    Yacov avatar
    2 posts
    Member since:
    Oct 2013

    Posted 10 Oct 2013 Link to this post

    @(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?
Back to Top
Kendo UI is VS 2017 Ready