HOW TO ADD DATA IN DATA BASE USING ANGULAR.JS IN MVC

aditya kumar Patel

Total Post:254

Points:1810
Posted by  aditya kumar Patel
 770  View(s)
Ratings:
Rate this:
I want to  add data in database using angular.js in mvc. please help me
  1. aditya kumar Patel

    Post:254

    Points:1810
    Re: How to add datain data base using angular.js in mvc

    AngularJS is a JavaScript framework. It is a library written in JavaScript.
    AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag:

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    AngularJS Extends HTML
    AngularJS extends HTML with ng-directives.
    The ng-app directive defines an AngularJS application.
    The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
    The ng-bind directive binds application data to the HTML view.
    @{
        ViewBag.Title = "Country";
        Layout = "~/Views/Shared/_Dashboard.cshtml";
    }
    <script src="/Scripts/angular.js" type="text/javascript"></script>
    <script src="/Scripts/Country.js" type="text/javascript"></script>
    <script language="javascript">
        var App = angular.module('Country', []);
        App.controller('CountryControler', Viewmodel);
    </script>
    <div data-ng-app="Country">
        <div class="box ui-draggable ui-droppable" data-ng-controller="CountryControler">
            <div class="box-header">
                <div class="box-name">
                    <i class="fa fa-search"></i><span>Add Country</span>
                </div>
                <div class="box-icons">
                    <a class="collapse-link"><i class="fa fa-chevron-up"></i></a><a class="expand-link">
                        <i class="fa fa-expand"></i></a><a class="close-link"><i class="fa fa-times"></i>
                    </a>
                </div>
                <div class="no-move">
                </div>
            </div>
            <div class="box-content">
                <form class="form-horizontal" role="form">
                <div class="form-group">
                    <label class="col-sm-2 control-label">
                        Country Name</label>
                    <div class="col-sm-4">
                        <input type="text" data-ng-model="Country.countryName" class="form-control" placeholder="Country Name"
                            data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip for name">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">
                        Country Code</label>
                    <div class="col-sm-4">
                        <input type="text" data-ng-model="Country.countryCode" class="form-control" placeholder="Country Code"
                            data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip for name">
                    </div>
                </div>
                <div class="clearfix">
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-4">
                        <button type="button" class="btn btn-primary btn-label-left" ng-hide="modifyField"
                            data-ng-click="Add()">
                            <span><i class="fa fa-clock-o"></i></span>Submit
                        </button>
                        <button type="button" class="btn btn-primary btn-label-left" ng-show="modifyField"
                            data-ng-click="update()">
                            <span><i class="fa fa-clock-o"></i></span>Update
                        </button>
                        <button type="button" class="btn btn-default btn-label-left">
                            <span><i class="fa fa-clock-o txt-danger"></i></span>Cancel
                        </button>
                    </div>
                </div>
                </form>
            </div>
        </div>
    </div> 
    Country.js
    var Viewmodel = function ($scope, $http) {
        $scope.Country = {
            "countryId": "",
            "countryName": "",
            "countryCode": ""
        }   
       
         
        $scope.Add = function () {
            data = $scope.Country;
            $.ajax({
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                data: JSON.stringify(data),
                url: '/Location/Add',
                success: function (status) {
                    $scope.Load();
                },
                error: function (status) { }
            });
        } 
     
    }
     
    

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using EntityFramworkEcommerce; namespace EntityFramworkEcommerce.Controllers { public class LocationController : Controller { // // GET: /Location/ EcommerceEntities db = new EcommerceEntities(); public ActionResult Country() { return View(); } [HttpPost] public void Add(country obj) { db.country.AddObject(obj); db.SaveChanges(); } } }

      Modified On Dec-28-2015 12:22:12 PM

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!