作者：黄志鹏


在我们做项目的时候经常需找出我们需要的数据，而因为在项目的表格中有时会有成千上万条数据，我们不可能一条一条数据的去查找，在这个时候我们就需要一个搜索框，这个搜索框可以根据某些条件来查找数据，比如可以通过姓名或者通过民族作为查找条件来查找出我们需要的数据。

接下来我们就说说相应的代码，我们的思路就是先在控制器那边写查询的语句，在查询的语句中我们就可以写根据相应的内容来写搜索框的查询语句。然后我们在视图的页面条件数据即可。

接下来我们先把页面布局完成我们先来看看搜索框的样式

<div class="input-groupsousuo">

   <input type="text" class="form-control
     col-sm-8" id=" serzhonntuuid "style="background:#11bde4"placeholder="请输入卡号"><div
      class="input-group-prepend ">  <button class="btn
      btn-outline-secondary sousuo" onclick="tabTitleInforSearch()">搜索 
                                         
        </button>                                               
           </div>

这里我们们页面布局的代码太多所以只给出部分的代码。页面的样式代码当然也包括我们的Layui的表格渲染，这里我们用Layui的插件来渲染出我们的表格，同时也可以调整我们表格出来样式。页面样式的代码写好后我们就转到控制层那边开始写我们的查询语句。

在这里呢我们先来看serzhonntuuid，在这里他表示的是我们搜索框的ID，在查询的方法中我们让其成为一个string类型的参数，等会我们在视图那边呢也有返回这个参数。

在下面的这个查询方法中它是一个连表查询，接下来我们来看看搜索框的关键代码，

zomm = zomm.Where(p => p.Name.Contains(serzhonntuuid));

这句代码的意思是搜索框可以根据名字来查找数据，之后的接下来的代码里就是表格数据的分页操作。

相应代码如下：

public ActionResult xunmmran(LayuiTablePage layuiTablePage, string serzhonntuuid)

{

        ReturnJson returnJson = new ReturnJson();



        var zomm = from tbjiesuan in myModels.jiesuan

                   orderby tbjiesuan.jiesuan1 descending

                   select new zhontu

                   {

jiesuan1=tbjiesuan.jiesuan1,

zhonxiyaofenleiID=tbjiesuan.zhonxiyaofenleiID

};

        if (!string.IsNullOrEmpty(serzhonntuuid))

        {

            serzhonntuuid =

serzhonntuuid.Trim();

zomm = zomm.Where(p =>

p.jine.Contains(serzhonntuuid));

}

        List<zhontu> Employee = zomm

.Skip(layuiTablePage.GetStartIndex())

.Take(layuiTablePage.limit)

.ToList();

LayuiTableData<zhontu> layuiTableData = new LayuiTableData<zhontu>();

        layuiTableData.count =

zomm.Count();

layuiTableData.data = Employee;

        return Json(layuiTableData, JsonRequestBehavior.AllowGet);

在控制层这边写好查询的代码后，我们就转到视图这边，接下来我们就写提交的代码，我们在提交的方法中直接获取到搜索框的ID，然后直接提交和刷新表格即可。

var serid = $("# serzhonntuuid ").val();
bingrengziliao =
 layuiTable.reload(‘bingrengziliao’,{
url:
 “/fuzhuguanli/dengji/yuangong”,