CODEWITHSUNDEEP
c#jqueryasp.netasp.net-mvcasp.net-mvc-4
Iain Bruce
Iain Bruce

Reputation: 83

Validation on Ajax loaded form - presenting back the validation summary

I am trying to validate a submitted form that is loaded in isolation to the rest of the page. I use validation all the time with my normal non ajax loaded content. I go on this principle:

  1. Submit the form
  2. pass the request from my controller to my service
  3. Validate the object in the service
  4. pass back to the controller a bool depending on the validation state
  5. Present the original form back with validation summary if there are validation errors
  6. Present a success page if there are no validation errors

That works fine on non-ajax content.

Now lets consider my issue. I have this kind of structure:

<div id="mainContent">
   <div id="leftContent"></div>
   <div id="rightContent"></div>
</div>

<script>
      $.ajax({
            url: baseUrl + "home/newApplicationForm/",
            type: "GET",
            success: function (data) {
                $("#rightContent").html(data);                  
            },
            error: function (xhr, ajaxOptions, thrownError) {                 
                alert("Error displaying content");
            }
        });

</script>

This puts my blank application form on the right hand side of the page.. everything else on the page is left unchanged by that ajax.

So home/newapplicationform now displays the form that is wrapped with:

@model homelessRentals.Model.Application
@{
AjaxOptions options = new AjaxOptions{
    HttpMethod = "Post",
    UpdateTargetId = "AddApplication"        
};        

}

@using (Ajax.BeginForm(options)) { 
@Html.ValidationSummary(true)
     <div class="editor-field">
        @Html.EditorFor(model => model.YourName)
        @Html.ValidationMessageFor(model => model.YourName)
    </div>
<input type="submit" value="Add Application" id="saveMe"/>
}

This form now pings back to my controller:

    [HttpPost]
    public ActionResult AddApplication(Application app)
    {
        bool validated = _service.AddApplication(app);

        if(validated)
        {
             return PartialView("SuccessApp");
        }
        return PartialView(app);
    }

This will either return me to my form with validation errors shown or route me to my success page. This works to the extent that the logic is right, BUT I get presented the partial view in replacement of the whole page - it is not presented back in the 'rightContent' div.

I have tried submitting the form and catching the submission in jquery, then running something like this but I get the same behaviour:

      $.ajax({
            url: baseUrl + "home/AddApplication/",
            data: "{'app':" + JSON.stringify(newApp) + "}",
            type: "POST",
            success: function (data) {
                $("#rightContent").html(data);                  
            },
            error: function (xhr, ajaxOptions, thrownError) {                 
                alert("Error displaying content");
            }
        });

Can anyone help me with a better way to achieve this validation?

Many thanks

Upvotes: 2

Views: 510

Answers (1)

hutchonoid
hutchonoid

Reputation: 33306

The UpdateTargetId is incorrect, this needs to point to rightContent rather than AddApplication.

@{
AjaxOptions options = new AjaxOptions{
    HttpMethod = "Post",
    UpdateTargetId = "rightContent"        
};

There is no dom element with the id of AddApplication.

Upvotes: 1

Related Questions