如何通过 jquery UI 在 mvc 项目中实现自动完成？

Question

我尝试通过 jquery ui 在 mvc 项目中实现自动完成。当我在控制台（网络选项卡）中进行测试时，出现此错误：

[HTTP/1.1 404 未找到 2ms]

我认为action的url是错误的。 请指教

剃须刀：

<input name="Departure" id="Departure" type="text" class="input-text full-width" placeholder="شهر یا فرودگاه" />

jquery：

    //Auto complete Departure and Arrival flight
 @section scripts
 {
     <script>
         $('#Departure').autocomplete({
             source: '@Url.Action("GetCityAndAirport","Flight")'
         });
     </script>
 }

C#：

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using TravelEnterProject.Models.logiclay;
using TravelEnterProject.Models.Service;
using TravelEnterProject.Models;
using TravelEnterProject.Models.DbModel;

namespace TravelEnterProject.Controllers
{
    public class FlightController : Controller
    {

        Models.DbModel.Entities1 db = new Models.DbModel.Entities1();
        Models.logiclay.ErrorLog errorlog = new ErrorLog();
        AdakFlightRefrence.AdakFlight flightService = new AdakFlightRefrence.AdakFlight();
        OnlineFlightSearch GetAvailible = new OnlineFlightSearch();
        // GET: Flight
        public ActionResult Index()
        {
            return View();
        }


        [HttpPost]
        public ActionResult  HomeSearch(OnlineFlightSearch OFS)
        {

            if (OFS.IsMiladi == false && OFS.DepartureDatePersian != null)
            {
                string date = OFS.DepartureDatePersian.ToString("yyyy/MM/dd");
                OFS.DepartureDatePersian = (DateTime)PersianDateControls.Convertor.ToGregorianDate(date);
            }
            else if (OFS.IsMiladi == false && OFS.ArrivalDatePersian != null)
            {
                string date = OFS.ArrivalDatePersian.ToString("yyyy/MM/dd");
                OFS.ArrivalDatePersian = (DateTime)PersianDateControls.Convertor.ToGregorianDate(date);
            }

            AdakFlightRefrence.vmAirAvailRQ Adak_AirAvailRQ = new AdakFlightRefrence.vmAirAvailRQ();
            try
            {

                var result = flightService.Adak_AirAvailRQ(GetAvailible.GetAvailibleRQ(OFS), "Adak", "rLyVhr9w@j#A39Ac");

            }
            catch (Exception)
            {


            }
            return View();
        }




//------------------------------------------------GetCity and Airport------------------------------------------------------

         [HttpPost]

        public ActionResult GetCityAndAirport(string CityAndAirports)
        {

            TravelEnterProject.Models.logiclay.FlightJsonResult.FlightJsonResult myresult = new Models.logiclay.FlightJsonResult.FlightJsonResult();
            try
            {


                  var citylist2 = db.Fun_SearchCity(CityAndAirports).ToList();

                  var citylist3 = db.Fun_SearchAirport(CityAndAirports).ToList();

                  List<string> c_a = new List<string>();

                   foreach (var item in citylist2)
                   {
                        c_a.Add(item.NameFA+"(شهر)");
                    }
                 foreach (var item in citylist3)
                   {
                        c_a.Add(item.NameFa+item.IATACode+"(فرودگاه)");
                    }

                if (c_a != null)
                {
                    myresult.obj = c_a;
                    //myresult.Result = true;

                }
                else
                {
                    //myresult.Result = false;

                }
            }
            catch (Exception e)
            {
                errorlog.Error("getcityandairport", "74", e.Source.ToString(), e.Message);
                myresult.Result = false;
                myresult.message = " خطا در بارگذاری اطلاعات";
            }
            return Json(myresult, JsonRequestBehavior.AllowGet);

        }


    }
}

Answer 1

动作的 URL 是正确的，问题在于 [HttpPost] 属性。电话是httpget 而不是httppost。从GetCityAndAirport 操作方法中删除[HttpPost] 属性并将参数名称更改为term，如图所示。

[HttpPost] //<--- remove this or change to [HttpGet]
public ActionResult GetCityAndAirport(string term) //<--- change here
{ .... }