Question

Here is my AJAX call:

        $(document).ready(function () {
        $("#btnSignup").click(function () {
            $.ajax({
                type: "POST",
                dataType: 'json',
                url: "/Newsletter/Signup",
                data: $('#signupForm').serialize(),
                success: function (response) {
                    if (response.Success) {
                        $('#signupMessage').show(0);
                    }
                    else {
                        showValidationErrors(response.Data);
                    }
                }
            });
            return false;
        });

Here is my controller:

    [HttpPost]
    public JsonResult Signup(FormCollection values)
    {
        var newsletterSubscriber = new newsletterSubscriber();
        TryUpdateModel(newsletterSubscriber);

        try
        {               
            newsletterSubscriber.newslettersubscriber_firstname = values["firstName"];
            newsletterSubscriber.newslettersubscriber_lastname = values["lastName"];
            newsletterSubscriber.newslettersubscriber_email = values["emailAddress"];    

            //Save Subscriber
            wildlifeDB.AddTonewsletterSubscribers(newsletterSubscriber);
            wildlifeDB.SaveChanges();

            //return RedirectToAction("Index");
            return Json(new { result = "success" });

        }
        catch
        {
            //Invalid - redisplay with errors
            //return View("Index");
            return Json(new { result = "failure" });

        }
    }

Why is it that my AJAX call’s conditional “if (response.Sucess)” is never satisfied. I can see that the data is making it into the database?

Answer 1

You’re returning a JSON object that looks like this: { result: "success" }, but in your client code you’re checking for a property called Success. This doesn’t work because the object that’s returned doesn’t contain a property called Success.

Your code should check for if (response.result === 'success') instead. That should work.

To make the check prettier, I generally return an object that looks like { success: true }. In this case, the code can be written as if (response.success), which is a lot easier on the eyes.