MVC3 Autocomplete and POST Method in Controller

Question

I got a MVC Razor View page as a form for people to enter details and submit to a database. It works using dropdownlist but I want to add a autocomplete textbox to the form. This works fine however when posting back to the POST controller it sets the ID of the person to 0 always. Any ideas?

Thanks

Javascript:

 script type="text/javascript">

   $(document).ready(function () {
        $("#PersonName").autocomplete({
            source: '@Url.Action("AutocompleteSuggestions")',
            minLength: 2,

            select: function (event, ui) {
                if (ui.item) {
                    $("#PersonName").val(ui.item.label);
                    $("#PersonId").val(ui.item.value);
                }
            }
        });
    });
</script>

Controller:

 [HttpPost]
    public ActionResult Create(MappingModel view)
    {

        if (ModelState.IsValid)
        {
            var entity = new PersonContempancy();
            entity.PersonId = view.PersonId;
            entity.FrameworkId = view.FrameworkId;
            entity.ContempancyCategoryId = view.ContempancyCategoryId;
            entity.ContempancyId = view.ContempancyId;
            entity.ContempancyLevelId = view.ContempancyLevelId;
            entity.FrameworkLevelId = view.FrameworkLevelId;
            db.PersonContempancies.Add(entity);
            db.SaveChanges();

            return RedirectToAction("Index");  
        }



        ViewBag.Contepancies = db.Contempancies.ToList();
        ViewBag.ContempancyCategory = db.ContempancyCategories.ToList();
        ViewBag.ContempancyLevel = db.ContempancyLevels.ToList();
        ViewBag.FrameworkLevel = db.FrameworkLevels.ToList();
        ViewBag.Person = db.People.ToList();
        ViewBag.Framework = db.Frameworks.ToList();



        return View();
    }

  public ActionResult AutocompleteSuggestions(string term)
    {

        var namelist = db.People.Where(c => c.PersonName.Contains(term)).Select(c => new { value = c.PersonId, label = c.PersonName}).Distinct().Take(10);

        return Json(namelist.ToArray(), JsonRequestBehavior.AllowGet);

    }

Answer 1

Looking at your AutoCompleteSuggestions code it looks like you are only sending back the person name, not the person's id, when returning your JSON. If i'm understanding correctly you need to return both the name and the ID and set the person id via JQuery in the select function in your autocomplete function. It should look (roughly) something like this:

var namelist = (from c in db.People where c.PersonName.Contains(term) select new { c.PersonName, c.PersonID}).Distinct().Take(10).ToArray();
return Json(namelist.ToArray(), JsonRequestBehavior.AllowGet);

and

     $("#searchTerm").val(ui.item.value.PersonName);
     $("#PersonID").val(ui.item.value.PersonID);