用于导航的 ASP.NET 基本站点结构答案

【问题标题】：ASP.NET basic site structure for navigation用于导航的 ASP.NET 基本站点结构
【发布时间】：2012-12-06 10:05:57
【问题描述】：

我现在浏览了许多论坛来回答一个非常基本的问题，但令我惊讶的是，我找不到大多数网站使用的非常基本的设计的一个很好的例子。我对编程并不陌生，但不久前我用它做了大量工作，而且我对 ASP.NET 完全陌生。我目前正在使用 VS2010 并从头开始构建一个 ASP.NET MVC 3 站点。该网站启用了 AJAX，我目前同时使用根据控件进行左窗格导航和 TabContainer 进行顶部选项卡导航。

到目前为止，所有内容都包含在一个母版页中，基本问题是在左侧/顶部菜单中选择导航链接时，整个页面会重新加载并破坏导航菜单的状态。此外，完全没有必要的闪烁，我认为没有理由重新加载整个页面，我只想更改“主要区域”的内容而不触摸导航菜单。

网站结构目前由<DIV> 元素构成，这使得设计非常简单，CSS 文件的结构提供了极大的灵活性和控制力。根据建议，我想尽我所能避免过时的解决方案，例如 IFrame。我想为如何以现代和灵活的方式完成这项工作奠定基础，并尽可能减少妥协。这一点很重要，因为我启动的系统可能会在通过多个决策论坛后由整个团队共同开发。

正如我所说，我浏览了相当广泛的解决方案，并发现了许多关于母版页概念的解释，这些解释让我可以输入我的问题似乎是什么：我的导航菜单绑定到一个母版页，一个母版页实际上只是一个紧密连接到内容页面的“用户控件”，当我选择导航链接时，这些合并页面会重新加载。这是不应该发生的，这是不可接受的。

我还尝试将导航面板的加载包装在“！IsPostBack”条件下，但我得出的结论是问题不在于 PostBack：s，问题在于单击链接/树链接左侧菜单中的 /accordion 窗格确实请求了一个全新的页面，因此所有内容都重新加载并且以前的状态丢失了。当然，我可以编写代码来存储状态并为“新页面”提供最后的状态，如果没有其他可能，这将是一个解决方案；但我真的不想重新加载整个页面；我只想重新加载“主要区域”以减少带宽需求并避免闪烁。

所以我搜索了只更新“主要内容内容占位符”的方法，我看到很多关于这个主题的问题，但很少有好的答案，尤其是当我想更改主要区域中的整个 aspx 页面时，不是只需更新一些控件（或动态创建新控件/删除旧控件等）。想要改变整个 aspx 页面的原因是不同的页面会提供不同的功能，仅仅通过一些控件的操作是不够的，但主要区域应该加载另一个 aspx 页面——从开发组织的角度来看，这也是很好，因为不同的开发人员可以在完整的应用程序中处理不同的功能领域。

我愿意放弃整个母版页策略，或者使用嵌套母版页，或者将母版页包装在非母版页中，或者使用更新面板，或者使用跨页发布等等。但是我找不到可以作为开始使用的实际可行的示例。

而且，由于目前这基本上只是客户端更新，我真的不明白为什么这会变得如此棘手。

所以，非常简单地说我的问题是：你认为设计一个网站的基本策略是什么，我有导航菜单（顶部和左侧），可以将新的 aspx 页面加载到某个区域（主要区域）并且只更新这个区域而不是整个网站。

