MVC: 404在ajax中找不到

Question

我在观景中展示了许多航班。我为每一次飞行都做了一个按钮。单击此按钮，我将得到视图中显示的单个航班的详细信息。以下是我的视图代码：

foreach (var item in Model)
                    {
                        <div class="toFrom">
                            <h3 id="FCity_@item.FlightID">@item.FromCity </h3>
                            <span><i class="fa mx-4 fa-plane"></i></span>
                            <h3 id="TCity_@item.FlightID">@item.ToCity</h3>
                        </div>
                        <div class="info d-flex">
                            <p class="me-2 " id="DDate_@item.FlightID">@item.DepartureDate.ToShortDateString()</p>
                            <p class="me-2" id="DTime_@item.FlightID">@item.DepartureTime.ToShortTimeString()</p>
                            <p class="me-2 " id="ATime_@item.FlightID">@item.ArrivalTime.ToShortTimeString()</p>

                            <select id="CFare_@item.Fare" class="form-control me-2">

                                @foreach (var re in ddlcabin)
                                {
                                    <option value="@re.Fare">@re.CabinName (@re.Fare)</option>
                                }
                            </select>
                            <button class="form-control btn btn-primary" onclick="Save(@item.FlightID,@item.Fare)">select </button>
                            
                        </div>
                    
                    }

现在，我希望使用这些值并将它们传递给操作方法，而不使用视图中的表单。这是我的js代码：

    function Save(id, fare) {
            var fct = $("#FCity_" + id).text();
            var tct = $("#TCity_" + id).text();
            var ddt = $("#DDate_" + id).text();
            var dt = $("#DTime_" + id).text();
            var at = $("#ATime_" + id).text();
            var cf = $("#CFare_" + fare).val();
            
            $.ajax({
                method: 'GET',
                url: 'Flights/ReserveFlight',
                data: { FromCity: fct, ToCity: tct, DepDate: ddt, DepTime: dt, ArrTime: at, CabinFare: cf },
                success: function (data) {
                    console.log("data is inserted")
                },
                error: function (err) {
                    console.log(err)
                }
            });
}

当我单击“保存”按钮时，它会显示浏览器控制台中的一个错误，并且没有按下应用于操作方法的调试器

以下是我的行动方法：

public ActionResult ReserveFlight(string FromCity, string ToCity, DateTime DepDate, DateTime DepTime, DateTime ArrTime, int CabinFare)
        {
            return View();
        }

以下是错误：

获取http://localhost:64480/Flights/Flights/ReserveFlight?FromCity=Islamabd%20&ToCity=Karachi&DepDate=5%2F20%2F2022&DepTime=8%3A30%20AM&ArrTime=12%3A00%20AM&CabinFare=4500 404 (未找到)

Answer 1

将ajax中的URL修改为：

$.ajax({
    method: 'GET',
    url: '/Flights/ReserveFlight',
    data: { FromCity: fct, ToCity: tct, DepDate: ddt, DepTime: dt, ArrTime: at, CabinFare: cf },
    success: function (data) {
        console.log("data is inserted")
    },
    error: function (err) {
        console.log(err)
    }
});

或者与UrlHelper一起工作。

$.ajax({
    method: 'GET',
    url: '@Url.Action("Flights", "ReserveFlight")',
    data: { FromCity: fct, ToCity: tct, DepDate: ddt, DepTime: dt, ArrTime: at, CabinFare: cf },
    success: function (data) {
        console.log("data is inserted")
    },
    error: function (err) {
        console.log(err)
    }
});

参考资料：操作(字符串，字符串)\ UriHelper.Action()方法