Home > DeveloperSection > Forums > How to add data in data base using angular.js in mvc
aditya kumar Patel

Total Post:245

Points:1743
Posted on    December-28-2015 11:52 AM

 .NET Angular JS  Mvc 
Ratings:


 1 Reply(s)
 322  View(s)
Rate this:
I want to  add data in database using angular.js in mvc. please help me


aditya kumar Patel

Total Post:245

Points:1743
Posted on    December-28-2015 12:05 PM

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

Don't want to miss updates? Please click the below button!

Follow MindStick