如何使用asp.net webform处理AngularJs？

Question

I just implementing AngularJs on a website with is written in asp.net webforms.

I figure out when ng-Submit on button, the form is also making Post call.

How to stop form from submitting and let the angular do its work .

My sample code is as below.

<form id="form1" runat="server">
   <div >
     <input type="text" data-ng-model="enteredName" ng-model-instant/>
     <button class="btn" value="add" data-ng-submit="addName()" >Add</button>
   </div>
</form>


//Add Name function
$scope.addName = function () {
   $scope.names.push($scope.enteredName);
   $scope.enteredName = '';
};

Note : The ng-submit controller is working fine it is adding the input to the string list but after that form makes post call. and page go to IsPostBack The ng-submit controller is working fine it is adding the input to the string list but after that form makes post call. and page go to IsPostBack .

Anyone guide me to handle the form from not posting.

Answer 1

If you plan on making an angular form using .NET you should probably use .NET MVC instead of .NET webforms. The reason is that all webforms pages have their own <form> element that is used to maintain state. This can be seen when you make a new webforms page in Visual studio, it automatically adds:

<form runat="server" ID="Form1">

Additionally, when you make webforms controls like <asp:LinkButton> or other things that provide "enhanced" functionality from base HTML, they actually get rendered as <input> tags that use the parent form. Therefore, to take advantage of any of the features of webforms, you really need to stick to their model and it gets very difficult to add anything else on top of that. It's possible, and sometimes quite easy, but it's a very long learning curve to figure out all of the gotchas along the way.

Conversely, .NET MVC gives you less out of the box, exposing the raw HTML to you with very few wrappers and things like postbacks or viewstates. I think that's a much better host for something that is using angular, especially if you are using angular for forms, which will prevent you from using some of .NET's webforms functionality anyways.

Answer 2

I'd start by using ng-click instead of ng-submit. And i would also stay clear of asp.net controls on pages that use angular.