在 ASP.NET MVC 4 中实现搜索功能

• 下载源代码 - 9.5 MB

我们将要涵盖的内容

* 在本教程中，我们将介绍如何在 ASP.NET MVC 4 中实现搜索功能。在我们的 MVC Web 应用程序中，我们经常需要添加功能来搜索数据库对象，以查找特定数据，例如查找姓名以“N”开头的员工，或者查找性别为男性的员工的数据。

---

为此应用程序创建数据库

1. 首先创建数据库

   * 打开 Microsoft SQL Server。单击“新建查询”。现在执行下面的查询来创建数据库。

   ---

   Create Database searchingInmvc 

   

2. 然后按 F5。这将成功创建数据库。

创建表并插入演示数据

create table tblEmployee        //creating table 
(
ID int identity primary key,
Name nvarchar(50), 
Gender nvarchar(50),
Email nvarchar(50)
) 

// 插入演示数据

在这里，我们在数据库表中插入 4 行

insert into tblEmployee values('John','Female','john@geeksprogrammings.blogspot.in')
insert into tblEmployee values('funky','Male','funky@geeksprogrammings.blogspot.in')
insert into tblEmployee values('wiley','Male','wiley@geeksprogrammings.blogspot.in')
insert into tblEmployee values('ceren','Female','ceren@geeksprogrammings.blogspot.in')

在 Visual Studio 中创建新的 MVC 4 应用程序

1. 启动 Visual Studio，语言选择为 C#
2. 单击“文件” --> 然后单击“新建项目”
3. 向下滚动并选择 ASP.NET MVC 4 Web 应用程序

   

4. 输入适当的名称、路径和解决方案名称，然后按 Enter
5. 选择“空模板”
6. 选择 Razor 视图引擎并按 Enter
7. 现在启动新的 MVC 4 Web 应用程序。

向 MVC 4 应用程序添加模型

1. 在解决方案资源管理器中 -- > 右键单击“模型” --> 然后单击“新建项”

   

2. 然后选择 ADO.NET 实体数据模型 --.> 赋予它一个有效的名称，例如“sampledatamodel”。
3. 单击 Add

   

4. 现在将出现一个对话框，选择数据库连接到 SQL Server，并为您的连接字符串命名，该名称将赋予 web.config 文件中的连接字符串。

   

5. 单击“下一步”。
6. 现在在下一个对话框中，您将看到数据库表中可用的表。选择您的表。

   

7. 现在单击“完成”。
8. 现在生成了表的实体模型，您可以在此处将数据库重命名为“Employee”。



9. 现在模型已成功添加。

向 MVC 4 应用程序添加控制器和视图

向数据库添加控制器

1. 右键单击解决方案文件夹中的 Controllers 文件夹。
2. 单击“添加” --> 然后单击“控制器”

   

3. 现在出现“添加控制器”对话框
4. 给您的控制器起一个名字，例如“HomeController”
5. 在模板中，选择“具有使用实体框架的读取/写入和视图的 MVC 控制器”
6. 选择此模板的原因是它将自动生成一些页面，用于插入、删除、更新与此控制器关联的模型的模型数据
7. 现在提供我们在上一步中添加的模型名称“Employee”
8. 现在从下拉菜单中选择 dbcontext 类，最后单击“添加”
9. 这会自动在 views 文件夹中为插入、更新、删除和索引视图添加视图，该文件夹位于控制器命名的文件夹下。

   

10. 现在运行您的应用程序。这将给出以下输出

    

为应用程序添加样式和外观

因此，我们将搜索数据库并从数据库中检索数据，然后向用户显示检索到的结果。为此，我们必须获取一些控件和代码。我们将要为该应用程序提供的 GUI 设计如下

1. 在解决方案资源管理器中的“索引”视图下，双击 Index.cshtml
2. 现在在“<h2>Index</h2>”这一行之前，添加一行

   <div style='font-family:Arial'>

   并在表格标签之后代码的下方关闭此 div

   其他更新在演示项目中。下载并使用它。

3. 使用上传文件中 index.cshtml 中的代码更新解决方案资源管理器中视图文件夹下的 Index.cshtml 文件。

   

代码描述

在附加文件中的代码中，我们使用了 Razor 代码，并且没有使用我们通常在 HTML 中使用的 <form> 标签，而是使用了以下 HTML 帮助程序

@using (Html.BeginForm ("Index","Home",FormMethod.Get ))
{
<b>Search by:</b>@Html.RadioButton("searchBy","Name")<text> Name</text>
@Html.RadioButton("searchBy","Gender")<text>Gender</text><br />
@Html.TextBox("Search");<input type="submit" value="Search" />
 }

在 Html.BeginForm ("Index","Home",FormMethod.Get )

在这里，Html.BeginForm 用于代替使用 form 标签。

Html.BeginForm 接收 3 个参数

• 在这里，“Index”是要在向服务器发布表单时执行的操作的名称
• 在这里，“Home”是当单击此链接时将重定向到的控制器的名称
• 在这里，“FormMethod.Get”是我们发布数据时应用的一种编码方法

现在打开控制器并将以下代码添加到 home 控制器的 Index 操作中

if (searchby == "Gender")
{
return View(db.Employees.Where(x => x.Gender == search || search ==null).ToList());
}
else
{
return View(db.Employees.Where(x => x.Name.StartsWith(search)).ToList());
}