javascript - 无法获取 asp :textbox on external javascript file 的值

Question

例子如下: abcd.aspx

<asp:TextBox ID="txtFName" runat="server" ></asp:TextBox>

<asp:Button ID="btnLogin" runat="server" Text="Login" 
onclick="btnLogin_Click" OnClientClick = "loginAlert()" />

javascriptfile.js

function loginAlert() {
var name = document.getElementById('<% txtFName.ClientID %>').value;
alert(name);

链接到 .aspx 页面上的 javascript 文件

<script src="../../JSfiles/javascriptfile.js" type="text/javascript"></script>

此处名称不会出现在弹出框中。

Answer 1

您不能在普通文件(如您的 <% )中使用代码块( %> 和 javascriptfile.js )，因为它们不会被 ASP.NET 以任何方式解释。您可以做的是将文本框的 ID 传递给一个函数:

function loginAlert(ctrl) {
  var name = document.getElementById(ctrl).value;
  alert(name);
}

然后标记将如下所示:

<asp:Button ID="btnLogin" runat="server" Text="Login" 
  OnClick="btnLogin_Click" OnClientClick="loginAlert('<%=txtFName.ClientID%>')" />

更新

我没有注意到像<%=...%>这样的构造在服务器端控件声明中不起作用(因为它们基本上在编译页面时转换为 Response.Write 语句)。至少有两种方法可以解决这个问题:

您可以使对名称文本框的 DOM 元素的引用全局可用。您的标记如下所示:

<script type="text/javascript">
  var loginNameId = '<%=txtFName.ClientID%>';    
</script> 

<asp:Button ID="btnLogin" runat="server" Text="Login" 
  OnClick="btnLogin_Click" OnClientClick="loginAlert()" />

还有你的loginAlert将如下所示:

function loginAlert() {
  var name = document.getElementById(loginNameId).value;
  alert(name);
}

我个人不喜欢这个解决方案，因为你用变量污染了全局命名空间，而且它通常不是很优雅。

或者，您可以将数据属性与 ASP.NET 数据绑定(bind)一起使用。

标记:

<asp:Button ID="btnLogin" data-name='<%# txtFName.ClientID %>' runat="server" Text="Login" 
  OnClick="btnLogin_Click" OnClientClick="loginAlert(this)" />

JavaScript:

function loginAlert(ctrl) {
  var name = document.getElementById(ctrl.readAttribute('data-name')).value;
  alert(name);
}

代码隐藏:

protected void Page_Load(object sender, EventArgs e)
{
  if (!Page.IsPostBack)
    DataBind();
}