将所选值服务器端下拉列表传递给javascript函数

Question

我有这样的Web表单和JavaScript函数：

网络表格

<div>
    <asp:DropDownList runat="server" ID="ddlType">
        <asp:ListItem Value="1" Text="Type1"></asp:ListItem>
        <asp:ListItem Value="2" Text="Type2"></asp:ListItem>
    </asp:DropDownList>
    <asp:LinkButton  ID="lnkTest" OnClientClick='<%= "getValue('0' + '|' + 'ddlType.SelectedValue');return false;" %>' runat="server" Text="text">
                           new
    </asp:LinkButton>
</div>

JavaScript功能

<script>
    function getValue(Input) {       
        var result = Input.split("|");
        section1 = result[0];
        section2 = result[1];
    }
</script>

我需要将包含'0' （硬编码）和ddlType.SelectedValue字符串传递给getValue 。 此Web表单存在语法错误Server tags cannot contain <% ... %> constructs （我知道）。 我可以通过getElementById获取选定的值，但我想将SelectedValue作为参数传递。 我读了很多帖子，但没有一个没有通过SelectedValue 。

如果有人可以解释该问题的解决方案，这将非常有帮助。

Answer 1

SelectedValue是服务器端值。 服务器在页面加载时（即在页面呈现给用户之前）可用于服务器端代码。 在javascript中，它根本没有任何意义，并且在用户单击链接时不可用。

如果要在客户端获取选定的值，可以执行以下操作：

首先，从LinkBut​​ton中删除所有OnClientClick代码。

其次，编写所有这样的javascript（在页面底部，完成所有HTML / ASP标记后：

document.getElementById("<%=lnkTest.ClientID %>").addEventListener("click", function(event) {
  event.preventDefault(); //stop default action of the link button, to allow script to execute
  var selectedVal = document.getElementById("<%=ddlType.ClientID %>").value;
  getValue('0|' + selectedVal);
});

这将导致浏览器侦听用户单击按钮，然后运行给定的JS函数。 该函数获取下拉列表的当前选定值（在浏览器中选定-由于没有发生回发，服务器此时不知道选择了什么），并将该选定值传递给现有的getValue函数。

注意：如果您想知道，我使用结构<%=ddlType.ClientID %>的原因是因为ASP.NET根据位于其中的服务器端控件的结构动态创建每个元素的客户端ID。 。 因此，仅直接依赖服务器端ID（例如“ ddlType”）将无法可靠地标识呈现的DOM中的元素。 .NET在运行时提供ClientID值，以便允许我们访问生成的ID。