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` — , Mar 31 '16 at 06:26
Just make it `[HttpGet] public ActionResult GetCityAndAirport(string term)` — , Mar 31 '16 at 06:34

Kartikeya Khosla · Accepted Answer · 2016-03-31T06:38:08.583

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 '16 at 06:38

answered Mar 31 '16 at 05:47

Kartikeya Khosla

18,743
8
43
69

OK. This error fixed but now write in console :GET XHR http://localhost:40634/Flight/GetCityAndAirport [HTTP/1.1 200 OK 122ms] only. I debug and found that pass null to GetCityAndAirport action always . – hmahdavi Mar 31 '16 at 06:08
@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](http://stackoverflow.com/questions/2516620/jquery-autocomplete-pass-null-parameter-to-the-controller-in-asp-net-mvc-2) SO post. – Kartikeya Khosla Mar 31 '16 at 06:20
1

@programmer138200..change parameter of action method as `public ActionResult GetCityAndAirport(string q)` or `public ActionResult GetCityAndAirport(string term)` – Kartikeya Khosla Mar 31 '16 at 06:35
OK. Now return all data currently but don't display result . – hmahdavi Mar 31 '16 at 06:42
Kartikeya Khosla : Thank you . – hmahdavi Mar 31 '16 at 06:47
@programmer138200..happy to help you..) – Kartikeya Khosla Mar 31 '16 at 06:47

How to implement autocomplete in mvc project via jquery UI?

1 Answers1