How to Add, Edit, Update Record in Angular Js in Mvc
Ask by Anonymous User
Updated 28 Dec 2015
@{ 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>Registration form</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> <table class="table table-striped table-bordered table-hover table-heading no-border-bottom"> <thead> <tr> <th> Id </th> <th> Country name </th> <th> Country Code </th> <th> Action </th> </tr> </thead> <tbody> <tr data-ng-repeat="item in Countrys"> <td> {{item.countryId}} </td> <td> {{item.countryName}} </td> <td> {{item.countryCode}} </td> <td> <button data-ng-click="Modify(item)"> Edit</button> </td> </tr> </tbody> </table> </div> </div> </div>/// <reference path="jquery-2.1.4.js" /> /// <reference path="angular.js" /> var Viewmodel = function ($scope, $http) { $scope.Country = { "countryId": "", "countryName": "", "countryCode": "" } $scope.Countrys = {}; $scope.Modify = function (data) { $scope.Country = data; $scope.modifyField = true; } $scope.update = function () { data = $scope.Country; $.ajax({ type: 'POST', contentType: 'application/json; charset=utf-8', data: JSON.stringify(data), url: '/Location/update', success: function (status) { $scope.Country.countryId = ""; $scope.Country.countryCode = ""; $scope.Country.countryName = ""; $scope.Load(); $scope.modifyField = false; }, error: function (status) { } }); } $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.Country.countryId = ""; $scope.Country.countryCode = ""; $scope.Country.countryName = ""; $scope.Load(); }, error: function (status) { } }); } $scope.Load = function () { $http.post('/Location/GetCountrys'). success(function (data, status, headers, config) { $scope.Countrys = data; }). error(function (data, status, headers, config) { }); } $scope.Load(); }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 ActionResult Add(country obj) { db.country.AddObject(obj); db.SaveChanges(); return RedirectToAction("Country"); } [HttpPost] public JsonResult GetCountrys() { return Json(db.country.ToList(), JsonRequestBehavior.AllowGet); } public ActionResult Update(country obj) { country c = db.country.First(x => x.countryId == obj.countryId); c.countryName = obj.countryName; c.countryCode = obj.countryCode; db.SaveChanges(); return RedirectToAction("Country"); } } }