BeginFormSitefinity form disappears after submitting

Question

When I use the BeginFormSitefinity helper the form disappears after submitting, and then the postback is done.

The expected behavior would be only the postback to be done. I went to the browser and investigated and I found out that when you use BeginFormSitefinity an extra script is added to your html.

That script basically creates a new form with display = none. And appends your form to the "invisible" form, and thus your form disappears after submitting.

I'm using Sitefinity 8.1, and I would like to know if is there any way to avoid this?

This is the script added (I have no control over it):

<script type="text/javascript">
            (function () {
                var container = document.getElementById("myForm2");
                if (container === null)
                    return;

                var inputs = container.querySelectorAll("input");
                var allInputs = document.forms["aspnetForm"].querySelectorAll('input');
                for (var i = 0; i < allInputs.length; i++) {
                    allInputs[i].addEventListener("invalid", function(event) {
                        if (Array.indexOf(inputs, document.activeElement) >= 0 && Array.indexOf(inputs, event.target) < 0)
                            event.preventDefault();
                    }, true);
                }

                var submitClick = function () {
                    var isValid = true;
                    for (var i = 0; i < inputs.length; i++) {
                        if (typeof inputs[i].willValidate !== "undefined" && inputs[i].willValidate)
                            isValid = inputs[i].validity.valid && isValid;

                        if (typeof jQuery !== "undefined" && typeof jQuery.validator !== "undefined")
                            isValid = jQuery(inputs[i]).valid() && isValid;
                    }

                    if (isValid) {
                        var form = document.createElement("form");

                        form.style.display = "none";
                        form.setAttribute("action", "/order-calendar/Search");
                        form.setAttribute("method", "POST");
                        form.setAttribute("enctype", document.forms["aspnetForm"].getAttribute("enctype"));
                        form.setAttribute("encoding", document.forms["aspnetForm"].getAttribute("encoding"));                            

                        form.appendChild(container);

                        document.body.appendChild(form);

                        // We prevent kendo upload widget from submitting empty inputs.
                        var kInputs = container.querySelectorAll(".k-upload input[type='file']");
                        for(var i = 0; i < kInputs.length; i++) {
                            var kInput = kInputs[i];
                            if (!kInput.value) {
                                // Prevent submitting an empty input
                                kInput.setAttribute("disabled", "disabled");

                                window.setTimeout(function() {
                                    kInput.removeAttribute("disabled");
                                }, 0);
                            }
                        }

                        form.submit();

                        return false;
                    }
                };

                var handleFormSubmitElements = function (elementName) {
                    var allSubmitElements = container.getElementsByTagName(elementName);
                    var elementCount = allSubmitElements.length;
                    while(elementCount) {
                        typeAttr = allSubmitElements[elementCount - 1].getAttribute("type");
                        if(typeAttr == "submit") {
                            allSubmitElements[elementCount - 1].onclick = submitClick;
                        }
                        elementCount--;
                    }
                };

                handleFormSubmitElements("input");
                handleFormSubmitElements("button");
            })();
        </script>

This is my form (its values are read automatically, that's why onkeydown returns false):

@using (Html.BeginFormSitefinity("Search", "myForm2"))
    {
     <div id="main_content" style="max-width: 600px; max-height:700px;float:left;overflow: hidden;">

     <table>
                <tr><td colspan="2" style="text-align:center;">@Html.Label("City")</td></tr>

                <tr>
                    <td>@Html.Label("Code") </td>
                    <td>

                        @Html.Kendo().TextBoxFor(x => x.Code).HtmlAttributes(new { onkeydown = "return false", style = "color: green; width:100%;", id = "Code" })
                    </td>
                </tr>
                <tr>
                    <td>@Html.Label("City Code") </td>
                    <td>

                        @Html.Kendo().TextBoxFor(x => x.CityCode).HtmlAttributes(new { onkeydown = "return false", style = "color: green; width:100%;", id = "CityCode" })
                    </td>
                </tr>

      </table>

    <input type="submit" class="btn btn-success" value="submit">
}

This is what happens visually:

Answer 1

if you are using Hybrid MVC (that is the webforms version of MVC widgets) then i believe there is no way to avoid this.

Previous to v8.1 the javascript you posted above was different, and would modify the actual form tag of the webforms page to post to your custom action...

now it appears they submit to a FORM tag built on the fly for MVC widgets...

One thing I've noticed they still have is the id of the FORM tag hard-coded to be "aspnetForm", so if your Master Page doesn't use that explicit, specific ID then that might be a probably cause...

if you set a breakpoint in the action to which your form posts, do you get a hit?

Answer 2

Our team also had the same issue. Was created support ticket to Telerik. And there is an answer:

Essentially, this is expected behavior when using the BeginFormSitefinity. The reasons this happens is because in ASP.NET web forms only one form with runat="sever" is allowed on a page. This is why the BeginFormSitefinity renders as a div by default and a form is dynamically created and submitted when the submit button is clicked. In order to overcome this behavior you will need to create a custom helper and HybridForm. You can take a look at the following StackOverflow answer for more information on how to create a custom HybridForm.