如何在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/