带有角度回发的ASP.NET WebForms

Question

im trying to use Angular framework in existing ASP.NET WebForms application and problem i ran into is this:

Client side code:

<select id="fooSelect" class="span8" runat="server" clientidmode="Static">
 <option ng-repeat="foo in foos" value="{{foo.Id}}">{{foo.Title}}</option>
</select>

When form gets submited (whole page postback), value of fooSelect.Value is "{{foo.Id}}"

How to get value of selected option on server side?

Answer 1

You can't use angular for server select tag. Actually, selected option value computed on server on postback. So as you have value="{{partner.Id}}" in markup, you getting exactly this value. In my opinion you can use plain select element without runat="server" attribute and bind selected id to hidden field, accessible on server-side:

<select ng-model="partner" ng-options="p.Title for p in partners" >
    <option value="">--Select partner--</option>
</select>
<br />
<input type="hidden" id="selectedPartnerId" runat="server" ng-value="partner.Id" />

Answer 2

ASP.Net is not a good candidate for integration with AngularJS (and maybe other SPA). The abstraction against which ASP.Net is build makes it nearly impossible to leverage any capability of Angular such as routing or data binding.

ASP.Net dynamically generates content, which you don't have much control over. It would generate contains (like span), dynamic client ids an all to keep the data in sync and detect changes on the server.

I seriously doubt, if one can achieve data-binding in AngularJS for content generated with ASP.Net. The best that can work would be input type binding with ng-model and getting that data on the server with postback.

I highly recommend you to switch to ASP.Net MVC