如何在Razor视图中实现这种类型的动态UI？

Question

我首先要说的是，我是Web开发和MVC的绝对新手。

我想为订阅者页面（处理电子邮件营销的MVC4应用程序的一部分）实现一个视图。我想要实现的是：

1）当用户点击“+添加列表”按钮时，左侧会出现一个新的类别，光标应该闪烁，这意味着它应该准备好从用户接收该类别的名称。我还希望每当用户将鼠标悬停在左侧的任何类别名称上时，都会出现一个包含两个按钮（编辑和删除）的小栏，应该允许用户编辑类别名称或删除该类别。我想要的是所有这些必须在不重新加载页面的情况下发生。

2）当用户点击“+添加联系人”按钮时，会出现一个包含两个选项卡的弹出对话框，允许用户手动输入详细信息或上传CSV以捕获详细信息。每当用户在弹出的对话框中单击“添加联系人”按钮或“上传并添加联系人”时，我希望新联系人显示在图片中显示的联系人列表区域中（再次，无需重新加载页面）。我也想为联系人提供相同的悬停栏（与类别相同）。

我对如何在Razor视图中实现它感到困惑？我该怎么用--JavaScript / jQuery / AJAX？

我很丢失。有人可以指导我一点点，以便我可以继续并完成我的第一个MVC4项目吗？

Answer 1

你需要一些像jQuery UI或者Kendo UI这样的javascript库，我建议你现在使用jQuery UI。他们有很多小部件，但看看这些。并且请记住，cshtml视图可以像html页面一样，你可以拥有你想要的所有标签，css和javascript：

http://jqueryui.com/dialog/

http://jqueryui.com/tabs/

http://jqueryui.com/