当autopostback必须设置为true时，不带回发的下拉列表（包含代码）

Question

我创建了一个下拉列表和一个对应的日历扩展器。 下拉列表的每个值都应根据选择以不同方式影响样式可见性。 就目前而言，功能有效; 但是，每次我尝试选择一个不同的listtem，它刷新整个页面，我不想设置AutoPostBack =“false。请让我知道解决这个问题的最佳方法是什么。

asp.ascx

           <asp:DropDownList ID="dropdownlist" runat="server"  OnSelectedIndexChanged="dropdownlist_SelectedIndexChanged" AutoPostBack="True" >
                        <asp:ListItem Value="1">a</asp:ListItem>
                        <asp:ListItem Value="2">b</asp:ListItem>
                        <asp:ListItem Value="3">c</asp:ListItem>
                        <asp:ListItem Value="4">d</asp:ListItem>
                        <asp:ListItem Value="5">e</asp:ListItem>
                        <asp:ListItem Value="6">f</asp:ListItem>
                        <asp:ListItem Value="7">g</asp:ListItem>
                    </asp:DropDownList> <asp:Panel runat="server" ID="StartDate" >
                    <asp:Label ID="lblStartDate"  runat="server" Text="Start Date:"></asp:Label>

                    <asp:TextBox ID="txtStartDate" runat="server"></asp:TextBox>
                    <asp:CompareValidator ID="CompareValidatorStartDate" runat="server" ErrorMessage="Please enter a validate date" ControlToValidate="txtStartDate" Type="Date" Operator="DataTypeCheck" Display="Static" Font-Italic="False" SetFocusOnError="True"></asp:CompareValidator>

            </asp:Panel>
            <cc1:CalendarExtender ID="CalendarExtenderStartDate" TargetControlID="txtStartDate" runat="server"></cc1:CalendarExtender>
            <asp:Panel runat="server" ID="EndDate" >

                    <asp:Label ID="lblEndDate" runat="server" Text="End Date:"></asp:Label>

                    <asp:TextBox ID="txtEndDate" runat="server"></asp:TextBox>
                    <asp:CompareValidator ID="CompareValidatorEndDate" runat="server" ErrorMessage="Please enter a validate date" ControlToValidate="txtEndDate" Type="Date" Operator="DataTypeCheck" Display="Static" Font-Italic="False" SetFocusOnError="True"></asp:CompareValidator>

            </asp:Panel>
            <cc1:CalendarExtender ID="CalendarExtenderEndDate" TargetControlID="txtEndDate" runat="server"></cc1:CalendarExtender>

代码背后

if (!IsPostBack)
    {



            SetDateFields();
    }
}


  protected void dropdownlist_SelectedIndexChanged(object sender, EventArgs e)
{
    SetDateFields();
} 
    private void SetDateFields()
{ 
    switch (dropdownlist.SelectedValue)
    {
        case "1":
        case "3":
        case "5":
            EndDate.Visible = false;
            StartDate.Visible = true;
            lblStartDate.Text = "As Of Date:";
            break;
        case "7":
            EndDate.Visible = false;
            StartDate.Visible = false;
            break;
        default:
            EndDate.Visible = true;
            StartDate.Visible = true;
            lblStartDate.Text = "Start Date:";
            lblEndDate.Text = "End Date:";
            break;
    }   
}

Answer 1

或者您可以使用updatepanel（需要Microsoft Ajax Control Tool Kit）。 这是microsoft的文档页面： http ： //www.asp.net/Ajax/Documentation/Live/overview/UpdatePanelOverview.aspx

Answer 2

或者您可以使用客户端代码执行此操作，并使用<select>替换<asp:DropDownList> <select> 。 然后，您可以使用jQuery将事件处理程序附加到并在选择更改时触发函数。

简单示例：

在页面后面或页面部分的javascript代码中：

<script type="text/javascript">
    $(document).ready(function(){
        $("#mySelect").bind("change", function () {
            var val = $(this).val();
            alert("Selection was " + val);
        });
    });
</script>

然后，您希望在下拉列表中呈现：

<select id="mySelect">
    <option value="1">a</option>
    <option value="2">b</option>
    <option value="3">c</option>
</select>

我坚信不使用服务器端资源来呈现可以作为客户端代码编写的html。 那个<asp:DropDownList>将被渲染为与首先使用<select>几乎相同的html。

该页面上的所有html元素都可以使用html标签而不是将转换为html的asp标签来编写。 做一些关于使用jQuery进行客户端代码事件处理的研究。 它将改变您对Web应用程序编程的看法。

Answer 3

你可以使用JQuery来做到这一点。 将更改处理程序连接到下拉列表，让它处理可见性和文本分配。