ASP.Net MVC 项目中的 Ajax 自动完成 - 如何显示对象的名称但实际保存它的 ID？

Question

我已经在我的应用程序中使用查询数据库的 Web 服务文件实现了 Ajax 自动完成功能，效果非常好。我遇到的一个问题是允许用户查看项目的名称，因为这就是他们在文本框中输入的内容，但是当他们选择它时，它会保存项目的 ID 号而不是实际名称。我希望它的行为很像一个下拉列表，我可以在其中指定所看到和输入的内容与数据库中实际保存的内容（在本例中，是产品 ID 而不是它的名称。

）视图以及脚本：

<script type="text/javascript">
    Sys.Application.add_init(function() {
        $create(

        AjaxControlToolkit.AutoCompleteBehavior, {
            serviceMethod: 'ProductSearch',
            servicePath: '/ProductService.asmx',
            minimumPrefixLength: 1,
            completionSetCount: 10
        },
        null,
        null,
        $get('ProductID'))
    });
    </script>
<p>
    <label for="ProductID">Product:</label>
    <%= Html.TextBox("ProductID", Model.Products)%>
    <%= Html.ValidationMessage("ProductID", "*")%>
</p>

这是我的 asmx 文件中的内容：

public class ProductService : System.Web.Services.WebService
{
    [WebMethod]
    public string[] ProductSearch(string prefixText, int count)
    {
        MyDataContext db = new MyDataContext();

        string[] products = (from product in db.Products
                             where product.ProductName.StartsWith(prefixText)
                             select product.ProductName).Take(count).ToArray();
        return products;
    }
}

任何人都可以帮我解决这个问题吗？我正在使用这个，这样他们就可以开始打字，而不是有一英里长的下拉列表......

Answer 1

自动完成控件会将 json 对象发布到“servicePath/serviceMethod”，因此首先将 servicePath 设置为您的控制器，并将 serviceMethod 选项设置为您的操作名称。

然后定义这个类：

public class AutoCompleteRequest
{
    public string PrefixText { get; set; }
    public int Count { get; set; }
} 

因为这是自动完成控件发布到控制器的 json 对象。

然后定义一个 JsonModelBinder：

public class JsonBinderAttribute : CustomModelBinderAttribute
{
    public override IModelBinder GetBinder()
    {
        return new JsonModelBinder();
    }

    public class JsonModelBinder : IModelBinder
    {
        public object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
        {
            try
            {
                var inputStream = controllerContext.HttpContext.Request.InputStream;
                using (var sr = new StreamReader(inputStream))
                {
                    var json = sr.ReadToEnd();
                    return JsonConvert.DeserializeObject(json, bindingContext.ModelType);
                }
            }
            catch
            {
                return null;
            }
        }
    }
}

这个使用 Json.Net 作为反序列化器。

然后像这样定义您的操作：

    public virtual JsonResult SearchA([JsonBinder]AutoCompleteRequest post)
    {
        var data = repository.Query<A>()
            .Where(s => s.Name.StartsWith(post.PrefixText))
            .Take(post.Count)
            .Select(s => s.Name)
            .ToArray();
        return Json(data);
    }

注意我如何在 AutoCompleteRequest 参数上使用 JsonBinderAttribute 以及如何返回 Json 字符串数组。

编辑

我在这里写了一篇后续博客文章：http://devcarl.posterous.com/how-to-use-ajax-library-4-autocomplete-with-a

Answer 2

虽然这并不能直接回答您的问题，您是否考虑过使用 Jquery 自动完成控件？

根据我的经验，它似乎更灵活，您可以将其与现有服务链接起来，并对返回的数据有更多的控制。如果有帮助的话，这里是链接。