Insert data In Angularjs And Asp.Net MVC 4
In this blog, I’m explaining how to insert data in the
database using angular js and asp.net mvc 4.
Step 1:
First create a table in database named “Student” like this:
Step 2:
Now create a basic asp.net mvc 4 application and add
database connection like this:
Step 3:
Now add a controller named “HomeController” and add
following code in it:
using CRUDInAngulaJsMvcApp.Database;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace CRUDInAngulaJsMvcApp.Controllers
{
public class HomeController : Controller
{
AngularJsEntities db = new AngularJsEntities();
public ActionResult Index()
{
return View(db.Students.ToList());
}
public ActionResult Add()
{
return View();
}
[HttpPost]
public JsonResult Add(Student newStudent)
{
db.Students.Add(newStudent);
db.SaveChanges();
return Json(new { Status = "Successfull" }, JsonRequestBehavior.AllowGet);
}
}
}
Step 4:
Now add Index view and write the following code:
@model
List<CRUDInAngulaJsMvcApp.Database.Student>
@{
ViewBag.Title = "Index";
}
<h2>Student Details</h2>
@Html.ActionLink("Add", "Add", "Home")
<br />
@foreach(var item in Model)
{
<div style="width:20%;display:inline-block;">
<p>Name : @item.Name</p>
<p>City : @item.City</p>
<p>Course : @item.Course</p>
<p>Mobile : @item.Mobile</p>
</div>
}
Step 5:
Now add another view named “Add” and write the following
code in it:
@{
ViewBag.Title = "Add";
}
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/App/Add.js"></script>
<h2>Add</h2>
<form>
<div ng-app="addModule" ng-controller="AddController">
Name : <input type="text" ng-model="Name" />
<br />
<br />
City : <select ng-model="City" ng-options="city as city for city in Cities"></select>
<br />
<br />
Course : <select ng-model="Course" ng-options="course as course for course in Courses"></select>
<br />
<br />
Mobile : <input type="text" ng-model="Mobile" />
<br />
<br />
<input type="button" ng-click="add()" value="Add" />
</div>
</form>
Step 6:
Now create a javascript file named “Add.js” and write the
code in it:
//First
create the angular module and named it "addModule"
var addModule = angular.module("addModule", []);
//Create
a factory service
addModule.factory('AddRecordService', ['$http', function ($http) {
return {
//Get
the courses list
getCourse: function(){
return ["Btech", "BCA", "BBA", "MTech", "MCA", "MBA"]
},
//Get
the city list
getCity: function(){
return ["New York", "Los Angeles", "Paris", "Tokyo", "Sydney", "New Delhi"]
},
//This
function will call the add action in the homecontroller and save the data in
the database
saveRecord : function(newStudent)
{
$http({
url: '/Home/Add',
method: 'POST',
data : newStudent
}).then(function (response) {
if (response !== 'undefined' && typeof (response) == 'object') {
window.location.href = '/Home/Index';
}
});
}
};
}]);
//Create
controller with the dependencies
addModule.controller('AddController', ['$scope', '$http', 'AddRecordService', function ($scope, $http,
AddRecordService) {
$scope.Courses =
AddRecordService.getCourse();
$scope.Cities = AddRecordService.getCity();
$scope.showMessage = false;
$scope.add = function () {
var newStudent = {};
newStudent["Name"] =
$scope.Name;
newStudent["City"] =
$scope.City;
newStudent["Course"] =
$scope.Course;
newStudent["Mobile"] =
$scope.Mobile;
AddRecordService.saveRecord(newStudent);
}
}]);
Output
Run the
application:
This will
show the existing data in the table, click on add button:
Fill the
form and click on Add button:
