Wsrtjtyk

I want to call Action to open up my Index View by Ajax Javascript, but it does not load target view. Before I use ajax I called action like this that work properly:

<a class="btn btn-orange" href="@Url.Action("Index", "Booking", new { area = "Portal" })">انتخاب</a>

But I need to call with javascript Ajax and when I transfer that to this :

<a class="btn btn-orange" onclick="Booking(@Json.Encode(item))">انتخاب</a>

I faced this problem that it does not load page.
This is my ajax code:

function Booking(obj) {

    var schedulingViewModel = {

    };

    for (var key in obj) {

        if (obj.hasOwnProperty(key)) {

            schedulingViewModel[key] = obj[key];

        }

    }

    $.ajax({

        url: '/Portal/Booking',

        type: 'post',

        data: schedulingViewModel,

        success: function (data) {

            alert('Data: ' + data);

        },

        error: function (request, error) {

            alert("Request: " + JSON.stringify(request));

        }

    });

}

And this s my BookingController:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using Tranship.ViewModel;



namespace Tranship.UI.Areas.Portal.Controllers

{

    public class BookingController: Controller

    {

        [HttpPost]

        public ActionResult Index(ScheduleViewModel schedulingViewModel)

        {

            return View("Index", schedulingViewModel);

        }

    }

}

This is my view with IEnumerable model that I want to send an Item of that to action:

@model IEnumerable<Tranship.ViewModel.ScheduleViewModel>

<div class="pg-search-form">

    @foreach (var item in Model)

    {

        <div class="list-block main-block f-list-block dashboard-listing booking-listing">

            <div class="list-content">

                <table class="table table-hover">

                    <tbody>

                        <tr>

                            <td class="dash-list-icon booking-list-date">

                                <div class="b-date">

                                    <h3>@item.DepartureDay</h3>

                                    <p>@item.DepartureMonth</p>

                                </div>

                            </td>

                            <td class="dash-list-text booking-list-detail">

                                <h3>@item.Origin به @item.Destination</h3>

                                <ul class="list-unstyled booking-info">

                                    <li>@item.DepartureDate<span>تاریخ رفت :</span></li>

                                    <li>@item.ArrivalDate<span>تاریخ برگشت :</span></li>

                                    <li>@item.Adult نفر<span>تعداد :</span></li>



                                </ul>



                            </td>

                            <td class="dash-list-btn">

                                <a class="btn btn-orange" onclick="BookingMethod(@Json.Encode(item))">انتخاب</a>

                                @*<button type="submit" class="btn btn-orange">انتخاب</button>*@

                                @*<a class="btn btn-orange" href="@Url.Action("Index", "Booking", new { area = "Portal" })">انتخاب</a>*@

                                <div id="price">@item.Price تومان</div>

                            </td>

                        </tr>

                    </tbody>

                </table>

            </div>

            <!-- end list-content -->

        </div>

    }

    <div class="pages">

        <ol class="pagination">

            <li><a href="#" aria-label="Previous"><span aria-hidden="true"><i class="fa fa-angle-left"></i></span></a></li>

            <li class="active"><a href="#">1</a></li>

            <li><a href="#">2</a></li>

            <li><a href="#">3</a></li>

            <li><a href="#">4</a></li>

            <li><a href="#" aria-label="Next"><span aria-hidden="true"><i class="fa fa-angle-right"></i></span></a></li>

        </ol>

    </div>

    <!-- end pages -->

</div>

In fact ajax return correct HTML but I couldn't find why it does not redirect to target view.

window.location() is used to redirect from one page to another page.

After Successful ajax request write that code.

 $.ajax({

    url: '/Portal/Booking',

    type: 'post',

    data: schedulingViewModel,

    success: function (data) {

        alert('Data: ' + data);

        window.location = "/Booking/Index";

    },

    error: function (request, error) {

        alert("Request: " + JSON.stringify(request));

    }

});