将 .Net 控制值传递给 javascript 函数答案

【问题标题】：Passing .Net control values to a javascript function将 .Net 控制值传递给 javascript 函数
【发布时间】：2015-02-06 06:03:16
【问题描述】：

我正在尝试根据单击的按钮向 javascript 函数传递不同的值。

我在页面上有两个隐藏字段，我希望在单击 btnA 时使用第一个字段 hidA 的值，并在单击 btnB 时使用第二个字段 hidB 的值。

该值将被 javascipt 读取。

示例

onclick="test(22);"

但是我无法在不破坏语法的情况下读取 .Net 控件值。

ASPX

<input id="btnA" type="button" value="A" onclick="test($('#<%= hidA.ClientID%>').val());"/>
<input id="btnB" type="button" value="B" onclick="test($('#<%= hidB.ClientID%>').val());"/>

jQuery

function test(e){
  $('#label').text(e);
}

问题

如何将 ASP.NET 控件值传递给 javascript 函数？

【问题讨论】：

如果您在客户端看到<% %> 标签，那么这实际上不是语法问题，而是该页面根本没有被服务器端的 ASP.NET 处理。它只是按原样传递给客户端，就像标准 HTML 一样。如果不是这样，那么我可能误读了你的问题，你能澄清一下吗？
你想做什么？您想要 ClientID（从 .NET 实际生成的 ID）还是想要在 DOM 中使用来自代码隐藏的“某些”ID？
以这种方式使用.net控件的问题是撇号过早地结束了字符串。
我在页面上有两个隐藏字段，我希望单击按钮 A 时使用第一个字段的值，单击按钮 B 时使用第二个字段的值。
@Leon 我想获取 asp:hiddenfield 的值。

标签： javascript jquery asp.net function

【解决方案1】：

您可以在服务器端添加onclick 属性，例如

protected void Page_Load(object sender, EventArgs e)
{
    btnA.Attributes.Add("onclick", "test($(" + hidA.ClientID + ").val());");
    btnB.Attributes.Add("onclick", "test($(" + hidB.ClientID + ").val());");                
}

当然前提是input 元素在.aspx 中正确设置了runat 属性：

<input id="btnA" type="button" value="A" runat="server"  />
<input id="btnB" type="button" value="B" runat="server" />

上面将以下html发送回客户端：

<input type="hidden" name="hidA" id="hidA" value="22" />
<input type="hidden" name="hidB" id="hidB" value="33" />        

<input name="btnA" type="button" id="btnA" value="A" onclick="test($(hidA).val());" />
<input name="btnB" type="button" id="btnB" value="B" onclick="test($(hidB).val());" />

我认为这是所需的输出。

【讨论】：

【解决方案2】：

最简单的方法是在隐藏字段上将 ClientIDMode 设置为静态，并在测试变量中发布“A”或“B”。像这样：

<input id="btnA" type="button" value="A" onclick="test('A');"/>

然后在测试方法中，您从隐藏的控件中获取值（而不是在调用本身中）：

$("#hid" + parameterValue).val();

这是一种选择。但是，您以这种方式受限于您推送给客户端的控件。但由于您已经在原始请求中创建了隐藏控件，我认为这不会成为问题。

【讨论】：

这是我正在寻找的替代和首选方法，但我在构建字符串时遇到了类似的问题。

【解决方案3】：

您是否考虑过将点击事件移出控件？

<input id="btnA" type="button" value="A" cssClass="btnA hidBtn" />
<input id="btnB" type="button" value="B" cssClass="btnB hidBtn" />

<script type="text/javascript">
      jQuery(function($) {
           $(".btnA").click(function() {
               test($("#<%= hidA.ClientID %>").val());
           });
           $(".btnB").click(function() {
               test($("#<%= hidB.ClientID %>").val());
           });

           // Or you could try something like this
           $(".hidBtn").click(function() {
              var hidId = "#"+this.id.replace("btn","hid");
              test($(hidId).val());
           });
      });
</script>

【讨论】：

是的，这就是我目前的做法，但现实情况是没有 2 个按钮和两个隐藏字段，而是有 10 个。出现这个问题是因为我试图将所有点击事件组合成一个较小的函数。不过感谢您的回答。
另见stackoverflow.com/questions/2027062/jquery-hidden-field 您可以使用 $= 选择器来查找值或将 id 设为静态，如 Leon 所述。