单击按钮时将 Angular 数据传递给代码隐藏函数答案

【问题标题】：Passing Angular data to code-behind function on button click单击按钮时将 Angular 数据传递给代码隐藏函数
【发布时间】：2014-07-31 03:18:35
【问题描述】：

我有一个在单击超链接时调用的代码隐藏函数。然后该函数应该从超链接中获取名称属性并使用该字符串调用另一个函数。 name 属性由角度 ngRepeat 填充。我的问题是，当我尝试在代码隐藏中获取名称属性时，它只显示一个空字符串，而不是“应该”传递的名称属性。

HTML

<a href="javascript:;" data-name="{{invoice.DocumentNumber}}" runat="server" onserverclick="btnPrintInvoiceClicked">Print Invoice</a>

最终的 HTML 输出

<a data-name="90979157" href="javascript:__doPostBack('ctl00$MainContentPlaceholder$ctl00','')">Print Invoice</a>

VB 代码隐藏

Public Sub btnPrintInvoiceClicked(ByVal sender As Object, ByVal e As EventArgs)
    Dim inv As HtmlAnchor = CType(sender, HtmlAnchor)
    Dim invoiceNumber As String = inv.Name
    GetInvoicePDF(invoiceNumber)
End Sub

提前致谢！

编辑：添加 HTML 输出

【问题讨论】：

所以你是说data-name 没有提供正确的数据？
正确。它提供一个空字符串。
有什么方法可以检查其他数据是否可以正确插值？
我尝试通过 name 属性传入非 Angular 数据，它工作正常。每当我添加 Angular 数据时，它只会显示空字符串。
你能添加<a>标签的最终html输出吗？正如它所写的那样，我很惊讶btnPrintInvoiceClicked 回调完全被触发（因为网络表单上的所有服务器回调都是通过表单 POST 发生的，而不是简单的 a-tag 点击）。获得该功能的唯一方法是，如果 .NET 然后修改生成的 html 的 onclick 以执行表单提交而不是更改 url。

标签： asp.net .net vb.net angularjs code-behind

【解决方案1】：

从发送到浏览器的 HTML 中可以看出，.NET 会导致 <a> 标记在单击时执行 javascript 函数 __doPostBack('ctl00$MainContentPlaceholder$ctl00','')。此函数将围绕您页面的全部内容的<form> 标记提交回您的代码隐藏类。然后，该代码隐藏对页面上隐藏的表单元素产生特殊的魔力，.NET webforms 将这些元素放在那里以识别页面的状态。

这是经典的 .NET 网络表单范例，比指向 url 的 <a> 标记要复杂得多。它也与 angularjs 的使用方式有很大不同。您在评论中说，在硬编码时正确传递了数据名称值。这可能是 __doPostBack 函数的作用，它不能很好地与 angular 配合使用也就不足为奇了（因为它每页生成在创建 Angular 之前编写的代码）。您有两种可能的选择：

将您的<a> 标签更改为<input type="button" value="{{invoice.DocumentNumber}}" runat="server" ID="yourButton" /> 为什么这样会起作用？简而言之，您只是希望 Angular 将正确的值转换为 html，以便在提交 webforms 时，将数据传递到您的页面。由于<a> 标签与表单值没有关系，因此页面正确地忽略了它的 data-name 值。事实上，我很惊讶硬编码值的工作原理，因为表单帖子应该忽略不是表单元素的东西。但是，它不能忽略 <input> 元素。
将您的 Public Sub btnPrintInvoiceClicked... 方法从服务器端的 onclick 处理程序更改为它自己的端点。看看http://www.asp.net/web-api 或其较早的网络表单时代表亲：http://www.codeproject.com/Articles/353260/ASP-NET-Advanced-Generic-Handler-ASHX

顺便说一句，这是我第一次听说有人尝试将 Angular 用于 Web 表单，后者有点像微软暗示要放弃的恐龙，而前者是流行的 javascript MVC 宠儿。我知道这可能是不可能的，但是如果可能的话，你应该考虑迁移到 .NET MVC，因为它是一个更好的后端环境来托管你的 angularjs 应用程序。

【讨论】：