Я новичок в jQueryUI + MVC3 (Razor), и в любом случае это, вероятно, тривиальный вопрос: я пытаюсь разрешить автозаполнению работать так, чтобы как только элемент был выбран из всплывающего окна, моя форма отправлялась обратно на его Индекс действия.
Вот мои шаги (этот поддельный образец относится к индексу личности):
1) Я создаю оболочку PersonFilter, например:
public sealed class PersonFilter
{
public string LastName { get; set; }
public int RoleId { get; set; }
// ... etc.
}
2) Я создаю модель PersonList для хранения списка Person вместе с некоторыми фильтрами.
3) мое действие Index похоже (оно подает данные в представление, используя сетку данных MvcContrib, откуда страница и сортировка):
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);
}
У меня также есть действие FindPerson, которое получает параметр LastName и используется для автозаполнения в фильтре имен людей.
4) на мой взгляд соответствующий код:
...
@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="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>
Теперь автозаполнение работает нормально, я могу напечатать и получить всплывающее окно и выбрать элемент из него; в этом случае вызывается мой обработчик выбора, и форма публикуется в действии Index. В любом случае, это действие не заполняет член фильтра LastName (его имя равно автозаполнению ввода), в то время как оно регулярно заполняет свой RoleId и другие члены, как и ожидалось.
Я попытался явно установить входное значение LastName, как показано в обработчике выбора (даже если это должно быть избыточно), но ничего не изменилось. Тем не менее, если я раскомментирую строку предупреждения, я смогу увидеть правильное значение, показанное на рисунке. Если я нарушу действие Index, фильтр LastName не будет установлен, и если я добавлю объект FormCollection в его параметры, я не найду ключ с именем LastName. Ключ появляется только в том случае, если я добавляю скрытое поле, например:
@Html.HiddenFor(m => m.LastName)
но это всего лишь тест для выяснения, что не так с моим автозаполненным вводом. Кто-нибудь может объяснить, что я здесь делаю не так?