Angular Js Post method using MVC
Angular Js Post call Implementation:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
</head>
<body ng-app="myapp">
<form id="form1" ng-controller="mycontroller" ng-submit="submit()">
<!--<div ng-controller="mycontroller">-->
<div style="padding: 50px;">
<h1 style="text-align: center; border: burlywood; background: azure;">Employee </h1>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="label label-default"> Employee Id :</label>
<input type="number" name="txtEno" class="form-control" id="txtEno" ng-model="txtEno" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="label label-default"> Employee Name :</label>
<input type="text" id="txtEname" class="form-control" name="txtEname" ng-model="txtEname" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="label label-default"> Employee Salary :</label>
<input type="number" id="txtSalary" name="txtSalary" class="form-control" ng-model="txtSalary" />
</div>
</div>
</div>
<div style="text-align: center;">
<button id="btnsubmit" type="submit" ng-model="submit" class="btn btn-group" value="submit">Click-Me</button>
</div>
</div>
<!--</div>-->
</form>
<script>
var app = angular.module("myapp", []).controller("mycontroller", function ($http, $scope) {
$scope.submit = function () {
var empoyee = {
"eno": $scope.txtEno,
"ename": $scope.txtEname,
"salary": $scope.txtSalary
};
$http.post("http://localhost:49791/api/employee/PostEmployee", empoyee).success(function (responce) {
alert("Employee Created Sucessfully.");
}).error(function (responce) {
alert("employee Creation has failed.Please recreate Employee again.");
});
};
});
</script>
</body>
</html>
POst Method for C controller:
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Data.Entity.Infrastructure;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using System.Web.Http.Description;
using AngularJSSample.Models;
namespace AngularJSSample.Controllers
{
[RoutePrefix("api/employee")]
public class EmployeesController : ApiController
{
private EmployeeEntities db = new EmployeeEntities();
[HttpPost]
[AllowAnonymous]
[Route("PostEmployee")]
public IHttpActionResult PostEmployee(Employee employee)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
db.Employees.Add(employee);
try
{
db.SaveChanges();
}
catch (DbUpdateException)
{
if (EmployeeExists(employee.eno))
{
return Conflict();
}
else
{
throw;
}
}
return CreatedAtRoute("DefaultApi", new { id = employee.eno }, employee);
}
protected override void Dispose(bool disposing)
{
if (disposing)
{
db.Dispose();
}
base.Dispose(disposing);
}
}
}
Entities:
using System.ComponentModel;
namespace AngularJSSample.Models
{
using System;
using System.Collections.Generic;
public partial class Employee
{
[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
public Employee()
{
this.EmployeeDetails = new HashSet<EmployeeDetail>();
}
[DisplayName("Id")]
public int eno { get; set; }
public string ename { get; set; }
public Nullable<int> salary { get; set; }
[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
public virtual ICollection<EmployeeDetail> EmployeeDetails { get; set; }
}
}
namespace AngularJSSample.Models
{
using System;
using System.Data.Entity;
using System.Data.Entity.Infrastructure;
public partial class EmployeeEntities : DbContext
{
public EmployeeEntities()
: base("name=EmployeeEntities")
{
}
protected override void OnModelCreating(DbModelBuilder modelBuilder)
{
throw new UnintentionalCodeFirstException();
}
public virtual DbSet<Employee> Employees { get; set; }
public virtual DbSet<EmployeeDetail> EmployeeDetails { get; set; }
public virtual DbSet<Task> Tasks { get; set; }
}
}
Comments
Post a Comment