How to implement autocomplete in mvc project via jquery UI?

Question

I try to implement autocomplete in mvc project via jquery ui .When I test this in console (network tab ) get this error:

[HTTP/1.1 404 Not Found 2ms]

I think that the url of action is mistake. Please advice

Razor:

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

        }


    }
}

Apart from needing to be a GET, your method parameter needs to be string term — user3559349
– user3559349, Commented Mar 31, 2016 at 6:26
Just make it [HttpGet] public ActionResult GetCityAndAirport(string term) — user3559349
– user3559349, Commented Mar 31, 2016 at 6:34

Kartikeya Khosla · Accepted Answer · 2016-03-31 06:38:08Z

1

The URL of action is correct, problem is with [HttpPost] attribute. The call is httpget not httppost. Remove the [HttpPost] attribute from GetCityAndAirport action method and change parameter name to term as shown.

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

edited Mar 31, 2016 at 6:38

answered Mar 31, 2016 at 5:47

Kartikeya Khosla

18.9k8 gold badges46 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

hmahdavi Over a year ago

OK. This error fixed but now write in console :GET XHR localhost:40634/Flight/GetCityAndAirport [HTTP/1.1 200 OK 122ms] only. I debug and found that pass null to GetCityAndAirport action always .

Kartikeya Khosla Over a year ago

@programmer138200..The question you asked solved with above answer now your another problem is that the parameter is null so for this problem see this SO post.

Kartikeya Khosla Over a year ago

@programmer138200..change parameter of action method as public ActionResult GetCityAndAirport(string q) or public ActionResult GetCityAndAirport(string term)

hmahdavi Over a year ago

OK. Now return all data currently but don't display result .

hmahdavi Over a year ago

Kartikeya Khosla : Thank you .

|

Collectives™ on Stack Overflow

How to implement autocomplete in mvc project via jquery UI?

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related