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步可以根據實際需要,最終顯示於文本框中的是值還是文本。

實時操作演示一下:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM