ASP.NET MVC：数据录入形式的搜索 [英] ASP.NET MVC: search in data entry form

问题描述

和感谢您的阅读。

我建立一个数据输入表单。我试图想出一个办法，让用户提供的条件（比如姓），搜索EMPLOYEE表为符合条件的所有员工，在某种程度上，他们可以选择正确的员工显示的结果，通在该员工返回到数据输入表单的ID，使他们能够完成记录并保存。

I am building a data entry form. I am trying to figure out a way to let the user to provide a criteria (last name for instance), search the employee table for all employees that match the criteria, display the result in a way they can select the correct employee, and pass the the ID of that employee back to the data entry form so they can complete the record and save it.

感谢

推荐答案

要做到这一点是与jQuery的的自动完成插件。让你的表单，允许搜索和存储的ID的隐藏字段的文本框。通过AJAX使用自动完成，我们将根据搜索条件返回的JSON名称/ ID对的列表。具有自动完成设置强制从列表中选择 - 这将禁止在该领域的任何不匹配的文本。当用户从列表中选择一个项目有结果函数店隐藏字段关联的ID。在使用表单提交的隐藏字段，以获得员工的ID。

One way to do this would be with the jQuery autocomplete plugin. Have text box on your form that allows search and a hidden field that stores the id. Use autocomplete via AJAX to get a list of name/id pairs returned as JSON based on the search criteria. Have the autocomplete set up to force selection from the list -- which will disallow any non-matching text in the field. When the user selects an item from the list have the result function store the associated id in the hidden field. Use the hidden field on form post to get the ID of the employee.

它看起来是这样的：

查看

$('#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' />

控制器：

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, ... )
{
   ...
}

这篇关于ASP.NET MVC：数据录入形式的搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！