jQuery AutoComplete text not saving to db via create view using MVC3

Question

This is my first post so please go easy on me fellas. I am trying to implement a create form that utilizes jquery autocomplete. The create form allows users to enter data that will be saved to my database, via a submit button. Here is my code:

Controller

    // GET: /Inspection1/Create
    public ActionResult Create()
    {
        InspectionInfo model = new InspectionInfo
        {
            Submitted = DateTime.Now,
            Contact = new Contact()
        };

        ViewBag.CountyName = new SelectList(db.Counties, "CountyName", "CountyName");


        return View(model);
    }

    //
    // POST: /Inspection1/Create

    [HttpPost]
    public ActionResult Create(InspectionInfo inspectioninfo)
    {
            if (ModelState.IsValid)
        {
            db.InspectionInfos.Add(inspectioninfo);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        return View(inspectioninfo);
    }

    // this allows for autocompletion behavior
    public ActionResult QuickSearchContact(string term)
    {
        var contacts = db.Contacts
                        .Where(r => r.ContactName.Contains(term))
                        .Take(10)
                        .Select(r => new { label = r.ContactName });
        return Json(contacts, JsonRequestBehavior.AllowGet);

    }

Models

  public class InspectionInfo
  {
    [Key]
    public int InspectionId { get; set; }

    [DataType(DataType.Date)]
    public virtual DateTime Submitted { get; set; }
    [DataType(DataType.MultilineText)]
    [MaxLength(1000)]
    public string Comments { get; set; }

    [Required]
    public Contact Contact { get; set; }


 public class Contact
 {
    [Key]
    public string ContactName { get; set; }

View:

<div class="editor-label">
        @Html.LabelFor(model => model.Contact)
    </div>
    <div class="editor-field">
        <input type ="text" name ="q" data-autocomplete=  
       "@Url.Action("QuickSearchContact", "Inspection")"/> 
        @Html.ValidationMessageFor(model => model.Contact.ContactName)
    </div>

JS

$(document).ready(function () {

  $(":input[data-autocomplete]").each(function () {

  $(this).autocomplete({ source: $(this).attr("data-autocomplete")});
  });

The autocomplete function seems to be working fine. It will pull column data from the database as I require. However, any data entered in the autocomplete text box, appears NULL in the database after the user has saved the form. Help here would be greatly appreciated.

Answer 1

For model binding to work, generally input names must match property names of your model. Surprisingly, you have named your input "q"

<input type ="text" name ="q" data-autocomplete="..."/> 

Just rename it according to your model

<input type ="text" name="Contact.ContactName" data-autocomplete="..."/> 

Answer 2

You don't have your on the code above but, instead of using

 <input type ="text" name ="q" data-autocomplete=          "@Url.Action("QuickSearchContact", "Inspection")"/> 

use: @EditorFor(x = x.NameOfTextBox)

then either have an input button wrapped in a using tag

@using (Html.BeginForm("Create", "NameOfController", FormMethod.Post){

 //all your model stuff goes here

}

or use and actionlink instead of :

@Html.ActionLink("Submit", "Create", "NameOfController", Model)

Answer 3

The provided information doesn't tell, but is is likely that the autocomplete part is not written within the form elements of the view:

    @using (Html.BeginForm()) 
    {
        <p>
            ...
        </p>
     }

In MVC the form is defined within the brackets { .... } like above.