Question

要编辑记录，我打开一个模态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提交表单？我错过了一些明显的东西。谢谢！

Answer 1

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

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

和$（文件）.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>");
                    });
               }
        });

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

从Kendo UI窗口POST一个Ajax表单

2 个答案: