Jquery post method does not work

Here is the jquery code:

$(function () {
            $("#personCreate").click(function () {

                var person = getPerson();

                // poor man's validation
                if (person == null) {
                    alert("Specify a name please!");
                    return;
                }

                // take the data and post it via json
                $.post("banner/save", person, function (data) {
                    // get the result and do some magic with it
                    alert("Post");
                    var message = data.Message;
                    $("#resultMessage").html(message);
                });
            });
        });

The controller:

            [HttpPost]
            public ActionResult Save(PersonModel person)
            {
                string message = string.Format("Created {0} in the system开发者_如何学编程",person.Name);
                return Json(new PersonViewModel {Message = message });
            }

When I click the button there is no action. The post never directs to the controller.

Hardcoded urls like this always look suspicious:

$.post("banner/save", ...

When working with urls make sure you always use URL helpers to generate them:

$.post("@Url.Action("save", "banner")", ...

Other things you should be looking for is the console tab in FireBug as it will provide you with a valuable information about the AJAX request: what exactly is being sent to the server and what is being received and hopefully point to the error.

Also you haven't shown this getPerson() function but at the end of the day the object being posted should look like this:

var person = { prop1: 'value 1', prop2: 'value 2', .... };

where obviously Prop1, Prop2, ... are properties of the PersonModel.

Another thing you should be careful about is this #personCreate button. If this is a submit button or an anchor link you should ensure to cancel the default action by returning false in the click handler or your ajax might never have the time to execute:

$("#personCreate").click(function () {

    // ... the AJAX request here

    return false;
});

I don't know exactly how your routing is set up, but you aren't passing the person variable in the right manner.

If you need to send banner/save/# (where # is the value of person) you need

$.post("banner/save/" + person, function (data) { 

If you need to send banner/save?person=# (ditto on #) you need

$.post("banner/save", {person: person}, function (data) {

If you just pass the value, jQuery will run jQuery.param on it, which will result in an empty string sent to the server. Obviously this won't call your controller.

Maybe the problem is that the event is not attached correctly to the button: have you tried doing something like this?

To be sure that the event is fired you should use firebug

$(document).ready(function () {
            $("#personCreate").click(function () {

                var person = getPerson();

                // poor man's validation
                if (person == null) {
                    alert("Specify a name please!");
                    return;
                }

                // take the data and post it via json
                $.post("banner/save", person, function (data) {
                    // get the result and do some magic with it
                    alert("Post");
                    var message = data.Message;
                    $("#resultMessage").html(message);
                });
            });
        });