MVC：在 ajax 中找不到 404

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

這是錯誤：

GET 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() 方法