CODEWITHSUNDEEP
asp.netpostback
Yakirbu
Yakirbu

Reputation: 182

Asp.net - Postback loses Dropdownlist index

I have a simple Dropdownlist control that JS handles, once the index changes, a div is opened/closed.

html code for initializing the Dropdownlist-

    <select id="selectmethod" onchange="run()">
      <option value="1" selected="selected">option1</option>
      <option value="2" >option2</option>
    </select>

JavaScript code to handle OnChange event-

       function run() {
            var e = document.getElementById("selectmethod");
            var value = e.options[e.selectedIndex].value;

            if (value == 1) {

                $('#changecourseitems').slideUp();
                $('#addnewcourseitems').slideDown();
            }
            if (value == 2) {

                $('#addnewcourseitems').slideUp();
                $('#changecourseitems').slideDown();

            }

Now when the user clicks on an <ASP:LinkButton ... /> a Postback event starts and the Dropdownlist index resets (so as the hidden div). How can I maintain the Dropdownlist index after the Postback ?

Thanks!

Upvotes: 0

Views: 1713

Answers (4)

Lucas L Roselli
Lucas L Roselli

Reputation: 2830

  <asp:DropDownList ID="selectmethod" ClientIDMode="Static" runat="server" EnableViewState="true">
  </asp:DropDownList>

With the ClientIDMode=static you maintain the id as it is specify on the control

your js file should be:

  $('#selectmethod').change(function () {
     var value = $(this).val();

     if (value == 1) {

        $('#changecourseitems').slideUp();
        $('#addnewcourseitems').slideDown();
     }
     if (value == 2) {

        $('#addnewcourseitems').slideUp();
        $('#changecourseitems').slideDown();

     }
  });

Upvotes: 0

Win
Win

Reputation: 62260

If you want to persist the control's state in ASP.Net Web Form, you want to use DropDownList Server Control which uses ViewState under the hood. 

<asp:DropDownList runat="server" ID="DropDownList1">
    <asp:ListItem Text="Add New Course" Value="1" />
    <asp:ListItem Text="Change Course" Value="2" />
</asp:DropDownList>

<div id="changecourseitems">Change course</div>
<div id="addnewcourseitems">Add new course</div>

<asp:LinkButton ID="LinkButton1" runat="Server" OnClick="LinkButton1_Click" 
    Text="Submit" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        var selectMethod = function(){
            if ($('#<%= DropDownList1.ClientID %>').val() === '1') {
                $('#changecourseitems').hide();
                $('#addnewcourseitems').slideDown();
            } else {
                $('#addnewcourseitems').hide();
                $('#changecourseitems').slideDown();
            }
        }
        $('#<%= DropDownList1.ClientID %>').change(selectMethod);
        selectMethod();
    });
</script>

Upvotes: 0

g2000
g2000

Reputation: 490

To maintain the value, there are multiple approaches. 1. Change the select to server control.
2. Add a hidden value and save your select tag value to this hidden value in your run(). And then set the select value in document.ready().

<asp:HiddenField ID="yourHiddenValue" runat="server" />

Your run method.

function run() {
    var e = document.getElementById("selectmethod");
    var value = e.options[e.selectedIndex].value;

    if (value == 1) {

        $('#changecourseitems').slideUp();
        $('#addnewcourseitems').slideDown();
    }
    if (value == 2) {

        $('#addnewcourseitems').slideUp();
        $('#changecourseitems').slideDown();

    }

    $('#<%=yourHiddenValue.ClientID%>').val(value);  // <--- added
}

This is document ready function.

$(function() {
    var hiddenValue = $('#<%=yourHiddenValue.ClientID%>').val();
    $('#selectmethod').val(hiddenValue);
}

Upvotes: 1

Volkan Paksoy
Volkan Paksoy

Reputation: 6937

To maintain the contents of the dropdownlist you either have to re-populate it on the server every time or use viewstate. For example you can populate the data once like this

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        DropDownList1.Items.Add(new ListItem() { Text = "option1", Value = "1", Selected = true });
        DropDownList1.Items.Add(new ListItem() { Text = "option2", Value = "2" });
    }
}

and in the page you can use an ASP control and enable view state:

<asp:DropDownList ID="DropDownList1" runat="server" EnableViewState="true">
</asp:DropDownList>

Now the data will be posted back and forth and will be maintained on the client side

Upvotes: 1

Related Questions