ASP Dot net MVC CRUD Using Angular
How to Insert delete update view in Asp .net MVC with angular
Create Controller
Controller/StudentAngularController.cs
using MVC_CRUD_TUTORIAL.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MVC_CRUD_TUTORIAL.Controllers
{
public class StundentAngularController : Controller
{
private ProjectDB db = new ProjectDB();
public ActionResult Student()
{
return View();
}
public ActionResult InsertStudentRecord(Student std)
{
if (std is null)
{
var Message = "please enter data.";
return Json(Message, JsonRequestBehavior.AllowGet);
}
else
{
db.Students.Add(std);
db.SaveChanges();
var Message = "Saved";
return Json(Message, JsonRequestBehavior.AllowGet);
}
}
public JsonResult GetAllStudent()
{
var AllRecord = db.Students.ToList();
return Json(AllRecord, JsonRequestBehavior.AllowGet);
}
public JsonResult UpdateStudentRecord(Student Std)
{
var data = db.Students.Where(x => x.StudentId == Std.StudentId).FirstOrDefault();
data.Name = Std.Name;
data.Email = Std.Email;
data.Address = Std.Address;
db.SaveChanges();
var Message = "Updated";
return Json(Message, JsonRequestBehavior.AllowGet);
}
public JsonResult DeleteStudent(Student Std)
{
var data = db.Students.Where(x => x.StudentId == Std.StudentId).FirstOrDefault();
db.Students.Remove(data);
db.SaveChanges();
var Message = "Deleted";
return Json(Message, JsonRequestBehavior.AllowGet);
}
}
}
Database connection strings
Web.config
<connectionStrings>
<add name="mvctutorial" connectionString="Data Source=DESKTOP-31NS7CR\SQLEXPRESS;Initial Catalog=MVC_CRUD_Tutorial;Integrated Security=true;MultipleActiveResultSets=true;" providerName="System.Data.SqlClient" />
</connectionStrings>
Models
Student.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MVC_CRUD_TUTORIAL.Models
{
public class Student
{
public int StudentId { get; set; }
public string Name { get; set; }
public string Email { get; set; }
public string Address { get; set; }
}
}
Db Model
ProjectDB.cs
using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;
namespace MVC_CRUD_TUTORIAL.Models
{
public class ProjectDB:DbContext
{
public ProjectDB(): base("mvctutorial")
{
}
public DbSet<Student> Students { get; set; }
public DbSet<Department> Departments { get; set; }
public DbSet<Course> Courses { get; set; }
}
}
View File
StudentAngular/Student.cshtml
@{
ViewBag.Title = "Index";
}
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/Student.js"></script>
<h2>Index</h2>
<div ng-app="myApp">
<div ng-controller="myCntrl">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="control-label">Student Name</label>
<input type="text" class="form-control" ng-model="Name" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="control-label">Student Email</label>
<input type="text" class="form-control" ng-model="Email" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="control-label">Student Address</label>
<input type="text" class="form-control" ng-model="Address" />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<input type="submit" class="form-control" id="insertstd" value="Submit" ng-click="InsertStudent()" />
</div>
</div>
</div>
</div>
<p>
</p>
<div ng-init="GetAllStudent()">
<table class="table">
<tr>
<th>
#
</th>
<th>
Name
</th>
<th>
Email
</th>
<th>
Address
</th>
<th>Action</th>
</tr>
<tr ng-repeat="Std in Student">
<td>{{Std.StudentId}}</td>
<td>
{{Std.Name}}
</td>
<td>
{{Std.Email}}
</td>
<td>
{{Std.Address}}
</td>
<td>
<input type="button" ng-click="UpdateStudent(Std)" value="Update" />
<input type="button" ng-click="DeleteStident(Std)" value="Delete" />
</td>
</tr>
</table>
</div>
</div>
</div>
Angular js
Student.js
var app = angular.module("myApp", []);
app.controller("myCntrl", function ($scope, $http) {
$scope.GetAllStudent = function () {
$http({
method: 'get',
url: "/StundentAngular/GetAllStudent"
}).then(function (response) {
$scope.Student = response.data;
}, function () {
alert("Error Occur!");
})
};
$scope.InsertStudent = function () {
var type = document.getElementById("insertstd").getAttribute("value");
if (type == "Submit") {
$scope.student = {};
$scope.student.Name = $scope.Name;
$scope.student.Email = $scope.Email;
$scope.student.Address = $scope.Address;
$http({
method: "post",
url: "/StundentAngular/InsertStudentRecord",
datatype: "json",
data: JSON.stringify($scope.student)
}).then(function (response) {
alert(response.data);
$scope.GetAllStudent();
$scope.Name = "";
$scope.Email = "";
$scope.Address = "";
})
} else {
$scope.student = {};
$scope.student.StudentId = sessionStorage.getItem("SID");
$scope.student.Name = $scope.Name;
$scope.student.Email = $scope.Email;
$scope.student.Address = $scope.Address;
$http({
method: "post",
url: "/StundentAngular/UpdateStudentRecord",
datatype: "json",
data: JSON.stringify($scope.student)
}).then(function (response) {
alert(response.data);
$scope.GetAllStudent();
$scope.Name = "";
$scope.Email = "";
$scope.Address = "";
document.getElementById("insertstd").setAttribute("value", "Submit");
})
}
};
$scope.UpdateStudent = function (Std) {
sessionStorage.setItem("SID", Std.StudentId);
$scope.Name = Std.Name;
$scope.Email = Std.Email;
$scope.Address = Std.Address;
document.getElementById("insertstd").setAttribute("value", "Update");
};
$scope.DeleteStident = function (Std) {
$http({
method: "post",
url: "/StundentAngular/DeleteStudent",
datatype: "json",
data: JSON.stringify(Std)
}).then(function (reponse) {
alert(reponse.data);
$scope.GetAllStudent();
})
};
});
No comments