render page with model after ajax post

Question

Is it possible to make an ajax post request, and in the controller return a model, after which the page is rendered with that model? To illustrate what I mean, say we have a

Answer 1

Yes ofcourse it can be done. There are few things to keep in mind

1) First of all the returned View after post should be a Partial View not Full View

2) You have to put a container div on your main View where the response partial view from ajax call will be appended is success callback.

I mean is, in your main view you will have:

and in ajax call success function append response in the container div like:

$.ajax({
            url: "/Home/PostReq",
            data: JSON.stringify(data),
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            cache: false,
            async: true,
            error: function (jqXHR, error, errorThrown) {
                //display error
            }
            success: function(response) {

              $('#container').html(response);
             }
        })