使用 jquery - MVC 5 Razor 在自动完成文本框中选择后如何显示我的详细信息

Question

选择员工 ID 后如何显示我的详细信息（全名和部门）。我正在使用 MVC5 和 Razor

在这张图片中显示了我的主要表单

然后这是我的员工 ID（文本框 - 自动完成查找）

我创建了一个简单的 jquery，它在触发或更改员工 ID 时触发

 $(".employeeID").on("click", function () {
   var empid = $(this).val();


   if (empid != undefined)
   {
      //I don't know what to write here
      //but I break point here and it triggered
   }
 });

这里还有文本框员工 ID 的代码

@Html.TextBoxFor(model => model.EmployeeID, new { @class = "form-control employeeID", @placeholder = "Employee's ID", @id = "employeeid", @required = true })

全名和部门

@Html.DisplayFor(model => model.FullName)
@Html.DisplayFor(model => model.Department)

然后在选择员工 id 后，它将在数据库中查找员工及其部门的全名。

我仍然是 MVC 和脚本的业余爱好者 谁能帮我解决这个问题？

提前致谢

更新

            $('#employeeid').autocomplete(
            {
                source: '@Url.Action("EmployeeIDSearch", "Home")'
            }).focus(function () {
                $(this).autocomplete("search", " ")
            });

这是我的自动完成的 jquery。以下是我的员工 ID 的控制器

public ActionResult EmployeeIDSearch(string term)
    {
        // Get Tags from database
        using (var ctx = new DASH_FAEntities())
        {
            var tags = (from e in ctx.Employees
                        select e.EMT_EmployeeID.Trim()).ToList();

            return Json(tags.Where(t => t.ToLower().Contains(term.ToLower().Trim())).OrderBy(x => x),
                       JsonRequestBehavior.AllowGet);
        }
    }

我的员工表包含

• 员工编号
• 全名
• 部门

Answer 1

您需要处理 .select 事件并使用 ajax 调用控制器方法，该方法返回您要在 DOM 中更新的详细信息。

首先，您需要将@Html.DisplayFor() 方法输出的文本包装在一个元素中，以便可以选择它

<div id="fullname">@Html.DisplayFor(m => m.FullName)</div>
<div id="department">@Html.DisplayFor(m => m.Department)</div>

然后修改脚本为

var name = $('#fullname);
var department = $('#department);

$('#employeeid').autocomplete({
    source: '@Url.Action("EmployeeIDSearch", "Home")',
    select: function( event, ui ) {
        var ID = ui.item.value;
        $.getJSON('@Url.Action("Details")', { ID: ui.item.value }, function(data) {
            if (data) {
                name.text(data.name);
                name.text(data.department);
            }
        }); 
    }
})

控制器方法是（根据需要调整以适合您的属性名称）

public ActionResult Details(int ID)
{
    Employee employee = db.Employees.Where(e => e.EMT_EmployeeID == ID).FirstOrDefault();
    if (employee == null)
    {
        return Json(null, JsonRequestBehavior.AllowGet);
    }
    else
    {
        var data = new { name = employee.FullName, department = employee.Department };
        return Json(data, JsonRequestBehavior.AllowGet);
    }
}