2

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

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

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

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

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

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

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

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

所以，很简单地说我的问题是：你认为设计一个网站的基本策略是什么这个区域而不是整个站点。

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

将非常感谢指导。

/DT

4

2 回答 2

0

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

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

我个人会使用 ASP.NETs UpdatePanel，因为您可以强制它使用UpdatePanel.Update();.

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

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

编辑：

我会做两件事：

  1. 将 a 添加PlaceHolder到 default.aspx （在 a 内UpdatePanel）并将其作为公共 var 在后面的代码中公开，以便可以从外部访问它。
  2. 暴露它，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>

On Navigation Control 对所有导航链接执行此操作（更改 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：

您也可以通过将内容加载到 div 中来使用 JQuery() 来执行此操作。设置页面（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 中。

于 2012-12-06T14:34:31.260 回答
0

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

我所做的是，我将您在母版页中提供的 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 但这似乎是不允许的；它给出了一个解析器错误。

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

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

谢谢/DT

于 2012-12-07T11:52:16.733 回答