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