Question

我是Web开发和ASP.NET的初学者。我正在创建一个Web应用程序（不公开，因此搜索引擎优化，书签等无关紧要），顶部标题的典型布局，左侧导航，右侧内容。我希望在导航栏上选择内容时不更新整个页面来更新内容。实现这个的典型方法是什么？使用ContentPages和使用UpdatePanel的MasterPage（试过这个，但似乎不起作用，我猜因为每个内容页面的URL不同）？使用框架？使用iFrame作为内容部分？内容部分的UserControls？

谢谢，蒂莫

Answer 1

您生活中需要 jQuery 。

Using jQuery with ASP.NET - A Beginner's Guide

Answer 2

调查AJAX以处理页面的刷新部分，假设您的意思是回到服务器以获取菜单。来自Rafael的jQuery建议也有很多其他方法可以解决这个问题。

根据您的描述，至少有两种不同的案例，可能值得说明：

菜单飞出 - 这是用户在导航栏中悬停或点击某些内容并出现一组其他选项的地方。例如，在杂货店网站上可能有一个“肉”选项，你点击然后列出各种类型的肉类，如牛肉，猪肉，鸡肉等。这可以完全用Javascript完成，不需要返回到服务器必然。
更新页面正文 - 这是您希望页面内容发生变化的地方，但您需要了解服务器获取的URL与用户看到的URL略有不同。在我工作的地方，我们有一种方法可以将某些URL标记为AJAX URL，因此它们只渲染所需的一小部分而不是整个页面。这确实带来了浏览器中的URL没有改变的缺点，所以如果有人将它加入书签，他们可能会得到错误的页面，只是为了警告你。从某种意义上讲，这是一个问题，因为如果有人试图点击错误的页面，应用程序必须优雅地处理这个问题，否则他们可能认为应用程序已关闭并打电话给你说“你下来了吗？”

这些场景中的每一个都让我有意义，因为您可能需要更加具体地了解您在此处所做的事情以及结构如何。

Answer 3

JQuery是好东西，但我认为在某些情况下可以为UpdatePanels做一些事情。如果您正在构建一个您不希望增长以支持大量用户的私有站点，那么您可能会更容易开始使用UpdatePanel。 UpdatePanel更适合快速开发和原型设计，可以带您走很长的路。如果你发现需要，你可以在将来逐个交换它们。

如果您决定使用此路线，请使用MasterPage作为基本布局，然后为您希望彼此分开的每个主页创建一个Web表单（使用MasterPage的aspx）。从那里，每个页面的内容可以包含要使用AJAX更新的部分中的UpdatePanel。通常，我使用用户控件在幕后分解页面以封装特定部分。

Answer 4

看一下ASP.NET MVC，它非常适合这种行为。混合了jQuery（或其他javascript库，YUI，MooTools，嗯其他那些）将为你提供一个非常好的框架来构建这种类型的应用程序。

您希望将不同的内容部分视为部分视图，而您的“主要”部分则是可以将这些部分视图加载到其中的div。

这里有一堆教程： http://www.asp.net/mvc/tutorials 和这里： http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

Answer 5

如果您想尝试jQuery并完全删除使用asp.net来帮助分离您正在学习的概念或技术，您可以简单地使用带有html的jQuery来创建一个带有菜单的页面，其中“没有回发”加载到内容中。 ..

<强>的index.html

<html>
<head>
    <title>A website</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    <script type="text/javascript">

        $(function() {

            $(".navigation a").click(function() {

                $("#content").load($(this).attr("href"));

                return false;
            });

        });
    </script>

</head>
<body>
    <ul class="navigation">
        <li><a href="content-1.html">Content 1</a></li>
        <li><a href="content-2.html">Content 2</a></li>
        <li><a href="content-3.html">Content 3</a></li>
    </ul>

    <div id="content">
    </div>

</body>
</html>

content-1.html

<h1>Content 1</h1>
<p>Hello there...</p>

content-2.html

<h1>Content 2</h1>
<p>etc etc etc</p>

然后你就可以创建示例html页面（粘贴2个非常简单的页面），内容将被加载到你的div中......从那里你可以通过多种方式清晰地扩展！

在不刷新ASP.NET网页上的整个页面的情况下刷新内容的最佳布局是什么？

5 个答案: