Dropdownlist without postback when autopostback must set to true (code's included)

Question

I have created one drop down list and a calendar extender w corresponding. Each value of the dropdownlist should affect the style visibility differently based on the selection. As right now, the functionality works; however, for each time I try select a different listtem, it refreshes the entire page and I do not want to set AutoPostBack="false. Please let me know what's the best way to solve this issue.

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>

Code Behind

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

or you can use an updatepanel ( requires Microsoft Ajax Control Tool Kit). Here's the documentation page from microsoft: http://www.asp.net/Ajax/Documentation/Live/overview/UpdatePanelOverview.aspx

Answer 2

Or you can do this with client side code and replace the <asp:DropDownList> with a <select> . Then you can use jQuery to attach an event handler to the and fire off a function when the selection changes.

Simple Example:

In a javascript code behind or in the section of the page:

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

Then where you want that drop down list to be rendered:

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

I am a firm believer in NOT using server side resources to render html that can be written as client side code to begin with. That <asp:DropDownList> will just get rendered as almost the same html as using a <select> in the first place.

All of the html elements on that page can be written using html tags instead of asp tags that will get converted to html. Do a little research on using jQuery for event handling of client side code. It will change the way you think about web application programming.

Answer 3

You can do this using JQuery. Hook up a change handler to the dropdown and let it handle the visibility and text assignments..