Asp.net - 回发丢失 Dropdownlist 索引答案

【问题标题】：Asp.net - Postback loses Dropdownlist indexAsp.net - 回发丢失 Dropdownlist 索引
【发布时间】：2015-09-23 13:27:41
【问题描述】：

我有一个 JS 处理的简单下拉列表控件，一旦索引发生变化，就会打开/关闭一个 div。

初始化下拉列表的html代码-

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

处理 OnChange 事件的 JavaScript 代码-

       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 ... /> 一个回发事件开始，下拉列表索引重置（隐藏的 div 也是如此）。回发后如何维护 Dropdownlist 索引？

谢谢！

【问题讨论】：

是否需要维护 Dropdownlist 索引？通常，ASP.NET 会处理这个问题。如果你想让你的打开/关闭的 div 保持它们的状态，那是另一个问题。
好吧，我在帖子中进行了描述，但是 ASP.NET 不会处理下拉列表索引，因为每次单击链接按钮时它都会重置
代码隐藏中有设置下拉列表索引的内容吗？
@jokesonhiltionhotel 我的朋友，您遇到了问题，因为您的选择控件不是 asp 控件，为什么您不使用 asp 控件下拉列表？它会更简单
如果您没有使用更新面板，则每次回帖都会重新呈现整个页面

标签： asp.net postback

【解决方案1】：

要维护下拉列表的内容，您必须每次都在服务器上重新填充它或使用视图状态。例如，您可以像这样填充数据一次

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>

现在数据会来回发布，会在客户端维护

【讨论】：

【解决方案2】：

要保持价值，有多种方法。 1.将选择更改为服务器控制。
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);
}

【讨论】：

但是 div 'changecourseitems' 每次单击链接按钮时都会关闭，我希望它保持打开状态，因为它应该在列表的索引 2 中打开。
你可能需要在文档准备功能中应用逻辑（显示/隐藏）

【解决方案3】：

如果你想在 ASP.Net Web 窗体中保持控件的状态，你想使用 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>

【讨论】：

我试过你提到的方式，它正在维护列表索引，但它仍然关闭了应该在索引为 2 时打开的 div（例如）。我希望它保持索引但也保持 div 可见。

【解决方案4】：

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

使用 ClientIDMode=static，您可以维护控件上指定的 id

你的 js 文件应该是：

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

     if (value == 1) {

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

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

     }
  });

【讨论】：