基于局部视图的网站-Asp.Net MVC 4

Question

我正在做一个项目，我必须为我处理一些不寻常的设计。 我的目标是使用2个不同的同时工作区域。 左一个应在2个不同的局部视图之间更改其值。 第二个区域（中间区域和右区域）应独立于左区域更改其视图。

因此，最后，我最终得到2个不同的div，分别是左右两个和Jqueryiu Tab插件...单击其中一个选项卡后，我将其中的局部视图加载到其中。

<div id="conteudo">
    <div class="container-abas-laterais">
        <div id="abas-laterais" style="width: 100%; height: 100%">
            <ul>
                <li><a href="@Url.Action("Pendencia", "AcessoRapido")">Pendências</a></li>
                <li><a href="@Url.Action("Requerimento", "AcessoRapido")">Requerimentos</a></li>
            </ul>
        </div>
    </div>

    <div class="container-abas">
        <div id="abas">
            <ul>
                <li><a href="#aba-1">Chamados</a></li>
                <li><a href="#aba-2">Cadastros</a></li>
                <li><a href="#aba-3">Pesquisa</a></li>
                <li><a href="@Url.Action("Index", "Configuracao")">Configuração</a></li>
            </ul>
            <div class="container-abas-conteudo">
                <div id="aba-1">
                    <p>Conteúdo da aba um.</p>
                </div>
                <div id="aba-2">
                    <p>Conteúdo da aba dois.</p>
                </div>
                <div id="aba-3">
                    <p>Conteúdo da aba três.</p>
                </div>                    
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">        
    $(function () { $("#abas").tabs(); });
    $(function () { $("#abas-laterais").tabs(); });
</script>

好吧，正如我想要的那样，直接从选项卡单击中加载的部分视图确实工作得很好。问题是那些初始视图也应该调用的那些...我需要将所有视图和函数保留在这些div中。 ..它应该像一个iFrame一样。.哇，有时候，我在左一个中所做的应该在右一个中进行...

所以我想知道一些技巧或方法来在asp.net mvc中实现这种行为。 请，如果我的想法混乱或不够详细，请让我知道...

谢谢您的帮助。

Answer 1

如果我的解释正确：您是否要根据第一组选项卡中的链接加载第二组选项卡？ 如果是这样，您的链接将是这样的：

@Ajax.ActionLink("Requerimentos", "Requerimento", "AcessoRapido", null, new AjaxOptions{ UpdateTargetId = "aba-1", OnSuccess = "changeTabs(1)" }, null)

链接调用的操作将需要返回PartialView作为操作结果。 然后在成功返回时，您会看到它成功调用了一个函数，您可以在其中将选项卡更改为所需的选项卡。

function changeTabs(index){
    $("#abas").tabs("select", index);
}

如果所有假设都正确，请别忘了您将需要在页面中包含简洁的Ajax，并在web.config中包含正确的密钥：

  <appSettings>
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
  </appSettings>

<script src="/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>

如果我误解了你的问题，请原谅我。 我希望这有帮助。