点击 HeaderTemplate 中的按钮,显示当前HeaderTemplate中的Panel
时间: 2024-10-02 18:02:41 浏览: 8
在ASP.NET中,如果你想要在DataList的HeaderTemplate中的按钮点击后显示与其关联的Panel,你需要按照以下步骤操作:
1. **创建HeaderTemplate**:在DataList的HeaderTemplate部分,添加一个按钮(例如asp:Button)和一个隐藏的Panel(asp:Panel,默认隐藏)。
```html
<HeaderTemplate>
<tr>
<th><asp:Button ID="btnShowPanel" runat="server" Text="显示Panel" OnClientClick="showPanel(); return false;" /></th>
<td style="display:none;">
<asp:Panel ID="hdnPanel" runat="server" />
</td>
</tr>
</HeaderTemplate>
```
在这个例子中,我们使用了OnClientClick属性来触发JavaScript函数`showPanel()`,防止按钮提交表单。
2. **编写JavaScript函数**:在页面的<script>标签内或者单独的JavaScript文件里,编写`showPanel()`函数来控制Panel的显示。
```javascript
<script type="text/javascript">
function showPanel() {
var button = document.getElementById('<%= btnShowPanel.ClientID %>');
var panel = button.parentNode.nextElementSibling;
panel.style.display = "block";
}
</script>
```
这将获取按钮所在行的下一个兄弟节点(即隐藏的Panel)并将其display属性设置为"block",使其可见。