码迷,mamicode.com
首页 > Web开发 > 详细

MVC程序实现Autocomplete功能

时间:2014-08-07 12:22:59      阅读:243      评论:0      收藏:0      [点我收藏+]

标签:blog   http   io   数据   2014   art   ar   cti   

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

在数据创建一张表[PinYin]:
bubuko.com,布布扣

插入一些数据:

bubuko.com,布布扣
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


并创建一个存储过程usp_PinYin_GetWord:
bubuko.com,布布扣


在MVC应用程序的Models目录下,创建一个PinYin model:
bubuko.com,布布扣


读取数据库数据,创建一个Entity,展开Entities目录:
bubuko.com,布布扣


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


安装jQuery UI:
bubuko.com,布布扣



它会把相关的css和js分别安装在应用程序的Content:
bubuko.com,布布扣

和scripts目录:
bubuko.com,布布扣

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


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


bubuko.com,布布扣


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

 

 一切写好,就可以写View视图了:
bubuko.com,布布扣


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

实时操作演示一下:
bubuko.com,布布扣

MVC程序实现Autocomplete功能,布布扣,bubuko.com

MVC程序实现Autocomplete功能

标签:blog   http   io   数据   2014   art   ar   cti   

原文地址:http://www.cnblogs.com/lschenblog/p/3896456.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!