Wednesday, August 26, 2015

Insert data In Angularjs And Asp.Net MVC 4

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 mvc 4.

Step 1:

First create a table in database named “Student” like this:

Step 2:

Now create a basic 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();

        public JsonResult Add(Student newStudent)

            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>

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>

    <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" />

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




Run the application:

This will show the existing data in the table, click on add button:

Fill the form and click on Add button:

No comments:

Post a Comment