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>

<% } %>

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

带有ajax操作链接的视图已加载到我的部分控件。
用户点击“创建新工作单” 加载我的ajax动作链接部分控制正确。
来自的形式 JobNotesCreateNew.ascx得到使用“创建”提交提交按钮我希望客户端验证是否TextBoxFor 对于model.Note不为空。

但客户端验证不会发生，表单会发布到服务器。我可以在萤火虫中看到这一点。我还可以在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 - 您使用它就像这个新的AjaxOptions { OnBegin =“YourJavascriptFunction” }。具体来说，您的流程看起来就像这样。

Ajax.ActionLink（“创建新工作注释”，“CreateNew”，“JobNotes”，新的AjaxOptions {UpdateTargetId =“CreateNewJobNote”， OnBegin =“YourJavascriptFunction”， HttpMethod =“Post”}）

其次，我注意到您没有使用帖子操作。有原因吗？通常，您希望在发送表单时执行Post而不是Get。如果我是你，我会改变它。我在上面发布的代码段中更改了它。
第三，你应该确保你的 JavaScript函数没有调用尚不存在的控件。

这些当然是一些需要检查的基本内容。但是，如果您需要更多帮助，则应发布整个页面，以便我可以查看代码并查看您的JavaScript功能以及如何安排页面。

祝你好运！

// <强> * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * // 2010年11月16日更新 // <强> * ** * ** * ** * ** * < / EM> ** * ** * ** * ** * ** * < / EM> ** * ** * ** * ** * ** * < / EM> ** * *** //

嗨Maciek，

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

看看这篇文章，以便您可以学习如何做您想做的事情。

link text

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

Answer 2

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

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

2 个答案: