Passing Angular data to code-behind function on button click

Question

I have a code-behind function that is called when a hyperlink is clicked. The function should then get the name attribute from the hyperlink and use that string to call another function. The name attribute is being populated by an angular ngRepeat. My problem is that when I try to get the name attribute in the code-behind, it just shows an empty string and not the name attribute that "should" have been passed.

HTML

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

Final HTML Output

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

VB Code-Behind

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

Thanks in advance!

Edit: Added HTML output

So you're saying that data-name doesn't deliver the right data? — ForgetfulFellow
– ForgetfulFellow, Commented Jul 30, 2014 at 17:54
Is there any way you can check if other data can be interpolated correctly? — ForgetfulFellow
– ForgetfulFellow, Commented Jul 30, 2014 at 18:40
I tried passing in non-Angular data through the name attribute and it works fine. Whenever I add in the Angular data, it just shows the empty string. — Deafsilver
– Deafsilver, Commented Jul 30, 2014 at 18:50
Could you add the final html output of the <a> tag? As it is written, I'm surprised the btnPrintInvoiceClicked callback is being triggered at all (because all server callbacks on webforms happen via form POSTs, not plain a-tag clicks). The only way it could be getting to that function is if .NET then modifies the onclick of the resulting html to do a form submission instead of a url change. — welegan
– welegan, Commented Jul 30, 2014 at 18:54

welegan · Accepted Answer · 2014-07-30 19:18:35Z

As you can see from the HTML that gets sent to the browser, .NET causes the <a> tag to perform the javascript function __doPostBack('ctl00$MainContentPlaceholder$ctl00','') when it is clicked. This function submits the <form> tag which surrounds the entire contents of your page back to your code-behind class. That code-behind then does special magic with the hidden form elements on your page that .NET webforms put there to identify the state of the page.

This is the classic .NET webforms paradigm, and is a lot more complex than the <a> tag pointing to a url would have you believe. It is also very different from how angularjs is meant to be used. You said in a comment that the data-name value is correctly passed when hard-coded in. This is probably the doing of the __doPostBack function, and it's unsurprising that it does not play well with angular (since its generated per page by code that was written before angular was created). You have two possible options:

Change your <a> tag to an <input type="button" value="{{invoice.DocumentNumber}}" runat="server" ID="yourButton" /> Why would this work? Simply put, you just want angular to transclude the right value into the html so that when webforms submits, the data is passed to your page. Since <a> tags have no relationship to form values, the page rightly ignores its data-name value. In fact I'm surprised that hardcoding the value works at all, because a form post should ignore things that are not form elements. It cannot ignore an <input> element, though.
Change your Public Sub btnPrintInvoiceClicked... method from being a server-side onclick handler to be its own endpoint. Take a look at http://www.asp.net/web-api or its older, web-forms-era cousin: http://www.codeproject.com/Articles/353260/ASP-NET-Advanced-Generic-Handler-ASHX

As an aside, this is the first time I've heard of someone trying to use angular with webforms, the latter being a bit of a dinosaur that Microsoft has hinted at abandoning and the former being in-vogue javascript MVC darling. I know it may not be possible, but you should consider moving to .NET MVC if possible since it is a much better backend environment in which to host your angularjs app.

Collectives™ on Stack Overflow

Passing Angular data to code-behind function on button click

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related