asp.net-mvc - 是否可以通过单击按钮获得 'Swap' 部分 View ？

Question

我目前有一个父 View ，其设计如下:

+----------------------------------------------+
|                    |           ___           |
|      ^             |          |   \          |
|     / \            |          |___/          |
|    /---\           |          |   \          |
|   /     \          |          |___/          |
|                    |                         |
|--------------------+-------------------------|  <--- Over View Of Page layout
|                    _____                     |
|                   /                          |
|                  |                           |
|                  |                           |
|                   \_____                     |
+----------------------------------------------+

其中 A、B 和 C 的“部分”由部分 View 组成。

在我的 A 部分中，我有两个按钮和(当前)一个局部 View :

+----------------------------------------------+--------------------------------
| BUTTON 1   | BUTTON 2  |                     |
|------------------------+---------------------|               ______ 
|                                              |              |      \
|           <content here>                     |              |       |   
|                                              |              |       |         
|                                              |              |------/        
|                                              |              |      \_________          
|                                              |           __________/
|                                         _____|__________/
|                       _________________/
|         _____________/
|________/

                   ^
                   |
                   |
        Close up of 'A' section

我目前按下按钮 1 并切换此 View 的可见性，使用:

HTML

<button class="myBtn" onclick="toggle_visibility('btn1Partial');">Arm Details</button><a>

Javascript:

<script type="text/javascript">
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
</script>

但是，我找不到使用第二个按钮实现此目的的方法，以便“删除”(未隐藏)第一个局部 View ，并用另一个按钮代替它。

我确信有一种方法可以使用 MVC 模式“正确地”做到这一点，但我似乎找不到它! :(

我想要做的就是将 A 部分的内容与另一个部分 View “交换”(实际上很像一个选项卡，但部分 View 在“重新出现”以显示最新信息时需要“重新调用” - 所以只需隐藏/showing 在这里不起作用)。

有什么建议？

编辑

这个问题的另一个方向也可能是“如何删除局部 View 并在其位置打开另一个 View ？”

Answer 1

这似乎是一个普遍的困惑。 View 、部分 View 等仅适用于服务器端。一旦您的页面在客户端的浏览器中呈现出来，它就只是一个网页。无论您在何处拥有多少部分 View ，在那个时候都只是 HTML。

因此，当您谈论替换此页面上的某个区域时，您就是在谈论交换 DOM 元素。这意味着您需要使用 JavaScript 来选择一些元素，例如 div包含要替换的内容。然后，以某种方式获取一些新的 HTML 内容，并将其添加到您选择的元素所在的 DOM 中。这个 HTML 可以在页面上创建，或者你可以通过 AJAX 返回到服务器来获取它。在您的场景中，您正在考虑使用 AJAX。

要使用 AJAX，您的服务器上需要一个端点，该端点将返回一些 HTML。在 ASP.NET MVC 术语中，这意味着您需要一个返回 PartialView 的操作。 .