How to do Jquery ajax post to controller mvc - asp.net-mvc-3

Question

I just can't figure out what I am not doing right,From a viewmodel,I try to grab from user {**Tousername and messagebody},#ToUserName** is correctly sent while #Body is null in controller when I debug .I have the following Jquery code:
$("#SendMessage").click(function () {
var message = GrabMessage();
var jsonData = JSON.stringify(message, null, 2);
$.ajax({
url: '#Url.Content("~/Message/Compose/")',
type: 'POST',
data: jsonData,
datatype: 'json',
contentType: 'application/json; charset=utf-8',
success: function () {
$('#default_message').append("message sent ");
switchToSentMessagesTab();
},
error: function (request, status, err) {
alert(status);
alert(err);
}
});
return false;
});
function switchToSentMessagesTab() {
$('a[href="#default_message"]').click();
}
function GrabMessage() {
var touser = $("#ToUserName").val();
var text = $("#Body").val();
var result =
{
Body: text,
ToUserName: touser
};
return result;
}
});
And the razer View:
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<div class="editor-label">
#Html.LabelFor(model => model.ToUserName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.ToUserName, new { #class ="autocomplete"})
#Html.ValidationMessageFor(model => model.ToUserName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Body)
#Html.ValidationMessageFor(model => model.Body)
</div>
<p>
<input id="SendMessage" type="submit" value="Send" />
</p>
}
and controller Action:
[HttpPost]
public ActionResult Compose(PrivateMessageViewModel m)
{
if (User.Identity.IsAuthenticated )
{
if (ModelState.IsValid)
{
var ToUserName = users.Profiles.First(x => x.UserName == m.ToUserName);
PrivateMessage message = new PrivateMessage
{
//do some stuff here:
};
db.SendMessage(message);
return RedirectToAction(//Some view here...)
}
}
return PartialView(m);
}