angularjs submit form data to server using API 2

AngularJs submit form data to server using API 2

HTML 5 code-sample
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>  
<script src="~/Scripts/app/Setting/addUser.controller.js"></script>
<section class="" id="widget-grid">
    <!-- START ROW -->
    <div class="row" ng-app="addUserApp">
        <!-- NEW COL START -->
        <article>
            <div data-widget-custombutton="false" data-widget-editbutton="false" id="wid-id-3" class="jarviswidget jarviswidget-sortable" role="widget">
               <!-- widget div-->
                <div ng-controller="addUserServiceCtrl">
                    <!-- end widget edit box -->
                    <!-- widget content -->
                    <div class="widget-body no-padding">
                        <form novalidate="novalidate" ng-submit="addUser()" class="smart-form" id="order-form">
                            <fieldset>
                                <div class="row">
                                    <section class="col col-6">
                                        <label class="input">
                                            <i class="icon-append fa fa-user"></i>
                                            <input type="text" placeholder="Contact Name" name="name" ng-model="ContactName">
                                        </label>
                                    </section>
                                    <section class="col col-6">
                                        <label class="input">
                                            <i class="icon-append fa fa-phone"></i>
                                            <input type="tel" placeholder="Contact Mobile" name="phone" ng-model="ContactPhone">
                                        </label>
                                    </section>
                                </div>
                                <div class="row">
                                    <section class="col col-6">
                                        <label class="input">
                                            <i class="icon-append fa fa-envelope-o"></i>
                                            <input type="email" placeholder="Contact E-mail" name="email" ng-model="ContactEmail">
                                        </label>
                                    </section>
                                </div>
                            </fieldset>
                            <fieldset>
                                <div class="row">
                                    <section class="col col-3">
                                        <section>
                                            <label class="checkbox">
                                                <input type="checkbox" ng-model="AlertOptIn" id="AlertOptIn" name="AlertOptIn">
                                                <i></i>Alert Opt-In
                                            </label>
                                        </section>
                                    </section>
                                    <section class="col col-3">
                                        <section>
                                            <label class="checkbox">
                                                <input type="checkbox" ng-model="IsPrimary" id="isPrimary" name="isPrimary">
                                                <i></i>Make me the Primary Administrator?
                                            </label>
                                        </section>
                                    </section>
                                </div>
                                <span id="idUpdtMsg" style="display:none; font-weight:300">
                                    <label style="color:green;">Record Added successfully!</label>
                                </span>
                            </fieldset>
                            <footer>
                                <button class="btn view btn-danger" type="submit"><i class="fa fa-plus"></i> Add</button>
                                <button class="btn view btn-default" type="reset"> Reset</button>
                            </footer>
                        </form>
                    </div>
                    <!-- end widget content -->
                </div>
                <!-- end widget div -->
            </div>
        </article>
        <!-- END COL -->
    </div>
    <!-- END ROW -->
</section>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>   
<script src="~/Scripts/app/Setting/addUser.controller.js"></script>
<section class="" id="widget-grid">
    <!-- START ROW -->
    <div class="row" ng-app="addUserApp">
        <!-- NEW COL START -->
        <article>
            <div data-widget-custombutton="false" data-widget-editbutton="false" id="wid-id-3" class="jarviswidget jarviswidget-sortable" role="widget">
               <!-- widget div-->
                <div ng-controller="addUserServiceCtrl">
                    <!-- end widget edit box -->
                    <!-- widget content -->
                    <div class="widget-body no-padding">
                        <form novalidate="novalidate" ng-submit="addUser()" class="smart-form" id="order-form">
                            <fieldset>
                                <div class="row">
                                    <section class="col col-6">
                                        <label class="input">
                                            <i class="icon-append fa fa-user"></i>
                                            <input type="text" placeholder="Contact Name" name="name" ng-model="ContactName">
                                        </label>
                                    </section>
                                    <section class="col col-6">
                                        <label class="input">
                                            <i class="icon-append fa fa-phone"></i>
                                            <input type="tel" placeholder="Contact Mobile" name="phone" ng-model="ContactPhone">
                                        </label>
                                    </section>
                                </div>
                                <div class="row">
                                    <section class="col col-6">
                                        <label class="input">
                                            <i class="icon-append fa fa-envelope-o"></i>
                                            <input type="email" placeholder="Contact E-mail" name="email" ng-model="ContactEmail">
                                        </label>
                                    </section>
                                </div>
                            </fieldset>
                            <fieldset>
                                <div class="row">
                                    <section class="col col-3">
                                        <section>
                                            <label class="checkbox">
                                                <input type="checkbox" ng-model="AlertOptIn" id="AlertOptIn" name="AlertOptIn">
                                                <i></i>Alert Opt-In
                                            </label>
                                        </section>
                                    </section>
                                    <section class="col col-3">
                                        <section>
                                            <label class="checkbox">
                                                <input type="checkbox" ng-model="IsPrimary" id="isPrimary" name="isPrimary">
                                                <i></i>Make me the Primary Administrator?
                                            </label>
                                        </section>
                                    </section>
                                </div>
                                <span id="idUpdtMsg" style="display:none; font-weight:300">
                                    <label style="color:green;">Record Added successfully!</label>
                                </span>
                            </fieldset>

                            <footer>
                                <button class="btn view btn-danger" type="submit"><i class="fa fa-plus"></i> Add</button>
                                <button class="btn view btn-default" type="reset"> Reset</button>
                            </footer>
                        </form>
                    </div>
                    <!-- end widget content -->
                </div>
                <!-- end widget div -->

            </div>
        </article>
        <!-- END COL -->
    </div>
    <!-- END ROW -->
