MVC程序实现Autocomplete功能

简介: 原文:MVC程序实现Autocomplete功能为了加强MVC的功力,加强练习是少不了的事情。Insus.NET这次想实现文本框的autocomplete功能。在数据创建一张表[PinYin]:插入一些数据: INSERT INTO [dbo].
原文: MVC程序实现Autocomplete功能

为了加强MVC的功力,加强练习是少不了的事情。Insus.NET这次想实现文本框的autocomplete功能。

在数据创建一张表[PinYin]:


插入一些数据:

INSERT INTO [dbo].[PinYin] ([Word]) VALUES ('a'),('ai'),('an'),('ang'),('ao'),
('ba'),('bai'),('ban'),('bei'),('ben'),('bi'),('bian'),('bie'),('bin'),('bing'),
('ca'),('cai'),('cang'),('cao'),('ceng'),('cha'),('chai'),('che'),('chen'),('cheng'),('chong'),('chou'),
('fa'),('fan'),('fang'),('fei'),('fen'),('feng'),('ga'),('gai'),('gan'),('gang'),('gao'),('ge'),('gei'),
('gen'),('geng'),('gong'),('gou'),('gu'),('gua'),('guai')
GO
View Code


并创建一个存储过程usp_PinYin_GetWord:



在MVC应用程序的Models目录下,创建一个PinYin model:



读取数据库数据,创建一个Entity,展开Entities目录:



接下来,在应用程序右键,启动Manage NuGet Packages...



安装jQuery UI:




它会把相关的css和js分别安装在应用程序的Content:


和scripts目录:


接下来,我们需要创建一个Handler,它有点像Service一样,请求与处理用户所在文本框输入的文本。你先要在应用程序下创建一个Handlers目录,如果存在,可略过此步。


注意,上图代码第#10行代码,如果修改与添加了命名空间namespace,你还得打开Handler.ashx的markup添加与修改namespace:



现在我们只是练习,在Controllers目录下,打开HomeController控制器创建一个ActionResult:

 

 一切写好,就可以写View视图了:


上面的代码中,#5步可以根据实际需要,最终显示于文本框中的是值还是文本。

实时操作演示一下:

目录
相关文章
|
1月前
|
前端开发 Java 开发者
Spring MVC:构建高效、可维护、可扩展的Web应用程序
Spring MVC:构建高效、可维护、可扩展的Web应用程序
31 0
|
1月前
|
前端开发 安全 Java
SpringMVC基础篇:第一个MVC程序和细节分析
SpringMVC基础篇:第一个MVC程序和细节分析
|
21天前
|
存储 JSON 前端开发
利用Spring MVC开发程序2
利用Spring MVC开发程序
23 1
|
21天前
|
设计模式 JSON 前端开发
利用Spring MVC开发程序1
利用Spring MVC开发程序
22 0
|
7月前
|
设计模式 存储 前端开发
介绍Spring MVC框架,以及如何使用它构建Web应用程序。
Spring MVC 是一个用于构建 Java Web 应用程序的强大框架。它基于经典的 MVC(Model-View-Controller)设计模式,提供了一种结构化的方法来开发可维护和可扩展的 Web 应用程序。在这篇文章中,我们将深入介绍 Spring MVC 框架,包括其核心概念、工作原理以及如何使用它构建 Web 应用程序。
100 0
|
1月前
|
存储 设计模式 前端开发
请解释 Web 应用程序的 MVC(模型-视图-控制器)架构。
【2月更文挑战第26天】【2月更文挑战第89篇】请解释 Web 应用程序的 MVC(模型-视图-控制器)架构。
|
7月前
|
存储 前端开发 Java
Java Web框架,如Spring MVC,是一种用于构建Web应用程序的软件框架:学生考试Web应用程序
Java Web框架,如Spring MVC,是一种用于构建Web应用程序的软件框架。它们提供了一种结构化的方法,用于处理Web请求、生成动态内容和管理Web应用程序的组件。以下是关于Java Web框架和Spring MVC的详细解释,以及如何使用Spring MVC创建一个简单的Web应用程序的示例代码。
|
12月前
|
前端开发 Java 应用服务中间件
《Spring MVC》 第二章 让程序run起来(下)
《Spring MVC》 第二章 让程序run起来(下)
66 0
|
12月前
|
开发框架 前端开发 Java
《Spring MVC》 第二章 让程序run起来(上)
《Spring MVC》 第二章 让程序run起来(上)
63 0
|
前端开发 安全 Java
【Spring MVC学习笔记 二】构建第一个Spring MVC框架程序
【Spring MVC学习笔记 二】构建第一个Spring MVC框架程序
121 0

热门文章

最新文章