如何将标签页作为每个标签的控制器处理

时间:2010-08-26 10:29:12

标签: jquery asp.net-mvc jquery-ui

我在母版页面中有以下标记

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <link href="../../Content/jquery-ui-1.8.4.custom.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="../../Scripts/JQueryUI.js" type="text/javascript"></script>
</head>
<body>
    <div>
        <div id="tabs">
            <ul>
                <li><%=Html.TabLink("Home","Index","Home")%></li>
                <li><%=Html.TabLink("Posts","Index","Posts") %></li>
                <li><%=Html.TabLink("About", "Index", "About") %></li>
            </ul>
        </div>    
        <asp:ContentPlaceHolder ID="MainContent" runat="server">
        </asp:ContentPlaceHolder>
        <script type="text/javascript">
                $(function() {
                    $("#tabs").tabs();
                });
        </script>
    </div>
</body>
</html>

TabLink是一种扩展方法,可以呈现以下标记:

<ul>
    <li><a href="/Home/Index"><span>Home</span></a></li>
    <li><a href="/Posts/Index"><span>Posts</span></a></li>
    <li><a href="/About/Index"><span>About</span></a></li>
</ul>

每个局部视图(例如_index.aspx)都有这个标记:

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Index
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div id="tabs-1"> Hello from tab1
     </div>
</asp:Content>

jQuery选项卡异步加载每个视图,但每次单击选项卡时,它还会下载javascripts和css文件。而且它也留下了链接标记(意味着与jquerified标签一起),并且在IE8中根本不起作用并且与firefox和chrome不一致。

我非常感谢任何我错过或建议的事情。

1 个答案:

答案 0 :(得分:1)

您应该使用部分视图,但似乎您使用包含母版页的常规视图。

部分视图将如下所示

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<object>" %>

<div id="tabs-1"> 
    Hello from tab1
</div>