Question

I’m trying to send data to the server. But my code does not work. Can someone point out a mistake?

Sencha code:

Ext.Ajax.request({
                        url: '/Blog/SavePost',
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json;charset=utf-8'
                        },
                        params: {
                            id: currentPost.data.Id,
                            title: currentPost.data.Title,
                            text: currentPost.data.Text,
                            authorName: currentPost.data.AuthorName,
                            authorEmail: currentPost.data.AuthorEmail,
                            postDate: currentPost.data.PostDate
                        },
                        failure: function (response) { },
                        success: function (response, opts) { }
                    });

MVC code:

[HttpPost]
    public ActionResult SavePost(int id, string title, string text, string authorName, string authorEmail, DateTime postDate)
    {
        Post post = new Post { Id = id, Title = title, Text = text, AuthorEmail = authorEmail, AuthorName = authorName, PostDate = postDate };
        var postRepository = new PostRepository();
        postRepository.Add(post);
        return Json();
    }

Thanks!

Answer 1

Remove the application/json request header because you are not sending a JSON encoded request:

Ext.Ajax.request({
    url: '/Blog/SavePost',
    method: 'POST',
    params: {
        id: currentPost.data.Id,
        title: currentPost.data.Title,
        text: currentPost.data.Text,
        authorName: currentPost.data.AuthorName,
        authorEmail: currentPost.data.AuthorEmail,
        postDate: currentPost.data.PostDate
    },
    failure: function (response) { },
    success: function (response, opts) { }
});

Personally I would recommend having your controller action directly take the Post model instead of having each property as argument and then manually recopying them into a Post object:

[HttpPost]
public ActionResult SavePost(Post post)
{
    var postRepository = new PostRepository();
    postRepository.Add(post);
    return Json(...);
}

The default model binder will take care of everything. Now if you wanted to use JSON as request you could use the JSON.stringify method which is natively built into modern web browsers:

Ext.Ajax.request({
    url: '/Blog/SavePost',
    method: 'POST',
    headers: {
        'Content-Type': 'application/json;charset=utf-8'
    },        
    params: {
        post: JSON.stringify({
            id: currentPost.data.Id,
            title: currentPost.data.Title,
            text: currentPost.data.Text,
            authorName: currentPost.data.AuthorName,
            authorEmail: currentPost.data.AuthorEmail,
            postDate: currentPost.data.PostDate
        })
    },
    failure: function (response) { },
    success: function (response, opts) { }
});