使用单选按钮列表在代码背后操作ajax可折叠面板 [英] manipulating ajax collapsablepanel in codebehind with radiobuttonlist

问题描述

我在页面上有一个单选按钮列表和两个面板.我想使用单选按钮列表来折叠适当的面板，但到目前为止我没有用.任何帮助将不胜感激.

页面:

i have a radiobuttonlist and two panels on a page. i would like to use the radiobuttonlist to collapse the appropriate panel, but what i have so far isn''t working. any help would be appreciated.

page:

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Home.aspx.cs" Inherits="Home" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:CollapsiblePanelExtender ID="equationPanelExtender" runat="server" TargetControlID="equationPanel">
    </asp:CollapsiblePanelExtender>
    <asp:CollapsiblePanelExtender ID="variablePanelExtender" runat="server" TargetControlID="variablePanel">
    </asp:CollapsiblePanelExtender>

<div id="lookup" style="width:100%;float:left;background-color:yellow;">
    <div id="lookupLeft" style="width:49%;float:left;background-color:Blue;">
        <div class="radioButtonListDiv" style="width:55%;margin:0 auto;">
            <asp:RadioButtonList ID="RadioButtonList1" runat="server" 

                RepeatDirection="Horizontal" 

                onselectedindexchanged="RadioButtonList1_SelectedIndexChanged" 

                AutoPostBack="True">
                <asp:ListItem Value="1">Equations</asp:ListItem>
                <asp:ListItem Value="2">Variables</asp:ListItem>
            </asp:RadioButtonList>
        </div><!-- radioButtonListDiv -->
        <asp:Panel ID="equationPanel" runat="server">
            <div class="centerDDL" style="width:55%;margin:0 auto;">
                <asp:DropDownList ID="equationDDL" runat="server" DataSourceID="equationsDS" 

                    DataTextField="equationName" DataValueField="equationID">
                </asp:DropDownList>
                <asp:SqlDataSource ID="equationsDS" runat="server" 

                    ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 

                    SelectCommand="SELECT * FROM [equationsTable]"></asp:SqlDataSource>
            </div><!-- centerDDL -->
        </asp:Panel>
        <asp:Panel ID="variablePanel" runat="server">
            <div class="centerDDL" style="width:55%;margin:0 auto;">
                <asp:DropDownList ID="variablesDDL" runat="server" DataSourceID="variablesDS" 

                    DataTextField="variableName" DataValueField="variableID">
                </asp:DropDownList>
                <asp:SqlDataSource ID="variablesDS" runat="server" 

                    ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 

                    SelectCommand="SELECT * FROM [variablesTable]"></asp:SqlDataSource>
            </div><!-- centerDDL -->
        </asp:Panel>
    </div><!-- lookupLeft -->
    <div id="lookupRight" style="width:49%;float:right;">
        <asp:DetailsView ID="DetailsView1" Width="100%" runat="server">
        </asp:DetailsView>
    </div><!-- lookupRight -->
</div><!-- lookup -->
<div style="clear;"></div>
<div id="input" style="width:100%;float:left;background-color:orange;">
    <div id="inputLeft" style="width:49%;float:left;background-color:Blue;">
    </div><!-- inputLeft -->
    <div id="inputRight" style="width:49%;float:right;">
    </div><!-- inputRight -->
</div><!-- input -->
</asp:Content>

代码隐藏:

codebehind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using AjaxControlToolkit;

public partial class Home : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        equationPanelExtender.Collapsed = false;
        variablePanelExtender.Collapsed = true;
    }

    protected void  RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        if (RadioButtonList1.SelectedValue == "1")
        {
            equationPanelExtender.Collapsed = false;
            variablePanelExtender.Collapsed = true;
        }
        if (RadioButtonList1.SelectedValue == "2")
        {
            equationPanelExtender.Collapsed = true;
            variablePanelExtender.Collapsed = false;
        }
    }
}

推荐答案

ConnectionStrings:ConnectionString ％> " SelectCommand =" ">> span> < > < /div > <！- centerDDL < /asp:Panel > < asp:Panel ID =" runat 服务器" < div =" centerDDL" 样式 宽度:55 ％; margin:0 auto;" < asp:DropDownList ID =" runat 服务器" DataSourceID variablesDS" DataTextField =" =" variableID"> < /asp:DropDownList > <asp:SqlDataSource ID="variablesDS" runat="server" ConnectionString="<%

ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [equationsTable]"></asp:SqlDataSource> </div><!-- centerDDL --> </asp:Panel> <asp:Panel ID="variablePanel" runat="server"> <div class="centerDDL" style="width:55%;margin:0 auto;"> <asp:DropDownList ID="variablesDDL" runat="server" DataSourceID="variablesDS" DataTextField="variableName" DataValueField="variableID"> </asp:DropDownList> <asp:SqlDataSource ID="variablesDS" runat="server" ConnectionString="<%

ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [variablesTable]"></asp:SqlDataSource> </div><!-- centerDDL --> < /asp:Panel > </div><!-- lookupLeft --> <div id="lookupRight" style="width:49%;float:right;"> <asp:DetailsView ID="DetailsView1" Width="100%" runat="server"> </asp:DetailsView> </div><!-- lookupRight --> </div><!-- lookup --> <div style="clear;"></div> <div id="input" style="width:100%;float:left;background-color:orange;"> <div id="inputLeft" style="width:49%;float:left;background-color:Blue;"> </div><!-- inputLeft --> <div id="inputRight" style="width:49%;float:right;"> </div><!-- inputRight --> </div><!-- input --> < /asp:Content >

ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [variablesTable]"></asp:SqlDataSource> </div><!-- centerDDL --> </asp:Panel> </div><!-- lookupLeft --> <div id="lookupRight" style="width:49%;float:right;"> <asp:DetailsView ID="DetailsView1" Width="100%" runat="server"> </asp:DetailsView> </div><!-- lookupRight --> </div><!-- lookup --> <div style="clear;"></div> <div id="input" style="width:100%;float:left;background-color:orange;"> <div id="inputLeft" style="width:49%;float:left;background-color:Blue;"> </div><!-- inputLeft --> <div id="inputRight" style="width:49%;float:right;"> </div><!-- inputRight --> </div><!-- input --> </asp:Content>

codebehind:

codebehind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using AjaxControlToolkit;

public partial class Home : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        equationPanelExtender.Collapsed = false;
        variablePanelExtender.Collapsed = true;
    }

    protected void  RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        if (RadioButtonList1.SelectedValue == "1")
        {
            equationPanelExtender.Collapsed = false;
            variablePanelExtender.Collapsed = true;
        }
        if (RadioButtonList1.SelectedValue == "2")
        {
            equationPanelExtender.Collapsed = true;
            variablePanelExtender.Collapsed = false;
        }
    }
}

You need to have the AutoPostBack property set to true for RadioButtonList1

edited:
And yes you will need to leave the AutoPostBack in the mark up

You need to have the AutoPostBack property set to true for RadioButtonList1

edited:
And yes you will need to leave the AutoPostBack in the mark up

protected void  RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        if (RadioButtonList1.SelectedValue == "1")
        {
            equationPanelExtender.Collapsed = false;
            variablePanelExtender.Collapsed = true;
        }
        if (RadioButtonList1.SelectedValue == "2")
        {
            equationPanelExtender.Collapsed = true;
            variablePanelExtender.Collapsed = false;
        }
    }

这篇关于使用单选按钮列表在代码背后操作ajax可折叠面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！