programmer138200 programmer138200 - 3 months ago 10
jQuery Question

How to implement autocomplete in mvc project via jquery UI?

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

}


}
}

Answer

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
{ .... }
Comments