Question

I’ve got a partial control with Ajax.BeginForm containing simple form with one textbox and validation message. Model is using data annotations to set this field to required.

When above partial control gets loaded in the view directly using Html.RenderPartial then client side validation works fine.

When above partial control gets loaded using Ajax.ActionLink then client validation stops working ( form gets submitted with empty textbox and server side validation works fine ):

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

I’ve got references to following javascript on my masterpage :

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

Why does client side validation not work when I load the partial control using Ajax.ActionLink?

========== EDIT ==============

As requested, here are relevant code quotes :

1)
I’m loading my partial control containing textbox with this code :

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

Controller method :

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>

<% } %>

That’s it.
So, to sum up:

1. a view with ajax action link to my partial control gets loaded.
2. User clicks on “Create New Job Note”
   ajax action link which loads my
   partial control correctly.
3. When form from
   JobNotesCreateNew.ascx gets
   submitted using “Create” submit
   button I expect client side
   validation to check if TextBoxFor
   for model.Note is not empty.

But client side validation doesn’t happen and form is posted to the server.
I can see this in firebug.
I can also debug following controller method on server side in VS 2010 :

[HttpPost]
public ActionResult CreateNew(NewJobNoteModel newJobNote)

So my question is : why client side validation is broken?

Thanks.

========== EDIT : 17/11/2010 ==============

Interesting.
I’m using data annotations validation on the model :

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

Since above validation works fine on client side when using Html.BeginForm() I was assuming it should work in Ajax.BeginForm() scenario as well.
Am I mistaken here? Should I really trigger the validation myself on client side?
I will investigate the article, had a quick look and CompleteFunction looks quite manual over there, I was hoping things to be more automated there.

Thanks!

========== EDIT : 25/11/2010 ==============

OK I found a solution to my problem here :
http://adammcraventech.wordpress.com/2010/06/11/asp-net-mvc2-ajax-executing-dynamically-loaded-javascript/

The AjaxLoadedContentScriptFix.js javascript seems to be working fine for me.

This is the kind of answer I was looking for.
All the other tips like using custom client side validation in AjaxOptions of Ajax.BeginForm – c’mon people 🙂

Answer 1

as mentioned in the original post, here is the solution :
http://adammcraventech.wordpress.com/2010/06/11/asp-net-mvc2-ajax-executing-dynamically-loaded-javascript/