1

我正在做一个项目，我必须为我处理一些不寻常的设计。我的目标是使用 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 中实现这种行为的一些技巧或方法。请，如果我的想法令人困惑或不够详细，请告诉我...

谢谢您的帮助。

4

1 回答 1

0

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

@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>

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

于 2013-04-11T15:33:12.540 回答