Step by Step dropdown selection - c#

Please help me if you have an idea on autopostback in asp.net using C#
i have 4 dropdown lists in one page
if i selects 1st dropdownlist then it enables 2nd dropdownlist
and after selection an option in 2nd dropdownlist 3rd dropdownlist enables
and after selection an option in 3rd drop down list 4th dropdown list enables
please let me know to do this task...
please help me

Try this:-
ASPX
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
<asp:ListItem Enabled="true" Text="Select Value" Value="-1"></asp:ListItem>
<asp:ListItem Text="Value1" Value="1"></asp:ListItem>
<asp:ListItem Text="Value2" Value="2"></asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList2_SelectedIndexChanged">
<asp:ListItem Enabled="true" Text="Select Value" Value="-1"></asp:ListItem>
<asp:ListItem Text="Value1" Value="1"></asp:ListItem>
<asp:ListItem Text="Value2" Value="2"></asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="DropDownList3" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList3_SelectedIndexChanged">
<asp:ListItem Enabled="true" Text="Select Value" Value="-1"></asp:ListItem>
<asp:ListItem Text="Value1" Value="1"></asp:ListItem>
<asp:ListItem Text="Value2" Value="2"></asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="DropDownList4" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList4_SelectedIndexChanged">
<asp:ListItem Enabled="true" Text="Select Value" Value="-1"></asp:ListItem>
<asp:ListItem Text="Value1" Value="1"></asp:ListItem>
<asp:ListItem Text="Value2" Value="2"></asp:ListItem>
</asp:DropDownList>
ASPX CS
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DropDownList1.Enabled = true;
DropDownList2.Enabled = false;
DropDownList3.Enabled = false;
DropDownList4.Enabled = false;
}
}
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
DropDownList2.Enabled = true;
}
protected void DropDownList2_SelectedIndexChanged(object sender, EventArgs e)
{
DropDownList3.Enabled = true;
}
protected void DropDownList3_SelectedIndexChanged(object sender, EventArgs e)
{
DropDownList4.Enabled = true;
}

you can use SelectedIndexChanged event of drop down list to do the server side functionality and set AutoPostBack = true so that on selection change your page will get re-loaded.

Check out this Fiddle .
Important part is to handle the change event of dropdown list and to show another dropdownlist.
$("#one").change(function()
{
$("#two").toggleClass("show",true);
});

Related

When a certain item on dropdownlist1 is selected, select automatically a certain item on dropdownlist2

I want to when the item x5 is selected on dropdownlist1 the item y0 is automatically selected on dropdownlist2
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_Itemchanged">
<asp:ListItem Value='5'>x5</asp:ListItem>
<asp:ListItem Value="4">x4</asp:ListItem>
<asp:ListItem Value="3">x3</asp:ListItem>
<asp:ListItem Value="2">x2</asp:ListItem>
<asp:ListItem Value="1">x1</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="DropDownList2" runat="server">
<asp:ListItem Value="0.75">y0.75</asp:ListItem>
<asp:ListItem Value="0.50">y0.50</asp:ListItem>
<asp:ListItem Value="0.25">y0.25</asp:ListItem>
<asp:ListItem Value="0">y0</asp:ListItem>
</asp:DropDownList>
protected void DropDownList1_Itemchanged(object sender, EventArgs e)
{
if (DropDownList1.SelectedItem.Value == "5")
{
DropDownList2.Items.FindByValue("0").Selected = true;
DropDownList2.Items.FindByValue("0.75").Attributes.Add("Disabled", "Disabled");
DropDownList2.Items.FindByValue("0.50").Attributes.Add("Disabled", "Disabled");
DropDownList2.Items.FindByValue("0.25").Attributes.Add("Disabled", "Disabled");
}
}
When I select the item x4 on dropdownlist1 and select the item y0.25 on dropdownlist2, and after that when I select x5 on the dropdownlist1 it gives me "Cannot have multiple items selected in a DropDownList"
Use the SelectedValue property on the list:
protected void DropDownList1_Itemchanged(object sender, EventArgs e)
{
if (DropDownList1.SelectedItem.Value == "5")
{
DropDownList2.SelectedValue = "0";
}
}

Asp.net Dropdownlist selected item value

I have a problem with the SelectedItem in the DropDownList
<asp:DropDownList ID="Etkin_Drop" runat="server" OnSelectedIndexChanged="Etkin_Drop_SelectedIndexChanged">
<asp:ListItem Text="Seç" Value="-1" Selected="True"></asp:ListItem>
<asp:ListItem Text="Aktif" Value="1"></asp:ListItem>
<asp:ListItem Text="Deaktif" Value="0"></asp:ListItem>
</asp:DropDownList>
First list item value is -1 but when I want to check in the if statement its not working
protected void Etkin_Drop_SelectedIndexChanged(object sender, EventArgs e)
{
if (Convert.ToInt32(Etkin_Drop.SelectedItem.Value) == -1)
{
ScriptManager.RegisterStartupScript(this, this.GetType(), "popup", "alert('Lütfen Bir Seçim Yapınız');", true);
}
else
{
Label4.Text = Etkin_Drop.SelectedItem.Value;
}
}
I could not define the problem
Add AutoPostBack Property to your DropDownList and set this property to True. Like this:
<asp:DropDownList ID="Etkin_Drop" runat="server"
OnSelectedIndexChanged="Etkin_Drop_SelectedIndexChanged" AutoPostBack="True">

Can't Get my Calendar to display correctly in ASP.NET web form

I have two drop down list and a calendar control in my webform. When I click on my calendar values. It should select the right values and place the values in my dropdown list, but nothing is showing in my drop down lists after i selected them. The ID values are correctly named. The even handler is wired. I'm confused what's going on. Here is the code I'm using to link them together.
protected void clnArrival_SelectionChanged(object sender, EventArgs e)
{
ddlMonth.SelectedValue = clnArrival.SelectedDate.Month.ToString();
ddlDay.SelectedValue = clnArrival.SelectedDate.Day.ToString();
}
here my aspx code
<asp:Calendar ID="clnArrival" runat="server" Visible="true"
OnSelectionChanged="clnArrival_SelectionChanged">
<TodayDayStyle BackColor="Blue" Font-Bold="True" ForeColor="White"
/>
<TitleStyle BackColor="Blue" Font-Bold="True" ForeColor="White" />
<NextPrevStyle ForeColor="White" />
</asp:Calendar>
Edit
This information was taking from an answer that should have been an edit
<asp:DropDownList ID="ddlMonth" runat="server" Height="18px" Width="150px">
</asp:DropDownList>
<asp:DropDownList ID="ddlDay" runat="server" Width="173px">
</asp:DropDownList>
<asp:DropDownList ID="ddlMonth" runat="server" Height="18px"
Width="150px">
<asp:ListItem Value="1">January</asp:ListItem>
<asp:ListItem Value="2">February</asp:ListItem>
<asp:ListItem Value="3">March</asp:ListItem>
<asp:ListItem Value="4">April</asp:ListItem>
<asp:ListItem Value="5">May</asp:ListItem>
<asp:ListItem Value="6">June</asp:ListItem>
<asp:ListItem Value="7">July</asp:ListItem>
<asp:ListItem Value="8">August</asp:ListItem>
<asp:ListItem Value="9">September</asp:ListItem>
<asp:ListItem Value="10">October</asp:ListItem>
<asp:ListItem Value="11">November</asp:ListItem>
<asp:ListItem Value="12">December</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="ddlDay" runat="server" Width="173px">
<asp:ListItem Value="1">1</asp:ListItem>
<asp:ListItem Value="2">2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
<asp:ListItem>6</asp:ListItem>
<asp:ListItem>7</asp:ListItem>
<asp:ListItem>8</asp:ListItem>
<asp:ListItem>9</asp:ListItem>
<asp:ListItem>10</asp:ListItem>
<asp:ListItem>11</asp:ListItem>
<asp:ListItem>12</asp:ListItem>
<asp:ListItem>13</asp:ListItem>
<asp:ListItem>14</asp:ListItem>
<asp:ListItem>15</asp:ListItem>
<asp:ListItem>16</asp:ListItem>
<asp:ListItem>17</asp:ListItem>
<asp:ListItem>18</asp:ListItem>
<asp:ListItem>19</asp:ListItem>
<asp:ListItem>20</asp:ListItem>
<asp:ListItem>21</asp:ListItem>
<asp:ListItem>22</asp:ListItem>
<asp:ListItem>23</asp:ListItem>
<asp:ListItem>24</asp:ListItem>
<asp:ListItem>25</asp:ListItem>
<asp:ListItem>26</asp:ListItem>
<asp:ListItem>27</asp:ListItem>
<asp:ListItem>28</asp:ListItem>
<asp:ListItem>29</asp:ListItem>
<asp:ListItem>30</asp:ListItem>
<asp:ListItem>31</asp:ListItem>
</asp:DropDownList>
protected void clnArrival_SelectionChanged(object sender, EventArgs e)
{
ddlMonth.SelectedValue = clnArrival.SelectedDate.Month.ToString();
ddlDay.SelectedValue = clnArrival.SelectedDate.Day.ToString();
}
This code should work, now the two droplists will display the proper month and date, just make sure your aspx value property for the droplists are correct.

ASP.Net JQuery customvalidator on multiple fields

I am trying to do validation on multiple fields with the custom validator in ASP.net using JQuery but I can't get it to work.
There is a drop down box which contains two values, based on these values other items appear.
So if the user selects option 1, then a text box appears, if they select option 2 the text box disappears and two drop down boxes appear.
Depending on what option they choose I want to validate their input.
What I have so far that is not working is
.ASPX
<asp:DropDownList ID="drpHeight" runat="server">
<asp:ListItem Value="CMs">CMs</asp:ListItem>
<asp:ListItem Value="Feet">Feet</asp:ListItem>
</asp:DropDownList>
<asp:TextBox ID="txtCm" runat="server" Width="100px"></asp:TextBox>
<asp:CustomValidator ID="CustomValidator9" runat="server" ErrorMessage="Please select you height"
ClientValidationFunction = "ValidateHeight" Display="Dynamic" ControlToValidate="txtCm" ValidateEmptyText="true"></asp:CustomValidator>
<asp:RegularExpressionValidator ID="revCm" runat="server"
ControlToValidate="txtCm" Display="Dynamic"
ErrorMessage="Please enter a valid number"
ValidationExpression="^([0-9]*|\d*\.\d{1}?\d*)$" SetFocusOnError="True"></asp:RegularExpressionValidator>
<br />
<br />
<asp:DropDownList ID="drpFeet" runat="server">
<asp:ListItem Value="-1">Select...</asp:ListItem>
<asp:ListItem Value="1"></asp:ListItem>
<asp:ListItem Value="2"></asp:ListItem>
<asp:ListItem Value="3"></asp:ListItem>
<asp:ListItem Value="4"></asp:ListItem>
<asp:ListItem Value="5"></asp:ListItem>
<asp:ListItem Value="6"></asp:ListItem>
<asp:ListItem Value="7"></asp:ListItem>
<asp:ListItem Value="8"></asp:ListItem>
</asp:DropDownList>
<asp:Label ID="lblFeet" runat="server" Text="Ft"></asp:Label>
<asp:DropDownList ID="drpInches" runat="server">
<asp:ListItem Value="-1">Select...</asp:ListItem>
<asp:ListItem Value="0"></asp:ListItem>
<asp:ListItem Value="1"></asp:ListItem>
<asp:ListItem Value="2"></asp:ListItem>
<asp:ListItem Value="3"></asp:ListItem>
<asp:ListItem Value="4"></asp:ListItem>
<asp:ListItem Value="5"></asp:ListItem>
<asp:ListItem Value="6"></asp:ListItem>
<asp:ListItem Value="7"></asp:ListItem>
<asp:ListItem Value="8"></asp:ListItem>
<asp:ListItem Value="9"></asp:ListItem>
<asp:ListItem Value="10"></asp:ListItem>
<asp:ListItem Value="11"></asp:ListItem>
</asp:DropDownList>
<asp:Label ID="lblInches" runat="server" Text="Inches"></asp:Label>
<br />
<br />
JQuery
function ValidateHeight(sender, args) {
if ($('#<%=drpHeight.ClientID%>').val = "CMs") {
if ($('#<%=txtCm.ClientID%>').val().length > 0) {
args.IsValid = true;
}
else {
args.IsValid = false;
return;
}
}
else if ($('#<%=drpHeight.ClientID%>').val = "Feet") {
args.IsValid = true;
}
}
</script>
At the moment it is not working, I did have it validating the CM b but then it stopped working and now I can't figure out why.
What is the best way to approach this? I've got another one for Weight to do as well, that one has 3 input possibilities.
I came across the answer finally, I will provide the answer for anyone else who wants to know how to do this.
Changed my customer validator to:
<asp:CustomValidator ID="CustomValidator9" runat="server" ErrorMessage="Please select you height"
ClientValidationFunction = "ValidateHeight" Display="Dynamic" ValidateEmptyText="true"></asp:CustomValidator>
Then my JQuery became
<script type="text/javascript">
function ValidateHeight(sender, args) {
var drpHeight = $('#<%=drpHeight.ClientID%>').val();
if (drpHeight == "CMs") {
if ($('#<%=txtCm.ClientID%>').val().length > 0) {
args.IsValid = true;
return;
}
else {
args.IsValid = false;
return;
}
}
else if (drpHeight == "Feet") {
var drpFeet = $('#<%=drpFeet.ClientID%>').val();
var drpInches = $('#<%=drpInches.ClientID%>').val();
if (drpFeet == -1 || drpInches == -1) {
args.IsValid = false;
return;
}
else {
args.IsValid = true;
return;
}
}
}
</script>

how to change imageurl after selection from dropdownlist

Hi I have a dropdownlist and id like upon selecting one of the four choices to set the imageurl of Image2 in code behind?
An example. In your markup:
< <asp:DropDownList ID="TestDropDownList" runat="server"
onselectedindexchanged="TestDropDownList_SelectedIndexChanged" AutoPostBack="true">
<asp:ListItem Value="http://url.com/image1.png" Text="Option 1"></asp:ListItem>
<asp:ListItem Value="http://url.com/image2.png" Text="Option 2"></asp:ListItem>
<asp:ListItem Value="http://url.com/image3.png" Text="Option 3"></asp:ListItem>
<asp:ListItem Value="http://url.com/image4.png" Text="Option 4"></asp:ListItem>
</asp:DropDownList>
<asp:Image ID="TestImage" ImageUrl="" runat="server" />
In your code-behind:
protected void TestDropDownList_SelectedIndexChanged(object sender, EventArgs e)
{
Image i = this.TestImage;
i.ImageUrl = ((DropDownList)sender).SelectedValue;
}
You have to enable AutoPostBack property for the dropdownlist. Then each time a selection changes postback will be send to server, so you codebehind will be executed. If I remeber corectly DropDownList control has an event for changed selection.
Add a OnSelectedIndexChanged eventhandler, and set AutoPostBack to true:
<asp:DropDownList ID="Options" runat="server" AutoPostBack="true"
OnSelectedIndexChanged="Options_SelectedIndexChanged">
<asp:ListItem Value="Item1">Text 1</asp:ListItem>
<asp:ListItem Value="Item2">Text 2</asp:ListItem>
</asp:DropDownList>
In the code behind you implement the method that handles the event:
protected void Options_SelectedIndexChanged(object sender, EventArgs e)
{
string selectedValue = this.Options.SelectedValue;
...
}

Categories

Resources