在按钮点击时将Angular数据传递给代码隐藏函数

Question

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

HTML

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

最终输出

<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输出

Answer 1

从发送到浏览器的HTML中可以看到，. net在单击<a>标记时使其执行javascript函数__doPostBack('ctl00$MainContentPlaceholder$ctl00','')。这个函数将围绕页面的整个内容的<form>标签提交回代码隐藏类。然后，这些隐藏代码会对页面上的隐藏表单元素产生特殊的魔力，这些元素是。net webforms用来识别页面状态的。

这是经典的。net webforms范例，并且比指向url的<a>标签要复杂得多。它与angularjs的使用方式也有很大的不同。您在评论中说，硬编码时正确传递了数据名值。这很可能是__doPostBack函数的作用，它不适合angular也就不足为奇了(因为它是由angular创建之前编写的代码生成的)。您有两个可能的选项:

1. 将<a>标签更改为<input type="button" value="{{invoice.DocumentNumber}}" runat="server" ID="yourButton" />为什么会这样工作?简单地说，你只想让angular把正确的值传递到html中，这样当webforms提交时，数据就会传递到你的页面。由于<a>标记与表单值没有关系，因此页面正确地忽略了它的data-name值。事实上，我很惊讶硬编码的值工作，因为一个表单帖子应该忽略的东西不是表单元素。但是它不能忽略<input>元素。

2. 将Public Sub btnPrintInvoiceClicked...方法从服务器端onclick处理程序更改为其自己的端点。看看http://www.asp.net/web-api或者它更老的web表单时代的表亲:http://www.codeproject.com/Articles/353260/ASP-NET-Advanced-Generic-Handler-ASHX

顺便说一句，这是我第一次听说有人试图在webforms中使用angular，后者是微软暗示要放弃的过时产品，而前者是流行的javascript MVC宠儿。我知道这可能是不可能的，但你应该考虑移动到。net MVC，如果可能的话，因为它是一个更好的后端环境，在其中托管你的angularjs应用程序。