</section>
AngularJs code-sample
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
var baseURL = "http://localhost:56110/";
var app = angular.module('addUserApp', []);
app.service('addUserService', function ($http) {
    //This is used for add user.
    this.addNewUser = function (newUser) {
        return $http.post(baseURL + "Api/Setting/AddUser/1", newUser)
            .success(function (data, status, headers, config) {
                //alert(status);
                //TODO: handle success.
            })
            .error(function (data, status, headers, config) {
               // alert(status);
                //TODO: handl error.
            });
    };
});
app.controller('addUserServiceCtrl', function ($scope, addUserService) {
    $scope.ContactName = null;
    $scope.ContactEmail = null;
    $scope.ContactPhone = null;
    $scope.AlertOptIn = true;
    $scope.IsPrimary = false;
    //Added user function for submit new user collection in DB.
    $scope.addUser = function () {
        var user = {
            ContactName: $scope.ContactName,
            ContactEmail: $scope.ContactEmail,
            ContactMobile: $scope.ContactPhone,
            AlertOptIn: $scope.AlertOptIn,
            IsPrimary: $scope.IsPrimary
        };
        //Call the http Services method for post data in DB.
        addUserService.addNewUser(user).then(function (resp) {
            //If Success the show msg "record Added successfully!".
        });
    };
});
var baseURL = "http://localhost:56110/";

var app = angular.module('addUserApp', []);

app.service('addUserService', function ($http) {
    //This is used for add user.
    this.addNewUser = function (newUser) {
        return $http.post(baseURL + "Api/Setting/AddUser/1", newUser)
            .success(function (data, status, headers, config) {
                //alert(status);
                //TODO: handle success.
            })
            .error(function (data, status, headers, config) {
               // alert(status);
                //TODO: handl error.
            });
    };
});

app.controller('addUserServiceCtrl', function ($scope, addUserService) {
    $scope.ContactName = null;
    $scope.ContactEmail = null;
    $scope.ContactPhone = null;
    $scope.AlertOptIn = true;
    $scope.IsPrimary = false;

    //Added user function for submit new user collection in DB.
    $scope.addUser = function () {
        var user = {
            ContactName: $scope.ContactName,
            ContactEmail: $scope.ContactEmail,
            ContactMobile: $scope.ContactPhone,
            AlertOptIn: $scope.AlertOptIn,
            IsPrimary: $scope.IsPrimary
        };

        //Call the http Services method for post data in DB.
        addUserService.addNewUser(user).then(function (resp) {
            //If Success the show msg "record Added successfully!".
        });
    };
});
APIs Services code-sample
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
[HttpPost]
public void AddUser([FromBody]User users, int id)
{
    using (OBPCXALRTEntities entities = new OBPCXALRTEntities())
    {
        //Add new specific user from Database.
        User newRow = new User
        {
            ContactName = users.ContactName,
            ContactEmail = users.ContactEmail,
            ContactMobile = users.ContactMobile,
            AlertOptIn = users.AlertOptIn,
            isPrimary = users.isPrimary,
            LastUpdateBy = users.ContactName,
            LastUpdateDate = DateTime.Now,
            Password = Constant.defaultPwd,
            UID = RandomUIDs(1051),
            LegalNoticeAccepted = true
        };
        //Add new object in User entity collection.
        entities.Users.Add(newRow);
        //Update to database.
        entities.SaveChanges();
    }
}
[HttpPost]
public void AddUser([FromBody]User users, int id)
{
    using (OBPCXALRTEntities entities = new OBPCXALRTEntities())
    {
        //Add new specific user from Database.
        User newRow = new User
        {
            ContactName = users.ContactName,
            ContactEmail = users.ContactEmail,
            ContactMobile = users.ContactMobile,
            AlertOptIn = users.AlertOptIn,
            isPrimary = users.isPrimary,
            LastUpdateBy = users.ContactName,
            LastUpdateDate = DateTime.Now,
            Password = Constant.defaultPwd,
            UID = RandomUIDs(1051),
            LegalNoticeAccepted = true
        };

        //Add new object in User entity collection.
        entities.Users.Add(newRow);
        //Update to database.
        entities.SaveChanges();
    }
}
User Class code-sample
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
public partial class User
{
    public string UID { get; set; }
    public string ContactName { get; set; }
    public string ContactEmail { get; set; }
    public string ContactMobile { get; set; }
    public bool AlertOptIn { get; set; }
    public bool LegalNoticeAccepted { get; set; }
    public string Password { get; set; }
    public bool isPrimary { get; set; }
    public string LastUpdateBy { get; set; }
    public System.DateTime LastUpdateDate { get; set; }
    public Nullable<System.DateTime> PasscodeTime { get; set; }
}
public partial class User
{
    public string UID { get; set; }
    public string ContactName { get; set; }
    public string ContactEmail { get; set; }
    public string ContactMobile { get; set; }
    public bool AlertOptIn { get; set; }
    public bool LegalNoticeAccepted { get; set; }
    public string Password { get; set; }
    public bool isPrimary { get; set; }
    public string LastUpdateBy { get; set; }
    public System.DateTime LastUpdateDate { get; set; }
    public Nullable<System.DateTime> PasscodeTime { get; set; }
}

ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book