Which one is better? Ajax post or page post[Controller httppost] when only one form is there in a page?

Question

I have a page called Bookprogram which contains 6 input controls namely, txtName, txtEmail, txtPhone, selectcat[dropdown for categories], txtDate, txtMessage. Now when am done with all the validations for the above control, I want to store the data in db. I know how to perform both in ajax as well as complete page posting.

If it's in ajax, after validations, I would just call $.ajax and post the data as a string and fetch it in controller as below:

[HttpPost]
public JsonResult BookProgram(string name, string email, string phone, string category, string date, string message)
{
       //code to save into db
       return Json(result);
}

If I have to post a whole page, after validations I would just do a $(form).submit(); and write as below in controller:

[HttpPost] 
public ActionResult Bookprogram(Mymodel model)
{
     //Code to save the data 
     return View();
}

I just want to know which is better, safe and good to use as I have to display a message after successful submission. I know I can take either of the ways to display message but Is postback[page refresh] really needed in this scenario and if yes what are the advantages of it over ajax post?

EDIT :

I just went through this link and tried to implement 2nd solution of highest voted answer but for my bad luck it wasn't hitting the controller itself. I have kept breakpoint in my controller.

$(form).on("submit", function (e) {
        e.preventDefault();
        ValidateForm(form);
        var selectedVal = $(form).find('select').children(":selected").val();
        if(selectedVal=="")
        {
            $(form).find('div.bootstrap-select').children(":first").addClass('alert-danger');
            $(form).find('div.bootstrap-select').next('.text-danger').html('Please select a category!');
        }
        var formContainer = $(form + ' .text-danger');
        if ($(formContainer).text().length == 0) {
            $.ajax({
                url: '/Home/BookProgram/',
                type: "POST",
                dataType: 'json',
                contentType: "application/json; charset=utf-8",
                data: $('#fbookprogram').serializeArray(),
                success: function (data) {
                    if (data.result == "Success") {
                          alert('success');
                    }
                    else {
                         alert('fail');
                        return false;
                    }
                    return true;
                }
            });
        }
        $(form).unbind('submit');
        return false;
    });

Controller :

public ActionResult BookProgram(MyModel model)
{
    if(ModelState.IsValid)
    {
        //code to save data
    }
    return Json(new { success = false });
}

What is that I am missing here.

Answer 1

Post Back

1. Browser Handling - The only advantage I can think of is that the browser will handle redirects and progress loading for you. You don't need to write the logic to redirect users or show a loading bar.

AJAX

1. Asynsconous - With AJAX you're getting asyncronous calls so the browsers thread isn't blocked. This allows the user to still interact with the UI whilst waiting for the response from your request.

2. Better Performance -You generally don't need to reload the entire page resulting in less overhead & HTTP requests being made.

FYI - You can still model bind with JsonResult

public JsonResult BookProgram(Mymodel model)
{
       //code to save into db
       return Json(result);
}

Answer 2

Post back - is a classic workflow. Delegate most of inner work to your webbrowser. All your responce logic calculated on server side.

AJAX - is a modern way of building dynamic web-applications. Base approach for single-page-applications. Most of work in this case should be done on client side.