根据在 ASP.NET MVC 页面上选择的选项卡加载部分视图时出错答案

【问题标题】：Error while loading Partial View based on the Tab selected on ASP.NET MVC page根据在 ASP.NET MVC 页面上选择的选项卡加载部分视图时出错
【发布时间】：2010-12-07 17:16:46
【问题描述】：

我是 MVC 新手，并尝试根据所选选项卡加载部分视图。这是两个选项卡（产品和文档类型）和两个局部视图（NavMenuProduct.ascx 和 NavMenuDocType.ascx）。默认页面为：Index.aspx

我的代码没有加载部分视图。如果有人对此有任何代码示例，我将不胜感激。

这里是 Javascript：

<script type="text/javascript">
    $(function () {
        var $tabs = $("#tabs").tabs({
            select: function (e, ui) {
                hdnTabSelected.value = ui.index;
                alert(hdnTabSelected.value); 
            }
        });
    });
</script>

HTML代码：

<table class="tableNoBorder"  width="100%">
    <!--Header Dashboard-->
    <tr>
        <td colspan="2">
            <div id="container">
                <h1>DocShare</h1>
                <div id="welcome">Welcome, <%=new CacheUser().GetLoginUser().CommanName%></div>
            </div>
        </td>
    </tr>
    <!--Tabs Section for Products and DocType-->
    <tr>
        <td colspan=2>
            <DIV id=tabs>
            <UL>
            <LI><A  href="#" >Products</A></LI>
            <LI><A href="#">Doc Type</A></LI>
            </DIV>
        </td>
    </tr>
    <!--Left Menu Navigation and Main Content-->
    <tr>
        <td valign="top" width="200px">
            <div >
            <input type="hidden" id = "hdnTabSelected" runat="Server"  />
            <%-- If TabSelected = 0, load Product Menu, otherwise Load DocType Menu--%>
            <%if (hdnTabSelected.Value == "0") %>
                <% Html.RenderAction("NavMenuProduct","Home"); %>
            <% else %>
                <% Html.RenderAction("NavMenuDocType","Home"); %>
            </div>
        </td>
        <td valign="top" width ="100%" >
            <div id="content">
                <asp:ContentPlaceHolder ID="MainContent" runat="server"></asp:ContentPlaceHolder> 
            </div>
        </td>
    </tr>
</table>

【问题讨论】：

此处的 tabSelected 始终仅显示为 0。此外，我不确定两个选项卡的 href 应该放什么。

标签： asp.net-mvc asp.net-mvc-2 asp.net-mvc-routing

【解决方案1】：

你要做的是一个标准的母版页......我会打开一个文件新的 MVC，看看它是如何处理主页和标签的......

大师：

    <div id="header">
        <div id="title">
            <h1>My MVC Application</h1>
        </div>

        <div id="logindisplay">
            <% Html.RenderPartial("LogOnUserControl"); %>
        </div> 

        <div id="menucontainer">

            <ul id="menu">              
                <li><%: Html.ActionLink("Home", "Index", "Home")%></li>
                <li><%: Html.ActionLink("About", "About", "Home")%></li>
            </ul>

        </div>
    </div>

    <div id="main">
        <asp:ContentPlaceHolder ID="MainContent" runat="server" />

        <div id="footer">
        </div>
    </div>
</div>

关于

<asp:Content ID="aboutTitle" ContentPlaceHolderID="TitleContent" runat="server">
    About Us
</asp:Content>

<asp:Content ID="aboutContent" ContentPlaceHolderID="MainContent" runat="server">
    <h2>About</h2>
    <p>
        Put content here.
    </p>
</asp:Content>

【讨论】：

是的...我正在尝试从标准母版页进行操作。我想我应该尝试将它们放入单独的视图而不是部分视图中。

【解决方案2】：

从上述隐藏输入中删除runat="server"。问题是渲染的html和javascript不匹配。

这应该在页面第一次加载时起作用，但是隐藏输入的呈现 id 看起来像 ctl00$MainContent$hdnTabSelected 与 javascript 中的 hdnTabSelected.value 不匹配。

您可以将 javascript 更改为此，但 我建议不要这样做

<script type="text/javascript">
    $(function () {
        var $tabs = $("#tabs").tabs({
            select: function (e, ui) {
                <%=hdnTabSelected.ClientID %>.value = ui.index;
                alert(<%=hdnTabSelected.ClientID %>.value); 
            }
        });
    });
</script>

【讨论】：

【解决方案3】：

根据您的问题，这并不明显，但乍一看，我认为您应该将对 Html.RenderAction 的调用替换为对 Html.Action 的调用强>。

两者的区别在于 Html.RenderAction 将呈现结果直接到响应（其中如果行动更有效返回大量 HTML）而 Html.Action 返回一个字符串结果。

Haaked 有a blog-post 提供更多详细信息。

【讨论】：