Question

我是jQueryUI + MVC3（Razor）的新手，这可能是一个微不足道的问题，无论如何：我试图让自动完成工作，以便只要从弹出窗口中选择一个项目，我的表单就会被提交回指数行动。

以下是我的步骤（这个假样本指的是Person的索引）：

1）我创建一个PersonFilter包装器，如：

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

2）我创建一个PersonList模型来保存Person的列表以及一些过滤器。

3）我的索引操作就像（它使用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>

现在自动完成工作正常，我可以输入并获取弹出窗口并从中选择一个项目;在这种情况下，调用我的select处理程序，并将表单发布到Index操作。无论如何，此操作不会使其过滤器LastName成员填充（其名称等于自动完成的输入），而它会定期获取其RoleId和其他成员按预期填充。

我尝试显式设置LastName输入值，如select处理程序中所示（即使这应该是多余的），但没有任何变化。然而，如果我取消注释警报线，我可以查看显示的正确值。如果我进入Index操作，则不设置过滤器LastName，如果我在其参数中添加FormCollection对象，则会找到名为LastName的NO键。只有在我添加隐藏字段时才会出现一个键：

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

但这只是一个测试，可以找出我的自动完成输入有什么问题。谁能解释一下我在这里做错了什么？

Answer 1

您应该在name文本框中提供LastName：

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

我还建议您使用助手来生成它。如果您使用过帮助器，则不会遇到这样的问题：

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

没有名称，任何内容都不会发布到服务器上。

使用MVC3的jQueryUI自动完成：发布自动完成的值

1 个答案: