博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
MVC程序实现Autocomplete功能
阅读量:7089 次
发布时间:2019-06-28

本文共 1004 字,大约阅读时间需要 3 分钟。

为了加强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步可以根据实际需要,最终显示于文本框中的是值还是文本。
实时操作演示一下:

转载地址:http://atfql.baihongyu.com/

你可能感兴趣的文章
linux用户登录检测发送邮件提醒
查看>>
个人见解 web性能优化
查看>>
中断优先级和中断线程优先级
查看>>
TFS 安装使用GCC4.4版本
查看>>
svn与web 同步更新
查看>>
通用社区登陆组件技术分享(开源)下篇:OAuth 源码下载及原理解说
查看>>
Windows Phone 7 程序等待页面的处理
查看>>
java.io.IOException: Connection reset by peer
查看>>
linux下的精确wait
查看>>
MySQL常见命令 [转]
查看>>
【大前端之打通账号系统】passport应该如何落地?
查看>>
虚拟化技术总览
查看>>
飞天,进化!
查看>>
20.3. PHP_INI
查看>>
72.11. this is incompatible with sql_mode=only_full_group_by
查看>>
C# 海康DVR客户端开发系列(3)—— 连接DVR和图像预览
查看>>
为创业我做了十年的程序员,你告诉我“程序员不适合创业”?!
查看>>
mokoid android open source HAL hacking in a picture
查看>>
RCF库ClientStub.setAutoReconnect
查看>>
Google Chrome Resize Plugin
查看>>