Вызов представления с помощью javascript ajax в ASP.NET MVC

Question

Я хочу позвонить Action, чтобы открыть мой Index View с помощью Ajax Javascript, но он не загружает представление цели.Прежде чем использовать ajax, я назвал действие, подобное этому, которое работает должным образом:

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

Но мне нужно позвонить с помощью javascript Ajax, и когда я перевожу это на это:

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

Я столкнулся с этимПроблема в том, что он не загружает страницу.Это мой код ajax:

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));
        }
    });
}

А это мой 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);
        }
    }
}

Это мой взгляд с моделью IEnumerable, что я хочу отправить элемент этого действия:

@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>

На самом деле ajax возвращает правильный HTML, но я не смог найти, почему он не перенаправляет в целевое представление.

Answer 1

window.location() используется для перенаправления с одной страницы на другую.

После успешного выполнения запроса ajax запишите этот код.

 $.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));
    }
});