当自动回发必须设置为 true 时没有回发的下拉列表（包含代码）答案

【问题标题】：Dropdownlist without postback when autopostback must set to true (code's included)当自动回发必须设置为 true 时没有回发的下拉列表（包含代码）
【发布时间】：2012-03-27 09:56:08
【问题描述】：

我创建了一个下拉列表和一个对应的日历扩展器。下拉列表的每个值应根据选择不同地影响样式可见性。就目前而言，该功能有效；但是，每次我尝试选择不同的列表项时，它都会刷新整个页面，我不想设置 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;
    }   
}

【问题讨论】：

标签： c# asp.net

【解决方案1】：

或者您可以使用客户端代码执行此操作，并将<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 应用程序编程的看法。

【讨论】：

【解决方案2】：

或者您可以使用更新面板（需要 Microsoft Ajax 控制工具包）。这是来自微软的文档页面：http://www.asp.net/Ajax/Documentation/Live/overview/UpdatePanelOverview.aspx

【讨论】：

【解决方案3】：

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

【讨论】：