天天看點

MVC程式實作Autocomplete功能

為了加強MVC的功力,加強練習是少不了的事情。Insus.NET這次想實作文本框的autocomplete功能。

在資料建立一張表[PinYin]:

MVC程式實作Autocomplete功能

插入一些資料:

MVC程式實作Autocomplete功能
MVC程式實作Autocomplete功能

View Code

并建立一個存儲過程usp_PinYin_GetWord:

MVC程式實作Autocomplete功能

在MVC應用程式的Models目錄下,建立一個PinYin model:

MVC程式實作Autocomplete功能

讀取資料庫資料,建立一個Entity,展開Entities目錄:

MVC程式實作Autocomplete功能

接下來,在應用程式右鍵,啟動Manage NuGet Packages...

MVC程式實作Autocomplete功能

安裝jQuery UI:

MVC程式實作Autocomplete功能

它會把相關的css和js分别安裝在應用程式的Content:

MVC程式實作Autocomplete功能

和scripts目錄:

MVC程式實作Autocomplete功能

接下來,我們需要建立一個Handler,它有點像Service一樣,請求與處理使用者所在文本框輸入的文本。你先要在應用程式下建立一個Handlers目錄,如果存在,可略過此步。

MVC程式實作Autocomplete功能

注意,上圖代碼第#10行代碼,如果修改與添加了命名空間namespace,你還得打開Handler.ashx的markup添加與修改namespace:

MVC程式實作Autocomplete功能
MVC程式實作Autocomplete功能

現在我們隻是練習,在Controllers目錄下,打開HomeController控制器建立一個ActionResult:

MVC程式實作Autocomplete功能

 一切寫好,就可以寫View視圖了:

MVC程式實作Autocomplete功能

上面的代碼中,#5步可以根據實際需要,最終顯示于文本框中的是值還是文本。

實時操作示範一下:

MVC程式實作Autocomplete功能