[英]How can I display my detail after choosing in autocomplete textbox using jquery - MVC 5 Razor
How can I display my detail (Full name and Department) after choosing an Employee ID. 选择员工ID后如何显示我的详细信息(全名和部门)。 I am using MVC5 and Razor
我正在使用MVC5和Razor
In this image shows my main form 在此图中显示了我的主要形式
Then this my employee id (textbox - autocomplete lookup) 然后,这是我的员工ID(文本框-自动完成查找)
I have created a simply jquery where it triggered when employee id is been triggered or changed 我创建了一个简单的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
}
});
here also the code of the textbox employee id 这也是文本框员工ID的代码
@Html.TextBoxFor(model => model.EmployeeID, new { @class = "form-control employeeID", @placeholder = "Employee's ID", @id = "employeeid", @required = true })
for the full name and department 全名和部门
@Html.DisplayFor(model => model.FullName)
@Html.DisplayFor(model => model.Department)
then after choosing the employee id it will look up in the database for getting the full name of the employee and its department. 然后,在选择了员工ID之后,它将在数据库中查找以获取员工及其部门的全名。
i'm still amateur in MVC and scripting can anyone help me about this? 我还是MVC的业余爱好者,脚本编写人员可以帮助我吗?
thanks in advance 提前致谢
$('#employeeid').autocomplete(
{
source: '@Url.Action("EmployeeIDSearch", "Home")'
}).focus(function () {
$(this).autocomplete("search", " ")
});
this is the jquery for my autocomplete. 这是我的自动完成的jQuery。 and below is the controller for my employee id
下面是我的员工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);
}
}
My Employee Table contains 我的员工表包含
You need to handle the .select
event and use ajax to call a controller method that returns the details that you want to update in the DOM. 您需要处理
.select
事件,并使用ajax调用控制器方法,该方法返回要在DOM中更新的详细信息。
Firstly you will need to wrap the text output by the @Html.DisplayFor()
method in an element so that it can be selected 首先,您需要将
@Html.DisplayFor()
方法输出的文本包装在一个元素中,以便可以选择它
<div id="fullname">@Html.DisplayFor(m => m.FullName)</div>
<div id="department">@Html.DisplayFor(m => m.Department)</div>
Then modify the script to 然后将脚本修改为
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);
}
});
}
})
And the controller method would be (adjust to suit your properties names as required) 控制器方法将是(根据需要调整以适合您的属性名称)
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);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.