How to handle AngularJs with asp.net webform?

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.

Anyone guide me to handle the form from not posting.

Try changing the type of the button element to button. <button type="button" ...>Add</button> — Edminsson
– Edminsson, Commented Sep 22, 2014 at 16:54
@Edminsson after changing type= button ng-submit is not working so i have changed the ng-submit to ng-click which is performing — Hassaan
– Hassaan, Commented Sep 22, 2014 at 17:03

welegan · Accepted Answer · 2014-09-22 17:12:18Z

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.

answered Sep 22, 2014 at 17:12

welegan

3,0533 gold badges17 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hassaan Over a year ago

yes u r right. There are many problem with handling angular with web forms. The postback is the toughest one to deal and other ajax tools like update panels and script managers are also creating lot bugs. When i read the documentation. it says its best with html/css3. now i am agreed why they say so!

welegan Over a year ago

This blog post: rachelappel.com/integrating-aspnet-web-forms-and-aspnetmvc gives a step-by-step explanation of how to add MVC framework to a webforms project. You can give that a shot, and then host your angular form in a separate view within the same web project. Be warned, though, that there is a small learning curve with MVC to get started; it's very different from webforms (for the better).

ps. · Accepted Answer · 2015-04-14 22:25:19Z

0

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.

answered Apr 14, 2015 at 22:25

ps.

4,3605 gold badges34 silver badges39 bronze badges

Collectives™ on Stack Overflow

How to handle AngularJs with asp.net webform?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related