在ASP.NET MVC中使用Ajax JavaScript調用視圖

Question

我想調用Action來通過Ajax Javascript打開Index View ，但是它不會加載目標視圖。 在使用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));
    }
});