Javascript 在客户端对页面配置进行排序的最佳方法

我正在进行一个MVC项目，在该项目中，我在一个表中的几个局部视图中显示一个ViewModel。我有一个控件，用户可以在其中更改表格的显示方式，如下所示：

<table>
 <tr>
  <td>
    partial view 1  partial view 2
  </td> 
 </tr>
 <tr>
  <td>
    partial view 3  partial view 4
  </td> 
 </tr>
</table>

局部视图1局部视图2
局部视图3局部视图4

或

局部视图1
局部视图2
局部视图3
局部视图4

每当用户想要更改视图的显示方式时，他必须单击from的submit按钮，应用程序必须向服务器发出请求，获取结果，并根据标志（TableDisposition=1或2）加载一些div

我知道这不是最好的方法，但我缺乏客户端编码（javascript/jquery）方面的知识，这使得我不可能以更有效的方式完成这项工作

任何意见都将不胜感激

---

编辑：在注释中解决。

首先，我开始将viewModel加载到两个表中，每个表都位于具有绝对位置的div中。然后我创建了一个函数来隐藏其中一个表：

 $(function () {
        $("#divTable1").css('visibility', 'hidden');
});

最后，我制作了一个通过按下按钮触发的功能：

 $("#btnAlternateView").click(function () {
    if ($("#divTable2").css('visibility') == 'hidden') {
        $("#divTable2").css('visibility','visible');
        $("#divTable1").css('visibility', 'hidden');
    }
    else {
        $("#divTable2").css('visibility','hidden');
        $("#divTable1").css('visibility', 'visible');
    }
});

---

就这样。工作起来很有魅力。

当用户单击提交按钮时，结果会发生变化吗？或者返回相同的结果？如果用户使用“提交”按钮发出新请求，结果将更改。这是意料之中的，因为它是一个搜索/详细信息视图。您只需放置一个新按钮即可更改视图。。单击“提交”时用值填充两个div，并仅显示一个div。当用户单击按钮更改视图时，隐藏当前div并显示另一个div。类似这样的情况@Rambo3，也许你应该用解决方案来回答你的问题，只是为了未来的读者！

 $("#btnAlternateView").click(function () {
    if ($("#divTable2").css('visibility') == 'hidden') {
        $("#divTable2").css('visibility','visible');
        $("#divTable1").css('visibility', 'hidden');
    }
    else {
        $("#divTable2").css('visibility','hidden');
        $("#divTable1").css('visibility', 'visible');
    }
});