Question

我目前有一个父视图，其设计如下：

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

A，B和C＆＃39;部分＆＃39;由部分观点组成。

在我的A部分中，我有两个按钮和（当前）一个局部视图：

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

                   ^
                   |
                   |
        Close up of 'A' section

我目前按下按钮1并使用以下方式切换此视图的可见性：

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>

然而，我无法通过第二个按钮找到实现此目的的方法，以便第一个部分视图被移除＆＃39; （没有隐藏），另一个取代它。

我确定有一种方法可以使用MVC模式正确地做到这一点，但我似乎无法找到它！：（

我想做的就是交换＆＃39;来自A部分的内容带有另一个局部视图（非常类似于标签，但部分视图需要被重新调用＆＃39;当他们重新出现以显示最新信息时 - 如此简单隐藏/显示赢得了真正的工作）。

有什么建议吗？

修改

此问题的另一个方向也可能是“如何删除局部视图并在其位置打开另一个视图？＆＃39;

Answer 1

这似乎是一种常见的混乱。视图，部分视图等仅适用于服务器端。一旦您的页面在客户端的浏览器中呈现，它就只是一个网页。你有多少局部视图无关紧要，那时只是HTML。

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

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

的操作

Answer 2

是的，你可以这样做。

我使用jQuery load函数完成了此操作。

点击按钮，只需$('#idOfDivHere').load(url...)

它会直接进入占位符div。网址是正常的controller/action等 - 无论您想要/需要将html放入占位符。

当然，如果你在那里加载那些不应该存在的东西，你可能会破坏你的DOM，但如果你对你的局部视图小心，这应该可以正常工作。

是否有可能交换＆＃39;单击按钮的部分视图？

2 个答案: