Asp.net - Postback теряет индекс раскрывающегося списка

Question

У меня есть простой элемент управления Dropdownlist, который обрабатывает JS, после изменения индекса, div открывается/закрывается.

HTML код для инициализации Dropdownlist-

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

JavaScript код для обработки OnChange событийно

 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(); 

      } 

Теперь, когда пользователь нажимает на <ASP:LinkButton ... /> начинается, событие Postback и индекс возвратов списка пункт (так что скрытый div). Как сохранить индекс Dropdownlist после обратной передачи?

Спасибо!

Answer 1

Чтобы сохранить содержимое выпадающего списка, вам необходимо либо повторно заполнить его на сервере каждый раз, либо использовать viewstate. Например, вы можете заполнить данные после того, как этот

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" }); 
    } 
} 

и на странице вы можете использовать элемент управления ASP и включить состояние просмотра:

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

Теперь данные будут размещены взад и вперед и будет поддерживаться на стороне клиента

Answer 2

Для поддержания ценности существует несколько подходов. 1. Измените элемент управления select на сервер.
2. Добавьте скрытое значение и сохраните значение выбранного тега в этом скрытом значении в вашем run(). Затем установите значение в документе document.ready().

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

Ваш метод прогона.

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 
}   

Это готовая документация.

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

Answer 3

Если вы хотите, чтобы сохраняться состояние элемента управления в ASP.Net веб-формы, вы хотите использовать Контроль сервера DropDownList, который использует ViewState под капотом.

<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> 

Answer 4

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

С ClientIDMode = статический вы поддерживаете идентификатор, как это указать на управление

файл JS должен быть:

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

    if (value == 1) { 

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

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

    } 
    });