0

我有一个 C# ASP.NET 页面 (.aspx)，它有两个主要内容区域：(1) 带有文本字段的表单（新项目）和 (2) 网格控件（项目列表）。很简单，用户可以填写表格来创建一个新的项目，他们可以看到一个项目列表来查看/编辑/删除。他们单击查看，然后页面发回以使用项目数据填写表单。

目前，它们都是可见的并且堆叠 (1) 在 (2) 的顶部。我想将其拆分为两个不同的面板，可以通过按钮或 css 选项卡等切换其可见性。

当 panel_1 显示时， panel_2 不应该显示（反之亦然）。显然，我可以直接使用 JavaScript 轻松实现这一点（例如，jQuery 单击事件绑定到按钮或锚点等），但是绑定网格控制按钮事件（查看/编辑/删除）以显示正确的面板可能会变得混乱 - 即填写表格>>点击添加项目>>显示项目列表面板（例如）。我想我可以在回发时将一些状态参数弹出到 URL 中，然后将该数据绑定到一些局部变量，以便知道应该显示哪个面板，但我确信有更好的方法。

将来我可能希望有 3/4/5 个相关的内容面板可以切换，无论是一个表单拆分多个面板，还是一个表单和三种不同的数据显示方式（列表/图表/等）。

有没有一种干净的 ASP.NET (3.5) 方法来做到这一点（即将每个内容块包装在一个控件中并保持对 UI 的严格控制）？

谢谢。

4

1 回答 1

0

您可以为此使用ASP.Net Ajax Accordion。

ASP.Net Ajax Accordion： Accordion 是一种 Web 控件，允许您提供多个窗格并一次显示一个。这就像有几个 CollapsiblePanel，一次只能展开一个。Accordion 被实现为一个包含 AccordionPane web 控件的 web 控件。每个 AccordionPane 控件都有一个用于其 Header 和 Content 的模板。我们跟踪选定的窗格，使其在回发中保持可见。

另外，你可以试试：

jQuery UI Accordion：单击标题以展开/折叠分成逻辑部分的内容，就像选项卡一样。（可选）在鼠标悬停时切换部分打开/关闭。

jQuery UI 手风琴示例代码：

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Accordion - Default functionality</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
    $(function() {
        $( "#accordion" ).accordion();
    });
    </script>
</head>
<body>

<div id="accordion">
    <h3>Section 1</h3>
    <div>
        <p>
        Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
        ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
        amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
        odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
        </p>
    </div>
    <h3>Section 2</h3>
    <div>
        <p>
        Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
        purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
        velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
        suscipit faucibus urna.
        </p>
    </div>
    <h3>Section 3</h3>
    <div>
        <p>
        Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
        Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
        ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
        lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
        </p>
        <ul>
            <li>List item one</li>
            <li>List item two</li>
            <li>List item three</li>
        </ul>
    </div>
    <h3>Section 4</h3>
    <div>
        <p>
        Cras dictum. Pellentesque habitant morbi tristique senectus et netus
        et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
        faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
        mauris vel est.
        </p>
        <p>
        Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
        inceptos himenaeos.
        </p>
    </div>
</div>


</body>
</html>
于 2012-12-07T14:09:25.230 回答