javascript - 在 ASP.NET MVC 中使用 ajax javascript 调用 View

Question

我想调用 Action 通过 Ajax Javascript 打开我的 Index View，但它没有加载目标 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，但我找不到它不重定向到目标 View 的原因。

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