asp.net-mvc - ASP.NET MVC : search in data entry form

Question

并感谢您的阅读。

我正在构建一个数据输入表单。我试图找出一种方法让用户提供一个条件(例如姓氏)，在员工表中搜索符合条件的所有员工，以他们可以选择正确员工的方式显示结果，然后通过将该员工的 ID 返回到数据输入表单，以便他们可以完成记录并保存。

谢谢

Answer 1

一种方法是使用 jQuery autocomplete插入。在您的表单上有允许搜索的文本框和一个存储 id 的隐藏字段。通过 AJAX 使用自动完成功能，根据搜索条件获取以 JSON 形式返回的名称/ID 对列表。将自动完成设置为强制从列表中选择——这将禁止字段中的任何不匹配文本。当用户从列表中选择一个项目时，结果函数将关联的 id 存储在隐藏字段中。使用表单帖子上的隐藏字段获取员工的 ID。

它可能看起来像:

看法

$('#searchBox').autocomplete( '/Employees/Search', {
    dataType: 'json',
    max: 25,
    minChars: 2,
    cacheLength: 1,
    mustMatch: true,
    formatItem: function(data,i,max,value) {
        return value;
    },
    parse: function(data) {
        var array = new Array();
        for (var i=0; i < data.length; i++) {
            var datum = data[i];
            var display = datum.FirstName + ' ' + datum.LastName;
            array[array.length] = { data: datum, value: display, result: display };
        }
    }
});

$('#searchBox').result( function(event, data, formatted) {
    if (data) {
       $('#employeeID').val( data.EmployeeID );
    }
});

$('form').submit( function() {
    if (!$('#employeeID').val()) {
       alert( 'You must select an employee before clicking submit!' );
       return false;
    }
});


<input type='text' id='searchBox' />
<input type='hidden' id='employeeID' name='employeeID' />

Controller :

public ActionResult Search( string q, int limit )
{
    var query = db.Employees.Where( e => e.LastName.StartsWith( q ) )
                            .OrderBy( e => e.LastName )
                            .Select( e => new
                                 {
                                     FirstName = e.FirstName,
                                     LastName = e.LastName,
                                     EmployeeID = e.EmployeeID
                             });
    if (limit > 0)
    {
        query = query.Take(limit);
    }

    return Json( query.ToList() );
}

public ActionResult SomeAction( int employeeID, ... )
{
   ...
}