jquery Ajax call from view to controller method but not display the view returned that method in mvc

Question

I have given Ajax call from Index.cshtml view to PrintPreview method which is present in MasterList Controller and i have also passed parameters. The Index method also present in MasterList controller But while returning view from PrintPreview method call is going to PrintPreview.cshtml page but the page is not loading ie not displaying in browser and Index.cshtml page displaying in browser please help.

$('#printbtn').click(function () {
    $.ajax({
        type: 'POST',
        url: '@Url.Action("PrintPreview", "MasterList")',                
        data: 
{ saleorderIdList: JSON.stringify(saleorder_id),
orderIdList:JSON.stringify(order_id) },

        });
});





public ActionResult PrintPreview(string saleorderIdList, string orderIdList)
{
    var locationIdOfLoginUser = Convert.ToInt32(Session["LocationId"]);
    ViewBag.loccationName = Session["LocationName"];
    ViewBag.locationType = Session["LocationType"];
    JavaScriptSerializer serializer = new JavaScriptSerializer();
    IEnumerable<int> saleOrderIds = new int[] { };
    IEnumerable<int> orderIds = new int[] { };
    if (saleorderIdList != null)
    {
        saleOrderIds = serializer.Deserialize<IEnumerable<int>>(saleorderIdList);
    }
    if (orderIdList != null)
    {
        orderIds = serializer.Deserialize<IEnumerable<int>>(orderIdList);
    }
    MasterListService masterListService = new MasterListService();
    var ordercollection = masterListService.GetSelectedorders(locationIdOfLoginUser, saleOrderIds, orderIds);
    return View(ordercollection);

}

In above code i got both array saleOrderIds and orderIds also in ordercollection i got List as expected for view

call is going to that PrintPreview View also in that view i got all list as i passed to that view but That PrintPreview.cshtml page is not displaying instead Index.cshtml page is displaying from where ajax call is passed

Answer 1

What you are doing is, you are calling a function and not doing anything with the return value. This is how your Ajax call should look like:

$('#printbtn').click(function () {
    $.ajax({
        type: 'POST',
        url: '@Url.Action("PrintPreview", "MasterList")',                
        data: 
{ saleorderIdList: JSON.stringify(saleorder_id),
orderIdList:JSON.stringify(order_id) },

onSuccess: function(response) {
    // THIS IS WHERE YOU DISPLAY THE RETURN CSHTML SOMEWHERE.  response RETURN VALUE IS NOTHING BUTH THE WHOLE CSHTML

      //you may do something like
  $('#mydiv').html(response);
  }

        });
});

Assuming that your url and backend code work ok, this will work fine.

Answer 2

1) Your doing a Ajax Call which will never redirect, if you wan to redirect use form submit instead of ajax call.

2) Or If you still want to achieve with ajax call, use partial views to reload the ajax return data. Then your have to use return PartialView(ordercollection);

Like explained here MVC4 Partial View With Ajax