Home > DeveloperSection > Forums > How to Add, Edit, Update Record in Angular Js in Mvc
aditya kumar Patel

Total Post:250

Points:1782
Posted on    December-28-2015 12:49 PM

 .NET Angular JS  Mvc 
Ratings:


 1 Reply(s)
 472  View(s)
Rate this:
I want to use  Add, Edit, Update  Record in Angular Js in Mvc. How to use This Please Help Me.


aditya kumar Patel

Total Post:250

Points:1782
Posted on    December-28-2015 12:58 PM

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly.Angular's data binding and depe
@{
    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");
        }
        
    }
}



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

Follow MindStick