How to Add, Edit, Update Record in Angular Js in Mvc

Anonymous User 2801 28 Dec 2015

I want to use Add, Edit, Update Record in Angular Js in Mvc. How to use This Please Help Me.

Anonymous User

Sr. Software Developer

I am a content writter !

1 Answers

Anonymous User 28 Dec 2015

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

forum

How to Add, Edit, Update Record in Angular Js in Mvc

Can you answer this question?

1 Answers