jQueryUI autocomplete with MVC3: posting autocompleted value

I'm new to jQueryUI+MVC3 (Razor) and this is probably a trivial question, anyway: I am trying to let autocomplete work so that as soon as an item is selected from the popup my form is submitted back to its Index action.

Here are my steps (this fake sample refers to an index of Person's):

1) I create a PersonFilter wrapper like:

public sealed class PersonFilter
{
    public string LastName { get; set; }
    public int RoleId { get; set; }
    // ... etc.
}

2) I create a PersonList model to hold the list of Person's together with some filters.

3) my Index action is like (it is serving data to a view using MvcContrib data grid, whence page and sort):

public ViewResult Index(int? page, GridSortOptions sort, PersonFilter filter)
{
    var persons = _repository.GetPersons(filter);

    if (sort.Column != null) 
        persons = persons.OrderBy(sort.Column, sort.Direction);
    ViewBag.Sort = sort;

    PersonList list = new PersonList
                        {
                            persons = persons.AsPagination(page ?? 1, 10),
                            LastName = filter.LastName,
                            RoleId = filter.RoleId,
                            Roles = _repository.GetRoles(),
                            // ...
                        };
    ViewBag.Filter = filter;

    return View(list);
}

I also have a FindPerson action which gets a LastName parameter and is used to autocomplete on the person name filter.

4) my view relevant code:

...
@model PersonList
...
@using (Html.BeginForm("Index", "Person", FormMethod.Post, new { id = "TheForm" }))
{
...
    <input type="text" id="LastName"/>

    @Html.DropDownListFor(m => m.RoleId, new SelectList(Model.Roles, "Id", "Title", 0),
                                                    new {onchange = "document.getElementById('TheForm').submit();"})
...
}

<script type="开发者_JS百科text/javascript" language="javascript">
    $(function () {
        $("#LastName").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "/Person/FindPerson", type: "POST", dataType: "json",
                    data: { LastName: request.term },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return { label: item.LastName, value: item.LastName, id: item.Id };
                        }));
                    }
                });
            },
            select: function (event, ui) {
                $("#LastName").val(ui.item.value);
                //alert($("#LastName").val());
                $(this).closest("form").submit();
            }
        });
    });
</script>

Now the autocomplete works fine, I can type and get a popup and select an item from it; in this case my select handler is called, and the form is posted to the Index action. Anyway, this action does not get its filter LastName member filled (its name is equal to the autocompleted input), while it regularly gets its RoleId and other members filled as expected.

I tried explicitly setting the LastName input value as shown in the select handler (even if this should be redundant), but nothing changes. Yet, if I uncomment the alert line I can view the correct value shown. If I break into the Index action, the filter LastName is not set and if I add the FormCollection object in its parameters I find NO key named LastName. A key appears only if I add a hidden field like:

@Html.HiddenFor(m => m.LastName)

but this is just a test for finding out what's wrong with my autocompleted input. Could anyone explain what I'm doing wrong here?

You should give a name to your LastName textbox:

<input type="text" id="LastName" name="LastName" />

Also I would recommend you using helpers to generate it. If you used helpers you wouldn't have had such problems:

@Html.TextBoxFor(x => x.LastName)

Without a name nothing will be posted to the server.