Question posted in
The official documentation can be found here.

How to make a Label Visible when user selects an Item in a DropDownList Asp.net

I’m using APS.net and c#
I have a RadioButtonList, DropDownList, Button and label in a ModalPopupExtender.

    <ajaxToolkit:ModalPopupExtender ID="mpeDirector_Accept_or_Reject_Overtime" runat="server" PopupControlID="pModal_Popup_Director_Accept_or_Reject_Overtime" TargetControlID="btnModal_Popup_Dummy_TargetControlID" 
    BackgroundCssClass="modalBackground" DropShadow="True">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="pModal_Popup_Director_Accept_or_Reject_Overtime" runat="server" CssClass="modalPopup" BackColor="#FFFFCC" BorderColor="Black" BorderStyle="Solid" BorderWidth="2px" style="display:none;">
<asp:Label ID="lbModal_Popup_Director_Accept_or_Reject_Overtime_Message" runat="server" Font-Names="Arial" ForeColor="Red" Font-Bold="True">"Director Accept/Reject" Over Time?</asp:Label>
<asp:RadioButtonList ID="rblDirector_Accept_or_Reject" runat="server" RepeatDirection="Horizontal" >
<asp:ListItem ID="liDirector_Accept" Text="Accept" Tag="1" ></asp:ListItem>
<asp:ListItem ID="liDirector_Reject" Text="Reject" Tag="2" ></asp:ListItem>
</asp:RadioButtonList>
<br />
<br />
<div>
<asp:Label ID="lbEmployee_Hourly_Rate_Multiplier" runat="server" Font-Names="Arial" Enabled="True" ForeColor="Black" Font-Bold="True">Hourly Rate:</asp:Label>
</asp:DropDownList>

<asp:UpdatePanel ID="udpModal_Popup_Director_Authorise" runat="server" Width="430px">
</asp:UpdatePanel>
</div>
<hr></hr>
<asp:Button ID="btnModal_Popup_Director_Authorise_Cancel" runat="server" Text="Cancel" Width="174px" CausesValidation="False"/>
</asp:Panel>

How do I create an event on the DropDownList when I can then make a label visible or not based on what ListItem was selected.
Something like this:-

Switch (DropDownList.SelectedItemIndex)
{
    case "Accept":
    {
      lbModal_Popup_Director_Accept_or_Reject_Overtime_Message.Visible = true;
      break
    }
    case "Reject":
    {
      lbModal_Popup_Director_Accept_or_Reject_Overtime_Message.Visible = false;
      break
    }
}

Thanks

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Using a Ajax ModalPopupExtender and using JQuery I've put this example together. A Label and a DropDownlist are visible depending on which ListItem is selected on the RadioButtonList.

    HTML:-

        <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="RadioButtonList_JQuery2.WebForm1" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="Scripts/jquery-3.7.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#rblDirector_Accept_or_Reject_0').on('change', function () {

                if ($(this).is(':checked')) {
                    $('#lbEmployee_Hourly_Rate_Multiplier').show();
                    $('#ddlEmployee_Hourly_Rate_Multiplier').show();
                }
            });
            $('#rblDirector_Accept_or_Reject_1').on('change', function () {

                if ($(this).is(':checked')) {
                    $('#lbEmployee_Hourly_Rate_Multiplier').hide();
                    $('#ddlEmployee_Hourly_Rate_Multiplier').hide();
                }
            });
        });
    </script>
   <style type="text/css">
    #form1
    {
        height: 67px;
    }
    
    .modalBackground 
    { 
       background-color :#fff; 
       filter:alpha(opacity=70); 
       opacity:0.7px; 
    }     
    .modalPopup
    {
        background-color:#ffffdd;
        border-width:3px;
        border-style:solid;
        border-color:Gray;
        padding:3px;
        width:250px;
    }                   
</style> 

    <title></title>
</head>
<body>
    <form id="form1" runat="server">
       <div>
           <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>           
           <asp:Button ID="btnShowModalPopup" runat="server" Text="ShowModalPopup" OnClick="btnShowModalPopup_Click" />
           <asp:Panel ID="pModalPopup" runat="server" CssClass="modalPopup" Height="100px" 
               Width="200px" BackColor="#FFFFCC" BorderColor="Black" BorderStyle="Solid" 
               BorderWidth="2px" style="display:none;">
           <asp:RadioButtonList ID="rblDirector_Accept_or_Reject" runat="server">
           <asp:ListItem Selected="true" Value="1">Accept</asp:ListItem>
           <asp:ListItem Value="2">Reject</asp:ListItem>
           </asp:RadioButtonList>
           <asp:Label ID="lbEmployee_Hourly_Rate_Multiplier" runat="server" Font-Names="Arial" Enabled="True" ForeColor="Black" Font-Bold="True">Hourly Rate:</asp:Label>
           <asp:DropDownList ID="ddlEmployee_Hourly_Rate_Multiplier" runat="server" Enabled="True" AutoPostBack="False" >
               <asp:ListItem Enabled="true" Text="Option 1" Value="-1"></asp:ListItem>
               <asp:ListItem Text="Option 2" Value="1"></asp:ListItem>
               <asp:ListItem Text="Option 3" Value="2"></asp:ListItem>
           </asp:DropDownList>
           <br />
           <asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" />
           <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
           </asp:Panel>
           <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="pModalPopup" DropShadow="True"
               TargetControlID="btnModal_Popup_Dummy_TargetControlID" ></ajaxToolkit:ModalPopupExtender>
           <asp:Button ID="btnModal_Popup_Dummy_TargetControlID" runat="server" Text="" Width="0px" Enabled="False"/>
    </div>
    </form>
</body>
</html>

    c#:-

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

namespace RadioButtonList_JQuery2
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
              
        protected void btnShowModalPopup_Click(object sender, EventArgs e)
        {
            ModalPopupExtender1.Show();
        }
        protected void btnSave_Click(object sender, EventArgs e)
        {
            int SelectedRadioButtonList_Index = rblDirector_Accept_or_Reject.SelectedIndex;
            int SelectedDropDownList_Index = ddlEmployee_Hourly_Rate_Multiplier.SelectedIndex;
            // Do something with the results
        }
    }
}

  2. 0

    You can do it via a SelectedIndexChanged event, for example: https://www.aspsnippets.com/Articles/1593/ASPNet-DropDownList-SelectedIndexChanged-event-example-in-C-and-VBNet/ like

    
protected void OnSelectedIndexChanged(object sender, EventArgs e)
{
    switch(DropDownList.SelectedItem.Text) {
        case "Accept":
        {
            lbModal_Popup_Director_Accept_or_Reject_Overtime_Message.Visible = true;
        } break;
        case "Reject":
        {
           lbModal_Popup_Director_Accept_or_Reject_Overtime_Message.Visible = false;
        } break;
    }
}

    You will also need runat="server" and OnSelectedIndexChanged="OnSelectedIndexChanged" in the markup of your DropDownList.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search