使用 Ajax.ActionLink 加载部分控件时，客户端验证失败

Question

我有一个带有Ajax.BeginForm 的部分控件，其中包含带有一个文本框和验证消息的简单表单。模型正在使用数据注释将此字段设置为必填。

当上述部分控件直接使用Html.RenderPartial 加载到视图中时，客户端验证工作正常。

当使用Ajax.ActionLink 加载上述部分控件时，客户端验证停止工作（表单提交时使用空文本框并且服务器端验证工作正常）：

Ajax.ActionLink("Create New Job Note", "CreateNew", "JobNotes", 
                new AjaxOptions { UpdateTargetId = "CreateNewJobNote",
                                  HttpMethod="GET" })

我的母版页上有以下 javascript 的引用：

<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>

当我使用Ajax.ActionLink 加载部分控件时，为什么客户端验证不起作用？

========== 编辑 ===============

根据要求，这里是相关的代码引用：

1) 我正在使用此代码加载包含文本框的部分控件：

<%:Ajax.ActionLink("Create New Job Note", "CreateNew", "JobNotes", new AjaxOptions { UpdateTargetId = "CreateNewJobNote", HttpMethod="GET" })%>

控制器方法：

public ActionResult CreateNew()
        {
            return PartialView("JobNotesCreateNew", new NewJobNoteModel());           
        }

2) JobNotesCreateNew.ascx：

<% Html.EnableClientValidation();%>
<% using (Ajax.BeginForm("CreateNew", "JobNotes", FormMethod.Post, new AjaxOptions { UpdateTargetId = "JobNotes" }, new { id = "CreateNewJobNoteForm" }))
   { %>
    <%: Html.ValidationSummary(true, "Please correct errors on the form.")%>

    <fieldset>
        <legend>Fields</legend>

        <div class="editor-label">
            <%: Html.LabelFor(model => model.Note)%>
        </div>
        <div class="editor-field">
            <%: Html.TextBoxFor(model => model.Note)%>
            <%: Html.ValidationMessageFor(model => model.Note)%>
        </div>

        <p>
            <input type="submit" value="Create" />
            <%: Ajax.ActionLink("Cancel", "Cancel", "JobNotes", new AjaxOptions { UpdateTargetId = "CreateNewJobNote", HttpMethod = "GET" })%>
        </p>

    </fieldset>

<% } %>

就是这样。 所以，总结一下：

1. 加载了带有指向我的部分控件的 ajax 操作链接的视图。
2. 用户点击“创建新的工作记录” 加载我的 ajax 操作链接 部分控制正确。
3. 当表格来自 JobNotesCreateNew.ascx 获取 使用“创建”提交 按钮我希望客户端 验证以检查 TextBoxFor 为模型。注不为空。

但是客户端验证并没有发生，表单被发布到服务器。 我可以在萤火虫中看到这一点。 我还可以在 VS 2010 的服务器端调试以下控制器方法：

[HttpPost]
public ActionResult CreateNew(NewJobNoteModel newJobNote)

所以我的问题是：为什么客户端验证被破坏了？

谢谢。

========== 编辑：17/11/2010 ==============

有趣。 我在模型上使用数据注释验证：

public class NewJobNoteModel
    {
        [Required]
        public string Note { get; set; }
    }

由于上述验证在使用 Html.BeginForm() 时在客户端工作正常，我假设它也应该在 Ajax.BeginForm() 场景中工作。 我在这里弄错了吗？我真的应该在客户端自己触发验证吗？ 我将研究这篇文章，快速浏览了一下，那里的 CompleteFunction 看起来很手动，我希望那里的事情更加自动化。

谢谢！

========== 编辑：25/11/2010 ==============

好的，我在这里找到了解决问题的方法： http://adammcraventech.wordpress.com/2010/06/11/asp-net-mvc2-ajax-executing-dynamically-loaded-javascript/

AjaxLoadedContentScriptFix.js javascript 对我来说似乎工作正常。

这就是我一直在寻找的答案。 所有其他技巧，例如在 Ajax.BeginForm 的 AjaxOptions 中使用自定义客户端验证 - 来吧人们:)

Answer 1

@Maciek 我需要查看更多代码才能做出正确诊断。 但是，有一些事情浮现在脑海中。

• 首先，您可以使用其中一个 AjaxOptions 在你的函数中调用 Javascript OnSuccess 或 OnBegin - 你可以像这样使用它 new AjaxOptions { OnBegin = "YourJavascriptFunction" }。具体来说，您的流程应该是这样的。

Ajax.ActionLink("创建新的工作笔记", "CreateNew", "JobNotes", 新的 AjaxOptions { UpdateTargetId = "CreateNewJobNote", OnBegin = "YourJavascriptFunction", HttpMethod="Post" })

• 其次，我注意到您没有使用发布操作。有什么原因吗？ 通常，当您发回表单时，您希望执行 Post 而不是 Get。 如果我是你，我会改变这一点。我在上面发布的代码段中更改了它。

• 第三，您应该确保您的 JavaScript 函数没有调用 尚不存在的控件。

当然，这些是需要检查的一些基本事项。但是，如果您需要更多帮助，您应该发布整个页面，以便我可以查看代码并查看您的 JavaScript 函数以及您的页面排列方式。

祝你好运！

//**********************************// 2010 年 11 月 16 日更新 //*************************************************//

嗨，马切克，

我查看了您在问题中发布的新代码，并注意到了一些事情。 首先，我没有看到您用于检查文本框的代码。如果您希望系统在您的 Ajax 回发之前检查您的文本框，您需要输入代码让系统执行此操作。您需要使用我在第一个答案中指定的 AjaxOption 参数调用的 JavaScript 函数。该验证不会自动发生。

看看这篇文章，你可以了解如何做你想做的事。

link text

一旦您输入正确的代码来执行验证，您就可以在客户端检查您的数据。作为旁注，我想补充一点，您应该确保您的流程也在服务器上验证。用户可以关闭 JavaScript，如果您的代码没有在服务器上执行适当的检查，您最终会遇到问题。

Answer 2

如原帖中所述，解决方案如下： http://adammcraventech.wordpress.com/2010/06/11/asp-net-mvc2-ajax-executing-dynamically-loaded-javascript/