MVC 4 - jQuery Autocomplete with Id and Label, saving child object

Question

I have a textbox with a working jQuery autocomplete that allows a user to key in a PartNumber and binds with PartNumber and Id. The autocomplete list displays the PartNumber, which is preferred however when an item is selected from autocomplete the text box is populated with the Id.

Is it possible to display the PartNumber in the text box but somehow pass the Id when the form is submitted?

Markup

    <div class="editor-field">
        @Html.TextBoxFor(model => model.PartId, new { id = "parts" })
    </div>

Autocomplete / jQuery

<script type="text/javascript" language="javascript">
    $(document)
        .ready(function (request) {
            $('#parts')
                .autocomplete({
                    source: '@Url.Action("CheckPartNumber", "Part")'
                });
        })
</script>

Controller - Child Object (Part)

public class PartController : Controller
{
    [HttpGet]
    public ActionResult CheckPartNumber(string term)
    {
        var parts = new object();

        if (term.Trim().Length > 2)
        {
            parts = db.Parts
                .Where(x => x.Matchcode.Contains(term))
                .OrderBy(x => x.Matchcode)
                .Select(x => new { label = x.Matchcode, value = x.Id })
                .ToList();
        }
        else
        {

        }

        return Json(parts, JsonRequestBehavior.AllowGet);
    }
}

Controller - Parent Object

public class CountController : Controller
{
    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create(Count count)
    {
        if (ModelState.IsValid)
        {
            count.Id = Guid.NewGuid();
            db.Counts.Add(count);
            db.SaveChanges();

            count.DateCreated = DateTime.Now;
            count.DateModified = DateTime.Now;
            count.UsernameCreatedBy = HttpContext.User.Identity.Name;
            count.UsernameModifiedBy = HttpContext.User.Identity.Name;

            return RedirectToAction("Index");
        }

        return View(count);
    }
}

Sample JSON / bound to AutoComplete

[
{
    "label": "PartA",
    "value": "2b9bd0a4-fb90-432e-b737-e0f8b22eb71a"
},
{
    "label": "PartB",
    "value": "aa84a7b3-6e1e-4b72-ae91-faee590ce58b"
},
{
    "label": "PartC",
    "value": "0ad97869-d5f2-41bc-ac2d-895eeb406d92"
}
]

Answer 1

Try adding a hidden field for this like:

<script type="text/javascript" language="javascript">
    $(document)
        .ready(function (request) {
            $('#parts')
                .autocomplete(
                {
                    source: '@Url.Action("CheckPartNumber", "Part")',
                    minLength: 3,
                    select: function (event, ui) {
                        $('#hidden').val(ui.item.value);
                    }
                }
            );
        })
</script>

    <div class="editor-field">
        @Html.TextBox("parts")
        @Html.HiddenFor(model => model.PartId, new { id = "hidden" }) 
    </div>

Hope this will solve your problem.