How to add data in data base using angular.js in mvc

Anonymous User 2193 28 Dec 2015

I want to add data in database using angular.js in mvc. please help me

Anonymous User

Sr. Software Developer

I am a content writter !

1 Answers

Anonymous User 28 Dec 2015

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:

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();
        }
         
    }
}

forum

How to add data in data base using angular.js in mvc

Can you answer this question?

1 Answers