Client side data annotation is not working on partial views that containe ajax.beginform inside my asp.net mvc

Question

i have the following partial view that will be returned after clicking on the ajax.actionlink:-

@model System.Models.Answer 
@{ 
    ViewBag.Title = "Create"; 
} 
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
 <div id = "partialWrapper">
 @using (Ajax.BeginForm("Create", "Answer", new AjaxOptions
{
    HttpMethod = "Post",
    InsertionMode = InsertionMode.InsertAfter,
    UpdateTargetId = "incrementanswer",
    OnSuccess = "removePartial"
}))

 {
     <div id = "returnedquestion">
     @Html.ValidationSummary(true)

    <fieldset> 
        <legend>Answer here</legend> 
        <div class="editor-label"> 
            @Html.LabelFor(model => model.Description) 
        </div> 
        <div class="editor-field"> 
            @Html.EditorFor(model => model.Description) 
            @Html.ValidationMessageFor(model => model.Description) 
        </div> 
        <div class="editor-label"> 
            @Html.LabelFor(model => model.IsRight) 
        </div> 
        <div class="editor-field"> 
             @Html.DropDownList("IsRight", String.Empty) 
            @Html.ValidationMessageFor(model => model.IsRight) 
        </div>  
    </fieldset> 
     <input type= "hidden" name = "questionid" value = @ViewBag.questionid>
     <input type= "hidden" name = "assessmentid" value = @ViewBag.assessmentid>
     <input type="submit" value="Add answer" />
 </div>
 }
 </div>

the problme is that if i click on the submit button while leaving the required fileds empty then no client side validation will be displayed that the IsRight and the description fields are required, instead a whole view (containing the layout )will be returned,, so what might be the problem?

here is the action method that is being called from the partila view:-

[HttpPost] 
        public ActionResult Create(int questionid, Answer a) 
        { 
            if (ModelState.IsValid) 
            { 
        repository.AddAnswer(a); 
             repository.Save(); 
             return PartialView("_details",a); 
            } 
            return View(a);

and the ajax.actionlink that will return the partial view:-

<div id ="link">
@Ajax.ActionLink("Add New Answer", "Create", "Answer",
        new { questionid = Model.QuestionID },
          new AjaxOptions
          {

              HttpMethod = "Get",
              UpdateTargetId = "link",
              InsertionMode = InsertionMode.InsertAfter,
              LoadingElementId = "progress"


                        })
                        </div>

score 1 · Answer 1 · edited Apr 22 '13 at 13:24

1

You need to rebind Unobtrusive JavaScript in the success part of the ajax request. As below:

$.validator.unobtrusive.parse($(“div#divWizard”));

Please review the following link to my blog for further reference.

edited Apr 22 '13 at 13:24

Ren

1,111
5
15
24

answered Apr 22 '13 at 12:58

Deepak Kushvah

278
2
12

score 0 · Answer 2 · edited May 23 '17 at 11:49

0

This answer should be what you're looking for: Unobtrusive validation doesn't work with Ajax.BeginForm

edited May 23 '17 at 11:49

Community

1
1

answered Apr 04 '12 at 09:46

Sergi Papaseit

15,999
16
67
101

score 0 · Answer 3 · answered Mar 05 '12 at 04:25

0

Did you enable unobtrusive validation?

 <appSettings>
  <add key="ClientValidationEnabled" value="true"/> 
  <add key="UnobtrusiveJavaScriptEnabled" value="true"/> 
 </appSettings>

Did you link those script files appropriately?

  <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
  <script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
  <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"><script>

answered Mar 05 '12 at 04:25

Scott Weaver

7,192
2
31
43

yes i can see all of these scripts fired succsfully under the Script Document section after i run the application, i also moved the Jquery.validate script into the partial view instead of being on the main view and the problem did not solve. – John John Mar 05 '12 at 22:23

Client side data annotation is not working on partial views that containe ajax.beginform inside my asp.net mvc

3 Answers3