Question

我在输入内容时有一个文本框一个员工姓名应该在数据库中查找并显示员工图片及其第一和第二个名称。我怎么会这样做，我已经看到一些帖子在线，但我不明白jquery获取其数据（url）的概念。这就是我所做的。

<p>   
@Html.TextBox("", new { id="staff" })
</p>

这是我的jquery，我从字面上复制并改变了一些在线答案的一些东西，这里的一些东西可能不需要它所以随意编辑：

$(document).ready(function () {
      $("#staff").autocomplete({
        source: function (request, response) {
            $.getJSON("/Forums/Ajax/GetTags", { term: request.term }, function (data) {
                response($.map(data, function (el) {
                    return {
                        label: el.TagName,
                        value: el.TagId
                    };
                }));
            });
        },

    });
});

这就是我的模型的样子：

    public string ID{ get; set; }
    public string Name{ get; set; }
    public string SecondName { get; set; }
    public string Picture{ get; set; }

现在我如何将我的模型传递给控制器和控制器到我的javascript，而且我想在我的文本框中有一个占位符说＆＃34;请输入员工姓名＆＃34;。任何人都可以帮我实现这个目标吗？

Answer 1

首先，让我们从占位符开始

 <p>   
     @Html.TextBox("staff", new {value="Please Enter Staff Name" })
</p>

您的行为可能如下所示

  public ActionResult GetTags(string term){
  var terms=from entry in db.Entities where entry.name.StartWith(term) 
            select new new MyModel(){
                             ID=entry.ID,
                             Name =entry.Name,
                             SecondName =entry.SecondName ,
                             Picture=entry.Picture

                           }
  return Json(terms,"text/json",JsonRequestBehavior.AllowGet);

您的jQuery可能看起来像这样

    $(document).ready(function () {
    $("#staff").autocomplete({
    source: function (request, response) {

        $.getJSON("/Forums/Ajax/GetTags", { term: request.term }, function (data) {
            response($.map(data, function (el) {
                return {
                    label: el.Name,
                    value: el.ID,
                    SecondName: el.SecondName,
                    Name=el.Name/*, SO ON*/
                };
            }));
        });
    },
     create: function () {
        $(this).data('ui-autocomplete')._renderItem = function (list, item) {
            return $('<li>')
                .append("<a><div><img src='" +item.Picture+ "' />"
                                             +item.Name+" "+item.SecondName+"</div></a>")
                .appendTo(list);
        };
    },
    select: function (event, ui) {   
       alert("Selected item id : " + ui.item.SecondName);
        return false;//dont follow the link
    }

   });
});

希望它会对你有所帮助。

在MVC中自动完成

1 个答案: