[英]Add two DropDownList to page on “Select” value in asp.net
I'm trying to create a booking page in asp like the one most hotels have. 我正在尝试像大多数酒店一样在asp中创建预订页面。 I can't seem to code/find the correct solution for this problem.
我似乎无法为该问题编码/找到正确的解决方案。
My problem is that a user can book from one to four rooms. 我的问题是用户可以预订一到四个房间。 If the user select, lets say 2 rooms, I have to make two more asp:DropDownList for adults / Children for the selected room.
如果用户选择,假设有2个房间,那么我必须为所选房间再设置两个asp:DropDownList,用于成人/儿童。
Right now my booking.aspx page contains: 现在,我的booking.aspx页面包含:
CheckIn (Asp:TextBox)
CheckOut (Asp:TextBox)
Rooms (Selected tag - Default value = 1)
Adults (Asp:DropDownList)
Children (Asp:DropDownList)
The default value in Rooms is 1, and if a user select 2 in the dropdownlist two more Asp:DropDownList should come under. “房间”的默认值为1,如果用户在下拉列表中选择“ 2”,则应该再出现两个Asp:DropDownList。
I have tried to implement the DropDownLists and set the Type="Hidden", but on page load, you can actually see the field before it gets hidden. 我试图实现DropDownLists并设置Type =“ Hidden”,但是在页面加载时,实际上可以在隐藏该字段之前看到它。
Have also tried with some JQuery the Hide(); 还尝试了一些JQuery的Hide();方法。 method, but this did also not work, because you can also see it for a split second before it gets hidden.
方法,但此方法也不起作用,因为您也可以在隐藏之前一秒钟看到它。
Code: 码:
<div class="contentbooking">
<div class="form-group">
<asp:Label ID="CheckinLabel" runat="server" Text="Check-in Date"></asp:Label>
<asp:TextBox ID="datetimepicker1" ClientIDMode="Static" runat="server" CssClass="form-control"></asp:TextBox>
</div>
<div class="form-group">
<asp:Label ID="CheckoutLabel" runat="server" Text="Check-out Date"></asp:Label>
<asp:TextBox ID="datetimepicker2" ClientIDMode="Static" runat="server" CssClass="form-control"></asp:TextBox>
</div>
<div class="form-group">
<asp:Label ID="RoomsLabel" runat="server" Text="Rooms:"></asp:Label>
<select class="form-control" id="rooms">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-6">
<asp:Label ID="Label2" runat="server" Text="#1:"></asp:Label>
<br />
<asp:Label ID="Label1" runat="server" Text="Adult:"></asp:Label>
<asp:DropDownList ID="adults" CssClass="form-control" runat="server">
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
</asp:DropDownList>
</div>
<div class="col-sm-6">
<br />
<asp:Label ID="Label3" runat="server" Text="Children:"></asp:Label>
<asp:DropDownList ID="childrens" CssClass="form-control" runat="server">
<asp:ListItem>0</asp:ListItem>
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
</asp:DropDownList>
</div>
</div>
<!-- From group for two rooms -->
<div class="form-group">
<div class="col-sm-6">
<asp:Label ID="Label4" type="hidden" runat="server" Text="#2:"></asp:Label>
<br />
<asp:DropDownList ID="adults2" type="hidden" ClientIDMode="static" CssClass="form-control" runat="server">
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
</asp:DropDownList>
</div>
<div class="col-sm-6">
<br />
<asp:DropDownList ID="childrens2" type="hidden" ClientIDMode="static" CssClass="form-control" runat="server">
<asp:ListItem>0</asp:ListItem>
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
</asp:DropDownList>
</div>
</div>
</div>
<div class="form-group">
<br />
<asp:Button ID="Button7" runat="server" OnClick="checkForResevation" Text="Check Availability" CssClass="my-btn" />
</div>
</div>
Is there a way to make it hidden before page is loading so you can't see it, because then what i am doing could work.. 有没有一种方法可以让它在页面加载之前隐藏起来,所以您看不到它,因为那样我就可以了。
Hope someone can take a look. 希望有人可以看看。
Im not sure how to exactly achieve this, but why dont you try it using the razer sytax @if statements. 我不确定如何准确地实现这一目标,但是为什么不使用razer sytax @if语句尝试一下。
details can be found here: http://haacked.com/archive/2011/01/06/razor-syntax-quick-reference.aspx/ 详细信息可以在这里找到: http : //haacked.com/archive/2011/01/06/razor-syntax-quick-reference.aspx/
您可以尝试将初始属性设置为display:none的css用于2个下拉列表,然后在要求下拉列表可见时,更新display:block。
protected void Page_Load(object sender, EventArgs e)
{
adults2.Visible = false;
childrens2.Visible = false;
}
have you try? 你尝试了吗?
I found what i was looking for, and wanted to show the answer. 我找到了我想要的,并想显示答案。 Added this code in the scripting for JavaScript/Jquery:
在JavaScript / Jquery脚本中添加了以下代码:
$(function () {
$('#<%=rooms.ClientID%>').on('change', function () {
$("#<%=adults2.ClientID%>,#<%=childrens2.ClientID%>,# <%=HiddenLabel2.ClientID%> ")[this.value == "2" ? "show" : "hide"]();
});
});
To get it to work.. i needed to add the display:none in my css file for the Asp:DropDownLists. 为了使其工作..我需要在我的css文件中为Asp:DropDownLists添加display:none。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.