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

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

我只是在一个用asp.net webforms编写的网站上实现AngularJs。

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

我弄清楚当按钮上的ng-Submit时，表格也在发帖。

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.

注意：ng-submit控制器工作正常，它将输入添加到字符串列表，但在该表单后进行调用。和页面转到IsPostBack。

Anyone guide me to handle the form from not posting.

任何人都指导我处理表格而不发布。

2 个解决方案

#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:

如果您打算使用.NET创建一个有角度的表单，您应该使用.NET MVC而不是.NET webforms。原因是所有webforms页面都有自己的

元素，用于维护状态。在Visual Studio中创建新的webforms页面时可以看到这一点，它会自动添加：

<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.

此外，当您创建像 这样的webforms控件或从基本HTML提供“增强”功能的其他东西时，它们实际上会呈现为使用父窗体的 标记。因此，为了利用webforms的任何功能，你真的需要坚持他们的模型，并且很难在其上添加任何其他东西。这是可能的，有时候也很容易，但这是一个很长的学习曲线，可以找出沿途的所有问题。 ：linkbut​​ton>

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.

相反，.NET MVC为您提供了更少的开箱即用，只需很少的包装器和回发或视图状态就可以向您展示原始HTML。我认为对于使用angular的东西来说，这是一个更好的主机，特别是如果你使用angular for forms，这将阻止你使用.NET的webforms功能。

#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.

我首先使用ng-click而不是ng-submit。而且我也会忽略使用angular的页面上的asp.net控件。