如何插入客户端验证 ajax onSuccess 函数 MVC 4

Question

我在ajax之后的不显眼的验证方面遇到了问题。ActionLink，表单正确提交，当 ajax 替换div 目标时，不会创建客户端验证。

我的观点是：

@using (Ajax.BeginForm("Action", "Controller", new { area = "Area" }, new AjaxOptions { HttpMethod = "post", InsertionMode = InsertionMode.Replace, UpdateTargetId = "divTarget" }))
    {
        //html stuff....
            <li>
                <label><br/></label>
                <div class="perfil_datos_botones">
                    <input type="submit" value="Crear cita" id="enviar">
                    @Ajax.ActionLink("Volver", "Action", "Controller", new { area = "Area" }, new AjaxOptions { HttpMethod = "get", InsertionMode = InsertionMode.Replace, UpdateTargetId = "divTarget", OnComplete = "ValidarForm('target')" }, new { @class = "links_botones" })
                </div>
            </li>
        </ul>
    }

OnComplete 函数：

function ValidarForm(sel) {
        var selector = "#" + new String(sel);
        $.validator.unobtrusive.parse(selector);
    }

我把这个放在观点上：

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

在布局中：

@Scripts.Render("~/bundles/jqueryval_noajax")

此捆绑包在没有 ajax.unobtrusive 的情况下呈现 jquery-validation 插件.js因为这会在视图上生成多个帖子

我尝试在 OnSuccess 中使用函数并且无论哪种工作，验证器都会抛出一个异常，上面写着："不显眼的字段未定义"。

我需要在每个使用 ajax 的 partialView 上重新加载客户端验证。BeginForm 或 ajax。动作链接。

编辑 1：

我发现$.validator是undefined，我通过 jquery 获取的 ajax 更改了 ajax.actionLink，但我仍然收到错误

Answer 1

我在使用内置的Ajax.BeginForm时遇到了问题，而是直接使用JQuery。最后发现它要容易得多，原因之一是有大量关于 JQuery 的文档可用，而 MS 包装器上没有那么多。

所以fom只是一个非常经典的HTML表单，有一个简单的按钮：（我删除了所有的输入字段）

<form id="AllCatsForm>
  <table>
    <input type="submit" value="Search" />
  </table>
</form>

then（首先在脚本标记之间，然后在单独的.js文件中）

$("#AllCatsForm").ajaxForm({
    url: "/home/GetAllItems",
    type: "POST",
    beforeSubmit: validateCatSelected,
    success: function (data) {
        $("#ListOfBooksHere").html(data);
    }
});

检查必填输入字段的函数不为空：

function validateCatSelected(formData, jqForm, options) {
    var selectedBooksCategory = $("input[name=CategoryNodeId]").fieldValue();
    if (selectedBooksCategory[0] === "0") {
        alert("Please select a Genre or Category before doing a Custom Search.");
        return false;
    }
    itemLoad = 1;
}

"ListofBookshere"只是一个空的DIV标签，用作搜索结果的容器：

<div id="ListOfBooksHere" style="padding: 5px; min-height: 500px;" />

这是（几乎删除了所有字段）控制器中的功能）请注意，它确实返回了部分视图，但此视图不在主视图中。它的唯一用途是将返回的数据正确格式化为体面的 html。

[HttpPost]
        public async Task<ActionResult> GetAllItems(GenericSearchViewModel filter)
        {
            vm = filter;            
            search.Condition = (string.IsNullOrEmpty(vm.Condition) != true) ? vm.Condition : "All";         
            vm.CatsResults.CatsListResults = await GetCatsResults(search);                   
            return PartialView("GetAllItems", vm);        
        }

希望这有帮助。直接从 MVC 使用 JQuery 并不难，并且可以为您提供更大的控制。我当然不是说内置助手不起作用或有用，我尝试了 JQuery 直接路由，因为我开始感到沮丧，它对我来说效果很好。

希望这有帮助，伯纳德

PS-我要忘记了！这段代码使用的是 JQuery 插件 JQuery 表单：http://malsup.com/jquery/form/