2014-02-13 18 views
0

我正在用ASP MVC4應用程序製作Web應用程序。我也使用TwitterBootstrapMVC API。我正在嘗試查看頂部的下拉列表以及文本框。下面是一張人的桌子。下拉列表將包含表格的列標題。用戶在下拉列表中選擇一列後,可以在文本框中輸入以縮小下表中的項目列表中的結果。ASP MVC 4作爲用戶類型更改列表中的項目

例如。桌子上有很多人。用戶然後在下拉列表中選擇「姓氏」。然後,他繼續在文本框中輸入Smith。當他鍵入每個字符時,表格的結果會因爲只顯示姓氏中帶有「s」的人而變窄。當「m」被輸入到文本框中時,人員列表被縮小爲僅顯示其姓氏中帶有「sm」的人等。

我知道如何製作表格,文本框等。我不知道如何在表格中更改結果,因爲我在文本框中輸入而不重新加載頁面。

+0

你需要ajax,你也需要一些javascript,需要一個例子嗎? –

回答

2

您可以使用jQuery的ajax和一個操作方法,該方法返回包含搜索數據和html表結構的部分視圖。這裏有一個簡短的樣本:

public ActionResult Search(string searchTerm){ 
    var model = db.Users.Where(u => u.LastName.contains(searchTerm)); 
    return PartialView("_Students", model); 
} 

腳本

$("#textBoxId").on("keyup change", function() { 
    var searchTerm = $(this).val(); 
    $.get("/Controller/Search", { searchTerm: searchTerm }, function(data) { 
     $("#tableId").html(data); 
    }); 
}); 

你只需要另一個參數添加到您的操作方法來檢查什麼在下拉列表中選擇。

閱讀更多:https://api.jquery.com/jQuery.get/

+0

不會回到控制器刷新頁面? – lamilambkin

+0

否。這是$ .get的用途,它允許您在不刷新頁面的情況下調用服務器中的方法。 – WannaCSharp

+0

我不熟悉你提供的腳本代碼。我也使用剃鬚刀作爲我的視圖引擎。我將在哪裏添加腳本代碼?以某種方式進入視圖? – lamilambkin

0

什麼你想實現是自動完成文本框。 jQuery有一個不錯的。實施起來相當簡單。您可以試用ASP.NET AJAX Control toolkit。我自己沒有嘗試過這個,所以我不確定它是多麼的簡單/友好。

+0

不完全。我想讓texbox簡單地縮小人們的搜索結果。 – lamilambkin

+0

這就是自動完成文本框的功能。這是一個文本框,輸入時會彈出一個可用選項列表,在您鍵入時縮小它們的範圍。除非我誤解你的問題。 – user2359695