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步可以根据实际需要,最终显示于文本框中的是值还是文本。

实时操作演示一下:

目录
打赏
0
0
0
0
213
分享
相关文章
Spring MVC:构建高效、可维护、可扩展的Web应用程序
Spring MVC:构建高效、可维护、可扩展的Web应用程序
61 0
J2EE自定义mvc【框架配置及功能】
1、在增删改的方法里面我们这两行代码是一样的、重复的。类里面增加了一个通用的增删改的方法,我们在。我们新建一个web包,在里面新建一个。进行一个搜索,新增、修改、删除。进行一个通用的增删改的方法。BookDaoTest测试。测试我们的数据库能否连接。增加,修改的jsp界面。我们删除ID:16、22。导入之后我们选中所有的。2、代码逻辑是重复的。书籍名:圣墟1234。
SpringMVC基础篇:第一个MVC程序和细节分析
SpringMVC基础篇:第一个MVC程序和细节分析
一款基于 .NET MVC 框架开发、功能全面的MES系统
一款基于 .NET MVC 框架开发、功能全面的MES系统
深入理解MVC设计模式:构建高效Web应用程序的基石
【7月更文挑战第4天】在软件工程领域,设计模式是解决常见问题的一系列经过验证的方法。其中,Model-View-Controller(MVC)设计模式自诞生以来,便成为了构建用户界面,特别是Web应用程序的黄金标准。MVC通过将应用程序逻辑分离为三个核心组件,提高了代码的可维护性、可扩展性和重用性。本文将深入探讨MVC设计模式的原理,并通过一个简单的代码示例展示其应用。
244 0
服装库存管理系统 Mybatis+Layui+MVC+JSP【完整功能介绍+实现详情+源码】
该博客文章介绍了一个使用Mybatis、Layui、MVC和JSP技术栈开发的服装库存管理系统,包括注册登录、权限管理、用户和货号管理、库存管理等功能,并提供了源码下载链接。
服装库存管理系统 Mybatis+Layui+MVC+JSP【完整功能介绍+实现详情+源码】
利用Spring MVC开发程序2
利用Spring MVC开发程序
62 1
介绍Spring MVC框架,以及如何使用它构建Web应用程序。
Spring MVC 是一个用于构建 Java Web 应用程序的强大框架。它基于经典的 MVC(Model-View-Controller)设计模式,提供了一种结构化的方法来开发可维护和可扩展的 Web 应用程序。在这篇文章中,我们将深入介绍 Spring MVC 框架,包括其核心概念、工作原理以及如何使用它构建 Web 应用程序。
180 0
利用Spring MVC开发程序1
利用Spring MVC开发程序
69 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等