如何使用asp.net网页表单处理AngularJs

本文关键字:表单 处理 AngularJs 网页 net 何使用 asp | 更新日期: 2023-09-27 18:24:00

我刚刚在一个网站上实现了AngularJs,它是用asp.net网络表单编写的。

我想当ng-Submit按下按钮时,表单也在进行Post调用。

如何从submitting停止form并让angular do its work

我的示例代码如下。

<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 = '';
};

注意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

任何人都可以指导我处理不张贴的表格。

如何使用asp.net网页表单处理AngularJs

如果你计划使用.NET制作一个有角度的表单,你可能应该使用.NET MVC而不是.NET Web表单。原因是所有的webforms页面都有自己的<form>元素,用于维护状态。这可以看出,当你在Visual studio中制作一个新的网页时,它会自动添加:

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

此外,当你制作像<asp:LinkButton>这样的网络表单控件或其他从基本HTML提供"增强"功能的东西时,它们实际上会被呈现为使用父表单的<input>标记。因此,要利用网络表单的任何功能,你真的需要坚持它们的模型,并且很难在上面添加任何其他内容。这是可能的,有时也很容易,但要想弄清楚一路上的所有问题,需要很长的学习曲线。

相反,.NET MVC提供了更少的开箱即用的功能,只需很少的包装器和回发或视图状态之类的东西就可以向您公开原始HTML。我认为对于使用angular的东西来说,这是一个更好的主机,尤其是如果你对表单使用angular,这无论如何都会阻止你使用.NET的一些网络表单功能。

我会从使用ng-click而不是ng-submit开始。我也会避开使用angular的网页上的asp.net控件。