Question

我正在尝试在asp中创建一个预订页面，就像大多数酒店一样。我似乎无法为此问题编码/找到正确的解决方案。

我的问题是用户可以预订一到四个房间。如果用户选择，让我们说2个房间，我必须再制作两个asp：DropDownList for adult / Children for selected room。

现在我的booking.aspx页面包含：

CheckIn (Asp:TextBox)
CheckOut (Asp:TextBox)
Rooms (Selected tag - Default value = 1)
Adults (Asp:DropDownList)
Children (Asp:DropDownList)

Rooms中的默认值为1，如果用户在下拉列表中选择2 另外两个Asp：DropDownList应该在。

我尝试实现DropDownLists并设置Type =“Hidden”，但在页面加载时，您可以在隐藏之前实际看到该字段。

还尝试了一些JQuery的Hide（）;方法，但这也没有用，因为你可以在隐藏之前看到它一瞬间。

代码：

<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>

有没有办法在页面加载之前隐藏它，所以你看不到它，因为那时我正在做的事情可以工作..

希望有人可以看看。

Answer 1

我不确定如何完全实现这一点，但为什么不使用razer sytax @if语句尝试它。

详细信息可以在这里找到： http://haacked.com/archive/2011/01/06/razor-syntax-quick-reference.aspx/

Answer 2

您可以尝试使用初始属性设置为css的css作为display：none for 2下拉列表，然后在需要显示下拉列表时，更新display：block。

Answer 3

protected void Page_Load(object sender, EventArgs e)
{
   adults2.Visible = false;
   childrens2.Visible = false;
}

你试试吗？

Answer 4

我找到了我想要的东西，并想表明答案。在JavaScript / Jquery的脚本中添加了此代码：

        $(function () {
            $('#<%=rooms.ClientID%>').on('change', function () {
                $("#<%=adults2.ClientID%>,#<%=childrens2.ClientID%>,# <%=HiddenLabel2.ClientID%> ")[this.value == "2" ? "show" : "hide"]();                    
            });
        });

要让它工作..我需要在我的css文件中为Asp：DropDownLists添加display：none。

在asp.net中的“选择”值的页面上添加两个DropDownList

4 个答案: