CODEWITHSUNDEEP
asp.netangularjsformsvalidationpostback
Simone
Simone

Reputation: 2430

Submitting form in angularjs in asp.net web page

I am hating asp.net... I have a really simple web site. In my master page I have a form runat="server".. I need it because in some page I have server side controls (login control for example, or my custom control).. Now I have a simple page, with a really simple form. And in this page, I would like to use angularjs.. What I want is that (simply) when I submit this angularjs form, I arrive on the server just when the form is valid. In this page I have tried different solution but no solution works!

The problem I think is that I have a (angularjs) form (in the page, this is not runat="server") that is nested in asp.netform (in the master page, runat="server")..

Here what I tried:

1) remove the asp.net form from the master page and add different asp.net form just where i need, but in some page i had more than one form with `runat="server" and this is not possible: two form runat=server

2)remove the angularjs form, don't do a submit, but manage a simple ng-click event, but in this way I go on server always, even if form is not valid...

3)leave the angularjs form a do a submit, but in this way I obtain an "invalid postback error"... I have tired this solution but it does not work: Invalid postback error

What I simply want is to use angularjs and go on server just when form is valid... How can I do? Thank you..

UPDATE: My MasterPage is:

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

My Page is:

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

I Know, It's not correct have a form inside another form.. but I am looking for a solution...

Upvotes: 2

Views: 2202

Answers (1)

user1831795
user1831795

Reputation: 43

What you need in order to nest form is to use eg:

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

have a look here

Upvotes: 1

Related Questions