Question

当我使用BeginFormSitefinity帮助器时，表单在提交后消失，然后回发完成。

预期的行为只是要回发的行为。我去浏览器调查，发现当你使用BeginFormSitefinity时，你的html中会添加一个额外的脚本。

该脚本基本上创建了一个display = none的新表单。并将您的表单附加到＆＃34;隐形＆＃34;表格，因此你的表格在提交后就会消失。

我使用的是Sitefinity 8.1，我想知道是否有办法避免这种情况？

这是添加的脚本（我无法控制）：

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

这是我的表单（其值自动读取，这就是为什么onkeydown返回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">
}

这是视觉上发生的事情：

Answer 1

如果您使用的是Hybrid MVC（即MVC小部件的webforms版本），那么我相信没有办法避免这种情况。

在v8.1之前，您在上面发布的javascript是不同的，并会修改webforms页面的实际表单标记以发布到您的自定义操作...

现在它们似乎提交给为MVC小部件构建的FORM标签......

我注意到他们仍然有一件事是FORM标签的id被硬编码为“aspnetForm”，所以如果你的母版页没有使用那个明确的特定ID，那么这可能是一个可能的原因。 ..

如果你在表单发布的动作中设置了一个断点，你会受到打击吗？

Answer 2

我们的团队也有同样的问题。创建了Telerik的支持票。答案是：

基本上，这是使用BeginFormSitefinity时的预期行为。发生这种情况的原因是因为在ASP.NET Web表单中只有一个表单，其中包含runat =＆＃34; sever＆＃34;允许在页面上。这就是为什么BeginFormSitefinity默认呈现为div，并且在单击提交按钮时动态创建并提交表单。为了克服这种行为，您需要创建一个自定义帮助程序和HybridForm。您可以查看以下version with other animation area，了解有关如何创建自定义HybridForm的更多信息。

提交后，BeginFormSitefinity表单消失

2 个答案: