如何在Razor視圖中實現這種類型的動態UI？

Question

我會開始說我是web開發和MVC的絕對新手。

我想爲訂閱者頁面（處理電子郵件營銷的MVC4應用程序的一部分）實現視圖。我想實現的是：

1）當用戶點擊「+添加列表」按鈕時，一個新的類別應該出現在左側，光標應該閃爍，這意味着它應該準備好接收名稱爲來自用戶的類別。我還希望每當用戶將鼠標懸停在左側的任何類別名稱上時，都應該出現一個包含兩個按鈕（編輯和刪除）的小欄，它應該讓用戶編輯類別名稱或刪除該類別。我想要的是，所有這些都必須在不重新加載頁面的情況下發生。

2）當用戶點擊「+添加聯繫人」按鈕時，會彈出一個包含兩個選項卡的對話框，讓用戶手動輸入詳細信息或上傳CSV以捕獲詳細信息。每當用戶點擊彈出對話框中的「添加聯繫人」按鈕或「上傳並添加聯繫人」時，我想讓新聯繫人顯示在圖片中顯示的聯繫人列表區域中（再次重新加載該頁面）。我也想爲聯繫人使用相同的懸停欄（與類別相同）。

我很困惑，如何實現這在Razor視圖？我該用什麼 - JavaScript/jQuery/AJAX？

我幾乎失去了。有人能引導我一點點，以便我可以繼續並完成我的第一個MVC4項目嗎？

Answer 1

您需要一些JavaScript庫，比如jQuery UI或者Kendo UI，我建議現在使用jQuery UI。他們有很多小工具，但看看這些。並牢記，一個CSHTML視圖可以在像HTML頁面來看看，你可以擁有所有的標籤，CSS和JavaScript你想有：

http://jqueryui.com/dialog/

http://jqueryui.com/tabs/

http://jqueryui.com/