在asp.net网页中以angularjs提交表单答案

【问题标题】：Submitting form in angularjs in asp.net web page在asp.net网页中以angularjs提交表单
【发布时间】：2023-03-15 06:12:01
【问题描述】：

我讨厌asp.net... 我有一个非常简单的网站。在我的母版页中，我有一个表单runat="server".. 我需要它，因为在某些页面中我有服务器端控件（例如登录控件或我的自定义控件）.. 现在我有一个简单的页面，有一个非常简单的表单。在这个页面中，我想使用 angularjs.. 我想要的是（简单地）当我提交这个 angularjs 表单时，我只是在表单有效时到达服务器。在此页面中，我尝试了不同的解决方案，但没有解决方案！

我认为的问题是我有一个嵌套在 asp.netform 中的（angularjs）表单（在页面中，这不是runat="server"）（在母版页中，runat="server"）..

这是我尝试过的：

1) 从母版页中删除 asp.net 表单，并在我需要的地方添加不同的 asp.net 表单，但在某些页面中，我有多个带有 `runat="server" 的表单，这是不可能的： two form runat=server

2) 删除 angularjs 表单，不做提交，而是管理一个简单的 ng-click 事件，但是这样我总是在服务器上，即使表单无效......

3) 离开 angularjs 表单进行提交，但这样我得到一个“无效的回发错误”......我已经厌倦了这个解决方案，但它不起作用： Invalid postback error

我只是想要使用 angularjs 并在表单有效时继续服务器......我该怎么办？谢谢。。

更新：我的 MasterPage 是：

<body>
    <form runat="server">
        ...
        <asp:ContentPlaceHolder ID="content" runat="server"></asp:ContentPlaceHolder>
        ...
    </form>
</body>

我的页面是：

<asp:Content ID="Content3" ContentPlaceHolderID="content" runat="server">
    <script type="text/javascript" src="/Scripts/angular.min.js"></script>
    <script type="text/javascript" src="/Scripts/angular-resource.min.js"></script> 

    <script type="text/javascript">
        (function (angular) {
            var public_area = angular.module("public-area", ['ngResource']);

            public_area.factory("PresentaUnAmicoService", function ($resource) {
                return {
                   piani_tariffari: $resource("/api/PresentaUnAmico/")
                };
            });

            public_area.controller("PresentaUnAmicoController", function ($scope, PresentaUnAmicoService) {
                $scope.sendInvitation = function ()
                {
                    var invitation =
                        new PresentaUnAmicoService
                        .piani_tariffari($scope)
                        .$save();
                }
            });
        })(angular);    
    </script>

    <div data-ng-app="public-area" data-ng-controller="PresentaUnAmicoController">
        <form name="presenta_amico-form" novalidate>
            <table class="three_column" data-ng-class="{ 'ng-submitted' : submitted }">
                ... //Here there is my form

                <button type="button" class="button link" id="btnSendInvitation" runat="server" data-ng-click="submitted=true" ng-submit="sendInvitation()">
                    <span><b>INVIA EMAIL</b></span> <img class="middle" src="/Styles/img/continue_24x24.png" />
                </button>

               ...
           </table>
       </form>
    </div>
</asp:Content>

我知道，在另一个表单中包含一个表单是不正确的......但我正在寻找解决方案......

【问题讨论】：

您能否分享一些代码示例以扩展您在上面尝试过的描述
我已经更新了

标签： asp.net angularjs forms validation postback

【解决方案1】：

嵌套表单需要的是使用例如：

<form runat="server">
   <ng-form name="myFormName" ...>
       //Your Code
   </ng-form>
</form>

have a look here

【讨论】：