Part 6 - How to create simple registration form with validation using angularjs and asp.net mvc4

In this post, I would like to explain Part 6 - How to create simple registration form with validation using angularjs and asp.net mvc4.

This is our 6th Post about AngularJS. Here I have explained a little about AngularJS and What we will learn in this section part by part. 

In the previous example we have seen Part 3 - How to create a login page using AngularJS in MVC4 application

Here in this post I explained how can we create simple registration form with validation using angularjs and asp.net mvc4. As registration form is a very common form for Internet application, so I would like to create a simple registration form here to demonstrate validation and Save data to the database.

Simple Registration Form
You can login from here Login
Fullname required!
Email ID not valid!
Username required!
Password required! Password must be 8 char long!
Male Female Gender required!
Part 6 - How to create simple registration form with validation using angularjs and asp.net mvc4
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    <style>
        .menuUl {
            list-style:none;
            margin:0px;
            padding:0px;
        }
            .menuUl li {
                float:left;
                padding:3px;
                margin-right:2px;
                background-color:#f3f3f3;
            }
                .menuUl li a {
                    display:block;
                    line-height:30px;
                    padding:0px 5px;
                    color:#920f0f;
                    text-decoration:none;
                }
                    .menuUl li a:hover {
                        text-decoration:underline;
                    }
    </style>
</head>
    @* Here  ng-app="MyApp" is used for auto-bootstrap an AngularJS application. here ng-app="MyApp" means <body> element is the owner 
    of AngularJS application*@


<body ng-app="MyApp">
     <ul class="menuUl">
         <li><a href="#" style="color:black;"><b>Angular Example :</b></a></li>
         <li>@Html.ActionLink("Part 1", "Index")</li>
         <li>@Html.ActionLink("Part 2", "Part2")</li>
         <li>@Html.ActionLink("Part 3", "Part3")</li>
         <li>@Html.ActionLink("Part 4", "Part4")</li>
         <li>@Html.ActionLink("Part 5", "Part5")</li>
         <li>@Html.ActionLink("Part 6", "Part6")</li>
     </ul>
    <div style="height:1px; clear:both;"></div>
    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @* Add Angular Library Here *@
    @Scripts.Render("~/bundles/angular")
    <script src="~/Scripts/MyApp.js"></script>
    @RenderSection("scripts", required: false)
</body>
</html>


Posted By :