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

问题描述:

我只是在一个网站上实现AngularJs是用asp.net webforms编写的。如何使用asp.net webform处理AngularJs?

我想通过ng-Submit上的按钮,窗体也在打电话。如何停止formsubmitting并让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

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

+0

尝试将按钮元素的类型更改为按钮。 添加 – Edminsson 2014-09-22 16:54:37

+0

@Edminsson更改类型=按钮后ng-submit不起作用,所以我已经将ng-submit更改为ng-click,正在执行 – 2014-09-22 17:03:56

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

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

此外,当你的web表单控件像<asp:LinkButton>或其他东西,从基本的HTML提供“增强”功能,但实际上被渲染为<input>使用父窗体的标签。因此,要充分利用webforms的任何功能,您确实需要坚持自己的模式,并且很难在其上添加任何其他功能。这是可能的,有时也很容易,但是要弄清楚所有的问题,这是一条漫长的学习曲线。相反,.NET MVC为您提供了更少的开箱即用,只需很少的包装以及诸如回发或视图状态之类的东西就可以向您展示原始HTML。我认为对于使用angular的东西来说,这是一个更好的主机,尤其是如果您使用的是表单角度,这将阻止您使用某些.NET的webforms功能。

+0

是的。使用Web窗体处理角度有许多问题。回发是最难处理的,而更新面板和脚本管理器等其他ajax工具也造成很多bug。 当我阅读文档。它用html/css3表示最好。现在我同意他们为什么这么说! – 2014-09-22 17:24:10

+0

此博客文章:http://rachelappel.com/integrating-aspnet-web-forms-and-aspnetmvc提供了如何将MVC框架添加到webforms项目的分步说明。您可以放一个镜头,然后在同一个Web项目的独立视图中托管您的角度窗体。不过要注意的是,MVC有一个小小的学习曲线,它与webforms(更好)非常不同。 – welegan 2014-09-22 18:15:34

我首先使用ng-click代替ng-submit。而且,我还会避免使用角度的页面上的asp.net控件。