在 ASP 上使用按钮显示更多字段答案

【问题标题】：Show more fields with a button on ASP在 ASP 上使用按钮显示更多字段
【发布时间】：2012-07-02 16:47:34
【问题描述】：

我正在做一个网站，员工可以在其中写简历，我有一部分过去的工作，我想显示员工可以写此信息的字段（公司、职位等），但是，我想要只显示其中一个部分，如果员工想要添加更多旧工作，他将单击添加更多，然后为过去的工作显示 2 或 3 个更多字段，目前我有 3 个这样声明的部分：

    <asp:Label ID="Label6" runat="server" Text="Empresa" Style="z-index: 1; left: 10px;
        top: 165px; position: absolute"></asp:Label>
    <asp:TextBox ID="TextBox3" runat="server" Style="z-index: 1; left: 80px; top:  165px;
        position: absolute" Width="200px"></asp:TextBox>
    <asp:Label ID="Label7" runat="server" Text="Fecha" Style="z-index: 1; left: 10px;
        top: 195px; position: absolute"></asp:Label>
    <asp:DropDownList ID="DropDownList1" runat="server" Style="z-index: 1; left: 80px;
        top: 195px; position: absolute">
        <asp:ListItem>Enero</asp:ListItem>
        <asp:ListItem>Febrero</asp:ListItem>
        <asp:ListItem>Marzo</asp:ListItem>
        <asp:ListItem>Abril</asp:ListItem>
        <asp:ListItem>Mayo</asp:ListItem>
        <asp:ListItem>Junio</asp:ListItem>
        <asp:ListItem>Julio</asp:ListItem>
        <asp:ListItem>Agosto</asp:ListItem>
        <asp:ListItem>Septiembre</asp:ListItem>
        <asp:ListItem>Octubre</asp:ListItem>
        <asp:ListItem>Noviembre</asp:ListItem>
        <asp:ListItem>Diciembre</asp:ListItem>
    </asp:DropDownList>
    <asp:DropDownList ID="DropDownList2" runat="server" Style="z-index: 1; left: 172px;
        top: 195px; position: absolute" OnSelectedIndexChanged="DropDownList2_SelectedIndexChanged">
    </asp:DropDownList>
    <asp:Label ID="Label8" runat="server" Text="a" Style="z-index: 1; left: 235px; top: 195px;
        position: absolute"></asp:Label>
    <asp:DropDownList ID="DropDownList3" runat="server" Style="z-index: 1; left: 250px;
        top: 195px; position: absolute">
        <asp:ListItem>Enero</asp:ListItem>
        <asp:ListItem>Febrero</asp:ListItem>
        <asp:ListItem>Marzo</asp:ListItem>
        <asp:ListItem>Abril</asp:ListItem>
        <asp:ListItem>Mayo</asp:ListItem>
        <asp:ListItem>Junio</asp:ListItem>
        <asp:ListItem>Julio</asp:ListItem>
        <asp:ListItem>Agosto</asp:ListItem>
        <asp:ListItem>Septiembre</asp:ListItem>
        <asp:ListItem>Octubre</asp:ListItem>
        <asp:ListItem>Noviembre</asp:ListItem>
        <asp:ListItem>Diciembre</asp:ListItem>
    </asp:DropDownList>
    <asp:DropDownList ID="DropDownList4" runat="server" Style="z-index: 1; left: 342px;
        top: 195px; position: absolute" OnSelectedIndexChanged="DropDownList4_SelectedIndexChanged">
    </asp:DropDownList>
    <asp:Label ID="Label9" runat="server" Text="Puesto:" Style="z-index: 1; left: 10px;
        top: 225px; position: absolute"></asp:Label>
    <asp:TextBox ID="TextBox4" runat="server" Style="z-index: 1; left: 80px; top: 225px;
        position: absolute" Width="200px"></asp:TextBox>
    <asp:Label ID="Label10" runat="server" Text="Funciones:" Style="z-index: 1; left: 10px;
        top: 255px; position: absolute"></asp:Label>
    <asp:TextBox ID="TextBox5" runat="server" Rows="5" TextMode="MultiLine" Style="z-index: 1;
        left: 80px; top: 255px; position: absolute" Width="200"></asp:TextBox>

所以，我只想隐藏其他 2 个，然后在单击“添加更多”按钮时显示它们，我是 ASP 的真正新手，不知道该怎么做，以及这会如何影响其他我有标签和文本框，因为每个人都有一个左上角的位置，如果他们需要移动或者他们会发生什么。

我希望我正在解释我的问题，你可以帮助我：D

【问题讨论】：

标签： asp.net visual-studio-2010 visual-studio button

【解决方案1】：

protected void btnShowMore_Click(object sender, EventArgs e)
{
DropDownList1.Visible=false;
DropDownList2.Visible=false;
DropDownList3.Visible=true;
}

如果您希望显示控件但用户无法对其执行操作，则可以使用属性“已启用”。

【讨论】：

谢谢！！这行得通，但我想要的是，当我单击“添加更多”时，“添加更多”按钮下的内容更多地移到底部，因为现在只是在网站上留下一个空白区域

【解决方案2】：

这听起来像你需要一些 javascript 魔法。在您的 aspx 页面内单击按钮时，您可以执行类似的操作。只需要让您想要切换的部分默认具有“无”的显示属性（样式=“显示：无”）。然后当点击“添加更多”时，显示属性将变为“块”，显示隐藏部分：

<script type="text/javascript">
    function toggle_visibility(id) {
        var e = document.getElementById(id);
        if(e.style.display == 'block')
        {
            e.style.display = 'none';
        }
        else
        {
            e.style.display = 'block';
         }
    }
</script>

然后在按钮或链接所在的位置调用这个 javascript 函数：

<a href="javascript:toggle_visibility('#idOfDiv');">Add More</a>

祝你好运！

【讨论】：