Question

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

目前它们都是可见的并且堆叠在（1）的顶部（1）。我想把它分成两个不同的面板，可以通过按钮或css标签切换其可见性。

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

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

是否有一种干净的ASP.NET（3.5）方法（即在控件中包装每个内容块并保持对UI的紧密控制）？

感谢。

Answer 1

您可以使用ASP.Net Ajax Accordion。

ASP.Net Ajax Accordion： Accordion是一个Web控件，允许您提供多个窗格并一次显示一个窗格。就像有几个CollapsiblePanels，其中一次只能扩展一个。 Accordion实现为包含AccordionPane Web控件的Web控件。每个AccordionPane控件都有一个Header及其内容的模板。我们会跟踪所选的窗格，以便在回发期间保持可见状态。

另外，你可以试试：

jQuery UI Accordion:点击标题可展开/折叠分为逻辑部分的内容，非常类似标签。（可选）在鼠标悬停时打开/关闭切换部分。

jQuery UI Accordion示例代码：

<!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>

在ASP.NET页面中切换多个内容块/窗格/面板的可见性

1 个答案: