从 Kendo UI 窗口发布 Ajax 表单答案

【问题标题】：POST an Ajax form from a Kendo UI window从 Kendo UI 窗口发布 Ajax 表单
【发布时间】：2013-05-06 06:07:34
【问题描述】：

为了编辑记录，我打开了一个模态 Kendo UI 窗口，其中填充了包含启用 AJAX 的表单的部分视图：

@model MVC_ACME_Hardware.Models.BaseModel

<script type="text/javascript">
    $(function () {
        $("form").kendoValidator();
    });
</script>

@using (Ajax.BeginForm("EditProduct", new AjaxOptions { UpdateTargetId = "ProductDiv", OnSuccess = "SomeMethod" }))
{
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>EmployeeFTE</legend>

        @Html.HiddenFor(model => model.Products.Product_ID)

        <div class="editor-label">
            @Html.LabelFor(model => model.Products.Product_Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Products.Product_Name)
            @Html.ValidationMessageFor(model => model.Products.Product_Name)
        </div>

        <input type="submit" value="Save" class="myButton" />
    </fieldset>
}

当我运行表单并单击弹出窗口上的“保存”时，表单已成功发布，但未通过 AJAX 完成发布，并且未调用我的“SomeMethod”onsuccess 方法。我已经尝试添加...

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

...关于局部视图，但没有帮助。如何让我的表单使用 AJAX 提交？我错过了一些明显的东西。谢谢！

【问题讨论】：

标签： kendo-ui ajax.beginform

【解决方案1】：

尝试这样的事情（注意输入类型）：

<input type="button" value="Save" class="myButton" id="btnSave" />

在 $(document).ready() 中：

var validator = $(document.forms[0]).kendoValidator().data("kendoValidator");    
$("#btnSave").click(function(e) {     
              if (validator.validate()) {
                    var formContent = $(document.forms[0]).serialize();
                    var url = $(document.forms[0]).action;
                    $.post(url, formContent).done(function(data) {
                          $(document.body).append("<div class='savedRecordMessage'>success</div>");
                    });
               }
        });

【讨论】：

【解决方案2】：

如果您想使用 AJAX 表单的 MVC 和 Ajax 选项的不显眼验证，我认为您需要添加这些文件。

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

【讨论】：