如果您能给我提供一些描述，当然最好是一些演示站点，其中只有部分站点更新为新页面，而不是整个页面 - 就这么简单！ - 当这将是非常受欢迎的时候。现在花了三天时间浏览一个好的建议，我越来越困惑...... :-(

非常感谢您的指导。

/DT

【问题讨论】：

我看到第三个文本块的第一句话有一个丢失的部分：这句话应该说“站点结构当前是用 '
' 元素构建的，这使得...... "
呃，有短版吗？ -_-
是的，我只是在一个单独的线程中发出了精髓，在这里重复：“我想设计一个非常标准的网站，用户有机会在导航菜单的帮助下导航到不同的 aspx 页面（左，上）。我不希望在更改内容页面时重新加载整个页面，原因有三个：状态处理、闪烁和带宽节省。我只想将一个新的 aspx 页面加载到“主要内容区域”中网站的其余部分保持不变。实现这一目标的最佳方法是什么？”
听起来您使用的是 Webforms 而不是 MVC3，对吗？另外，您使用的是什么版本的 .net？
是的，这个测试站点被构建为一个webforms站点是正确的。它应该是 MVC3。但我认为这个问题对双方来说都是相当普遍的，但我可能会严重误会，我还是 ASP.NET 的新手。 .NET 版本应该是 4。

标签： ajax asp.net-mvc navigation

【解决方案1】：

我会选择母版页布局。有一个ContentPlaceHolder 用于导航（根据您的需要），另一个用于主要内容。然后，您可以在需要时使用 JQuery.ajax() 或内置在 UpdatePanel 中的 ASP.NET 将内容加载到主 ContentPlaceHolder 中。

关于内容本身，我会使用 UserControls（.ascx 文件）。您可以将命令传递到默认页面，告诉它要加载哪个控件，然后加载它。

我个人会使用 ASP.NETs UpdatePanel，因为您可以使用 UpdatePanel.Update(); 强制它加载新内容。

但要注意的一点是，如果这是针对需要搜索引擎优化的实际网站，则可能很难做到，因为 URL 不会改变，因此 SEO 会受到影响。

这是一个广泛的例子，但 HTH。

编辑：

我会做两件事：

将PlaceHolder 添加到default.aspx（在UpdatePanel 内）并在后面的代码中将其公开为公共变量，以便外部访问。
公开UpdatePanel，以便外部访问；

所以默认情况下你会得到类似的东西：

<asp:Content id="Content1" runat="server" contentplaceholderid="cphContent">
    <asp:UpdatePanel id="updMain" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <asp:PlaceHolder id="phMain" runat="server" />
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

在导航控件上为所有导航链接执行此操作（更改 OnClick 以适应要加载的控件 - 这可以在转发器中动态完成）：

<asp:LinkButton id="lbItem" runat="server" onClick="LoadControl1" />

然后在（导航的）代码隐藏中，您可以：

protected void LoadControl1(object sender, EventArgs)
{
    MyControl Con = (MyControl)LoadControl("~/MyControl.ascx");
    ((Default)Page).phMain.Controls.Add(Con);
    ((Default)Page).updMain.Update();
}

注意，您可以在没有母版页复杂性的情况下实现相同的目标，但我更喜欢它们。如果您想在没有母版页的情况下执行此操作，那么您只需默认使用 PlaceHolders 并执行相同的操作。

编辑 2：

您也可以使用 JQuery() 将内容加载到 div 中来执行此操作。设置页面（MasterPage 或 Normal 页面结构）。然后让你的导航链接像这样：

<a href="http://www.mysite.com/page1.aspx" class="ajax_link">Link 1</a>

然后有一些Javascript（使用JQuery）：

$(function(){
    $("a.ajax_link").click(function(e){
        ajaxLink(this, e);
    });
});

function ajaxLink(item, e) {
    var container = $("#ajax_container_wrapper");
    var link;

    if (e != null) {
        e.preventDefault();
    }
    link = $(item).attr("href") + " #ajax_container_wrapper"; //Omit the  + " #ajax_container_wrapper"; if you want to drag all the content in.
    container.load(link);
}

还有：

<div id="ajax_container_wrapper"></div>

您希望新页面出现的位置。

这基本上会将每个链接中指定的新页面加载到 div 中。

【讨论】：

谢谢。但是如何为此使用更新面板呢？我试过没有成功，当阅读像odetocode.com/Blogs/scott/archive/2007/01/04/…这样的页面时，我觉得这甚至不可能？
对不起，如果我现在真的很愚蠢，但是在这里你添加一个控件..？我想加载一个 aspx 页面...
为什么它必须是一个页面？您不希望页面刷新，因此对我来说只需将控件加载到您拥有的页面中（默认）是有意义的。
好的，我开始发现这是一个很大的混乱点，我对此感到困惑。但我真的很想从一个 aspx 页面切换到另一个页面。这可能吗？
好的，我的下一次尝试将是这个最新的东西——我下周会试试的。我还对其他解决方案进行了简短的尝试，但到目前为止没有成功。这可能是我不够努力。还是非常感谢！

【解决方案2】：

好吧，也许已经迈出了一步——您的代码在改变页面的意义上是有效的。但据我所知，整个页面仍在重新加载，而不仅仅是我努力做的主要内容区域。

我所做的是将您提供的 JavaScript 代码（原样）放在母版页中。

编辑刚刚意识到java函数似乎没有被调用。所以锚提供了“标准”功能，这可能是一个线索:-)我怎样才能使javascript被调用（如下所述，也来自后面的代码）？我留下这个答案的其余部分只是为了检查其他错误。 /编辑

然后我在左侧导航菜单的底部放置了两个锚点（仍在母版页中）

<div id="navcol">

    <%-- other left menu stuff --%>

    <a href="../ContentPages/FutureStartPage.aspx" class="ajax_link">Link 1</a>
    <a href="../ContentPages/BusCoachStartPage.aspx" class="ajax_link">Link 2</a>

</div>

我将目标 div 放在主要内容部分，也在母版页中。我还测试了 div id="ajax_container_wrapper" 在 contentplace holder 中，而 contentplaceholder 在 div id="ajax_container_wrapper" 中，不幸的是我发现行为没有区别。

<div id="contentcol" runat="server">
    <div id="mpcpholder">
        <asp:ContentPlaceHolder ID="ContentPlaceHolderMainArea" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    <div id="ajax_container_wrapper"></div>
</div>

我也尝试省略 ContentPlaceHolder，但这似乎是不允许的；它给出了一个解析器错误。

所以可能我做错了什么，但很明显整个页面正在重新加载，包括顶部和左侧菜单。

还有；如果我让它只重新加载主要内容区域；我需要从 e 执行此操作。 G。树视图链接，甚至更重要的是后面的代码。我也会很感激一些关于如何做到这一点的建议。

谢谢 /DT

【讨论】：