Today, we will create an ASP.NET MVC 4 application using AngularJS and perform CRUD (Create, Read, Update, and Delete) operations and Multi-Row Insert using Web API.


Background

The basic idea behind it is that some time ago, I was trying to search multi-row insert demos in MVC with Angular, using Web API but did not find any good solution. Then, I decided to write about this from a basic level. We all know that AngularJS is the most popular MVW (Model View Whatever) JavaScript framework for single page application development and believe that it's fun to develop applications on it.

Getting Started

After that, your application looks like this (note : expect AngularController).

The next step is to add new Model class in the Models directory. And, name it as StudentData.cs.

  1. namespace demoAngular.Models
  2. {
  3. public class StudentData
  4. {
  5. public int KeyId { get; set; }
  6. public string SName { get; set; }
  7. public string FName { get; set; }
  8. public string Gender { get; set; }
  9. public string MobileNo { get; set; }
  10. public int StateId { get; set; }
  11. public int CityID { get; set; }
  12. public int ProcID { get; set; }
  13. public string SXML { get; set; }
  14. public IEnumerable<StudentData> StudentDataList { get; set; }
  15. public List<ClassModel> ClassList { get; set; }
  16. }
  18. public class StateMaster
  19. {
  20. public int StateId { get; set; }
  21. public string StateName { get; set; }
  22. public IEnumerable<StateMaster> StateMasterList { get; set; }
  23. }
  25. public class CityMaster
  26. {
  27. public int CityID { get; set; }
  28. public string CityName { get; set; }
  29. public int StateId { get; set; }
  30. public IEnumerable<CityMaster> CityMasterList { get; set; }
  31. }
  32. public class ClassModel
  33. {
  34. public int StudentID { get; set; }
  35. public string ClassName { get; set; }
  36. public string BoardName { get; set; }
  37. public string CRollNo { get; set; }
  38. public int MM { get; set; }
  39. public int OM { get; set; }
  40. public int Divi { get; set; }
  41. public List<ClassModel> ClassList { get; set; }
  42. }
  43. }
After adding the StudentData.cs, add one model.cs file and give the name as DataLayer.cs.

Namespaces
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Data.Entity;
  6. using System.Data.Entity.Infrastructure;
  7. using System.Data.SqlClient;
  8. namespace demoAngular.Models
  9. {
  10. public class DataLayer : DbContext
  11. {
  12. public virtual IEnumerable<StudentData> StudentSubmiteDetails(StudentData Model)
  13. {
  14. var sqlParams = new SqlParameter[]{
  15. new SqlParameter { ParameterName = "@KeyId",Value=Model.KeyId==null?0:Model.KeyId},
  16. new SqlParameter { ParameterName = "@SName",Value=Model.SName??string.Empty},
  17. new SqlParameter { ParameterName = "@FName",Value=Model.FName??string.Empty},
  18. new SqlParameter { ParameterName = "@Gender", Value = Model.Gender??string.Empty },
  19. new SqlParameter { ParameterName = "@MobileNo", Value = Model.MobileNo??string.Empty},
  20. new SqlParameter { ParameterName = "@StateId",Value=Model.StateId==null?0:Model.StateId},
  21. new SqlParameter { ParameterName = "@CityID",Value=Model.CityID==null?0:Model.CityID},
  22. new SqlParameter { ParameterName = "@ProcID", Value = Model.ProcID},
  23. new SqlParameter { ParameterName = "@XML", Value = Model.SXML}
  24. };
  25. var sqlQaury = @"PROC_StudentSubmitDetails @KeyId, @SName,@FName,@Gender,@MobileNo,@StateId,@CityID,@ProcID,@XML";
  26. var IList = this.Database.SqlQuery<StudentData>(sqlQaury, sqlParams);
  27. return IList;
  28. }
  30. public IEnumerable<StudentData> StudentALLDetails(int ProcID, int Keyid)
  31. {
  32. var sqlParams = new SqlParameter[]{
  33. new SqlParameter { ParameterName = "@ProcID", Value = ProcID},
  34. new SqlParameter { ParameterName = "@Keyid", Value = Keyid}};
  35. var sqlQaury = @"PROC_StudentALLDetails @ProcID,@Keyid";
  36. var IList = this.Database.SqlQuery<StudentData>(sqlQaury, sqlParams);
  37. return IList;
  38. }
  39. public IEnumerable<StudentData> StudentOneDetails(int ProcID, int Keyid)
  40. {
  41. var sqlParams = new SqlParameter[]{
  42. new SqlParameter { ParameterName = "@ProcID", Value = ProcID},
  43. new SqlParameter { ParameterName = "@Keyid", Value = Keyid}};
  44. var sqlQaury = @"PROC_StudentALLDetails @ProcID,@Keyid";
  45. var IList = this.Database.SqlQuery<StudentData>(sqlQaury, sqlParams);
  46. return IList;
  47. }
  49. public IEnumerable<ClassModel> StudenteduDetails(int ProcID, int Keyid)
  50. {
  51. var sqlParams = new SqlParameter[]{
  52. new SqlParameter { ParameterName = "@ProcID", Value = ProcID},
  53. new SqlParameter { ParameterName = "@Keyid", Value = Keyid}};
  54. var sqlQaury = @"PROC_StudentALLDetails @ProcID,@Keyid";
  55. var IList = this.Database.SqlQuery<ClassModel>(sqlQaury, sqlParams);
  56. return IList;
  57. }
  59. public IEnumerable<StateMaster> BindLstate(int Procid)
  60. {
  61. var sqlParms = new SqlParameter[]{
  63. new SqlParameter{ParameterName="@Procid",Value=Procid},};
  64. var sqlqaury = @"Proc_getState @Procid";
  65. var IList = this.Database.SqlQuery<StateMaster>(sqlqaury, sqlParms);
  66. return IList;
  67. }
  69. public IEnumerable<CityMaster> BindLcity(int Pracid, int stateid)
  70. {
  71. var sqlParms = new SqlParameter[]{
  72. new SqlParameter{ParameterName="@Procid",Value=Pracid},
  73. new SqlParameter{ParameterName="@Stateid",Value=stateid}};
  74. var sqlQaury = @"Proc_getState @Procid,@Stateid";
  75. var IList = this.Database.SqlQuery<CityMaster>(sqlQaury, sqlParms);
  76. return IList;
  77. }
  79. public IEnumerable<StudentData> DeleteStudentbyid(int ProcID, int Keyid)
  80. {
  81. var sqlParams = new SqlParameter[]{
  82. new SqlParameter { ParameterName = "@ProcID", Value = ProcID},
  83. new SqlParameter { ParameterName = "@Keyid", Value = Keyid}};
  84. var sqlQaury = @"PROC_StudentALLDetails @ProcID,@Keyid";
  85. var IList = this.Database.SqlQuery<StudentData>(sqlQaury, sqlParams);
  86. return IList;
  87. }
  88. }
  91. }


After adding Model, your project looks like this,

Now, add Controller to the Controllers directory and give name as HomeController,
  1. namespace demoAngular.Controllers
  2. {
  3. public class HomeController : Controller
  4. {
  5. public ActionResult Index()
  6. {
  7. return View();
  8. }
  9. public ActionResult StudentRecord()
  10. {
  11. return PartialView("StudentRecord");
  12. }
  13. public ActionResult StudentView()
  14. {
  15. return PartialView("StudentView");
  16. }
  17. }
  18. }
Now, add another Controller to and give name as ValueController,

Namespaces
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Net;
  5. using System.Net.Http;
  6. using System.Web.Http;
  7. using System.Xml.Linq;
  8. using demoAngular.Models;
  9. using Newtonsoft.Json;
  10. namespace demoAngular.Controllers
  11. {
  12. public class ValuesController : ApiController
  13. {
  14. DataLayer db = new DataLayer();
  15. [HttpPost]
  16. [ActionName("AddNewStudent")]
  17. public StudentData AddnewStudent(StudentData Model)
  18. {
  19. Model.ProcID = 1;
  20. List<ClassModel> valueSet = Model.ClassList;
  21. XElement root = new XElement("root");
  22. for (int i = 0; i < valueSet.Count; i++)
  23. {
  24. XElement ele = new XElement("Student", new XElement("ClassName", valueSet[i].ClassName),
  25. new XElement("BoardName", valueSet[i].BoardName),
  26. new XElement("CRollNo", valueSet[i].CRollNo),
  27. new XElement("MM", valueSet[i].MM),
  28. new XElement("OM", valueSet[i].OM),
  29. new XElement("Divi", valueSet[i].Divi));
  30. root.Add(ele);
  31. }
  32. XElement xmlclass = root;
  33. Model.SXML = xmlclass.ToString();
  34. var mod = db.StudentSubmiteDetails(Model).ToList();
  35. return mod.FirstOrDefault();
  36. }
  38. [HttpGet]
  39. [ActionName("ShowALLStudent")]
  40. public IEnumerable<StudentData> ShowALLStudent()
  41. {
  42. var mod = db.StudentALLDetails(2,0).ToList();
  43. return mod;
  44. }
  46. [HttpGet]
  47. [ActionName("ShowOneStudent")]
  48. public IEnumerable<StudentData> ShowOneStudent(int id)
  49. {
  50. var mod = db.StudentOneDetails(3, id).ToList();
  51. return mod;
  52. }
  54. [HttpGet]
  55. [ActionName("ShowEduStudent")]
  56. public IEnumerable<ClassModel> ShowEduStudent(int id)
  57. {
  58. ClassModel mod1 = new ClassModel();
  59. mod1.ClassList = db.StudenteduDetails(4, id).ToList();
  60. return mod1.ClassList;
  61. }
  63. [HttpGet]
  64. [ActionName("ShowState")]
  65. public IEnumerable<StateMaster> ShowState()
  66. {
  67. var mod = db.BindLstate(1).ToList();
  68. return mod;
  69. }
  71. [HttpGet]
  72. [ActionName("ShowCity")]
  73. public IEnumerable<CityMaster> ShowCity(int id)
  74. {
  75. var mod = db.BindLcity(2,id).ToList();
  76. return mod;
  77. }
  79. [HttpDelete]
  80. [ActionName("DeleteStudent")]
  81. public IEnumerable<StudentData> DeleteStudent(int id)
  82. {
  83. var mod = db.DeleteStudentbyid(5, id).ToList();
  84. return mod;
  85. }
  86. }
  87. }


After adding Controller, your project looks like this.



Now, add AngularJS using Manage Nuget Package Manager and search AngularJS. And install it (it’s already instaledl in my project that's why it is showing uninstall)



Now, add a new folder, give name as AngularController, and add JavaScript file in the AngularController directory and add Angular functions.



RohitService.js
  1. app.service("RohitService", function ($http) {
  2. //Function to create new Student
  3. this.AddNewStudent = function (Student) {
  4. var request = $http({
  5. method: "post",
  6. url: "/api/Values/AddNewStudent",
  7. data: Student
  8. });
  9. return request;
  10. };
  12. this.ShowStudent = function () {
  13. var request = $http({
  14. method: "get",
  15. url: "/api/Values/ShowALLStudent",
  16. cache: false,
  17. async: false
  18. });
  19. return request;
  20. };
  22. this.showStudentone = function (id) {
  23. var request = $http({
  24. method: "get",
  25. url: "/api/Values/ShowOneStudent/" + id,
  26. cache: false,
  27. async: false
  28. });
  29. return request;
  30. }
  32. this.showEduStudent = function (id) {
  33. var request = $http({
  34. method: "get",
  35. url: "/api/Values/ShowEduStudent/" + id,
  36. cache: false,
  37. async: false
  38. });
  39. return request;
  40. }
  42. this.getState = function () {
  43. var request = $http({
  44. method: "get",
  45. url: "/api/Values/ShowState",
  46. //dataType: "json",
  47. cache: false,
  48. async: false
  49. });
  50. return request;
  51. };
  53. this.getCity = function (id) {
  54. var request = $http({
  55. method: "get",
  56. url: "/api/Values/ShowCity/" + id,
  57. cache: false,
  58. async: false
  59. });
  60. return request;
  61. }
  63. this.deleteStudentKey = function (id) {
  64. var request = $http({
  65. method: "delete",
  66. url: "/api/Values/DeleteStudent/" + id,
  67. cache: false,
  68. async: false
  69. });
  70. return request;
  71. }
  72. });
StudentRecordcontroller.js (it is angular controller)
  1. app.controller("StudentRecordcontroller", function ($scope, RohitService, $location, ShareData) {
  2. $scope.val = "Submit";
  3. loadStateName();
  4. loadStudentRecord();
  5. if (ShareData.KeyId == "0") {
  6. resetForm();
  7. }
  8. $scope.finalSubmit = function () {
  9. var Student = {
  10. KeyId: $scope.KeyId,
  11. SName: $scope.SName,
  12. FName: $scope.FName,
  13. Gender: $scope.Gender,
  14. MobileNo: $scope.MobileNo,
  15. StateId: $scope.StateId.StateId,
  16. CityID: $scope.CityID.CityID,
  17. ClassList: $scope.ClassModel
  18. };
  19. var promisePost = RohitService.AddNewStudent(Student);
  20. promisePost.then(function (pl) {
  21. var student = pl.data;
  22. if ($scope.val == "Submit") {
  23. alert('your record save successfully');
  24. }
  25. else {
  26. alert('your record update successfully');
  27. $scope.val = "Submit";
  28. }
  29. resetForm();
  30. },
  31. function (errorPl) {
  32. alert('Error In Request ,Try Again Later');
  33. })
  34. };
  35. $scope.restSubmit = function () {
  36. resetForm();
  37. };
  38. function resetForm() {
  39. $scope.SName = null;
  40. $scope.FName = null;
  41. $scope.Gender= null;
  42. $scope.MobileNo = null;
  43. $scope.StateId = null;
  44. $scope.CityID = null;
  45. $scope.ClassModel = [{ Index: "0", "ClassName": "", "BoardName": "", "CRollNo": "", "MM": "", "OM": "", "Divi": "" }];
  46. $scope.val = "Submit";
  47. }
  48. function loadStudentRecord() {
  49. var KeyId=ShareData.KeyId;
  50. var promiseStudentRecord = RohitService.showStudentone(KeyId);
  51. promiseStudentRecord.then(function (pl) {
  52. var values=''
  53. var stud = pl.data;
  54. $scope.KeyId = stud[0].KeyId,
  55. $scope.SName = stud[0].SName,
  56. $scope.FName = stud[0].FName,
  57. $scope.Gender = stud[0].Gender,
  58. $scope.MobileNo = stud[0].MobileNo,
  59. $scope.StateId = { "StateId": stud[0].StateId };
  60. StateNameChange();
  61. $scope.CityID = { "CityID": stud[0].CityID };
  62. loadEduRecord(stud[0].KeyId);
  63. $scope.val = "Update";
  64. ShareData.KeyId = "0";
  65. },
  66. function (errorPl) {
  67. $scope.error = errorPl;
  68. });
  69. }
  70. function loadEduRecord(id) {
  71. var promiseStudentRecord = RohitService.showEduStudent(id);
  72. promiseStudentRecord.then(function (pl) {
  73. var stud = pl.data;
  74. $scope.ClassModel = stud;
  75. },
  76. function (errorPl) {
  77. $scope.error = errorPl;
  78. });
  79. }
  81. function loadStateName() {
  82. var promiseStateName = RohitService.getState();
  83. promiseStateName.then(function (pl) {
  84. $scope.States = pl.data
  85. },
  86. function (errorPl) {
  87. $scope.error = errorPl;
  88. });
  89. }
  91. $scope.OnStateNameChange = function () {
  92. StateNameChange();
  93. }
  94. function StateNameChange() {
  95. if (angular.isDefined($scope.StateId.StateId)) {
  96. var StateNameid = $scope.StateId.StateId;
  97. var promiseCityName = RohitService.getCity(StateNameid);
  98. promiseCityName.then(function (pl) {
  99. $scope.Cities = pl.data
  100. },
  101. function (errorPl) {
  102. $scope.error = errorPl;
  103. });
  104. }
  105. }
  107. $scope.ClassModel = [{ Index: "0", "ClassName": "", "BoardName": "", "CRollNo": "", "MM": "", "OM": "", "Divi": "" }
  108. //,{ Index: "1", "ClassName": "Intermediate", "BoardName": "XII", "CRollNo": "", "MM": "", "OM": "", "Divi": "I" }
  109. ];
  111. $scope.add = function () {
  112. var a = $scope.ClassModel.length;
  113. $scope.ClassModel.push({
  114. 'Index':a,
  115. 'ClassName': "",
  116. 'BoardName':"",
  117. 'CRollNo': "",
  118. 'MM': "",
  119. 'OM': "",
  120. 'Divi': ""
  121. });
  122. }
  123. //$scope.remove = function (Index) {
  124. // if (confirm('Are you sure to delete ?')) {
  125. // $scope.ClassModel.splice(Index, 1);
  126. // }
  127. //};
  129. $scope.remove = function (index)
  130. {
  131. if (confirm('Are you sure to delete?'))
  132. {
  133. var index = -1;
  134. var comArr = eval($scope.ClassModel);
  135. for (var i = 0; i < comArr.length; i++)
  136. {
  137. if (comArr[i].Index ===Index)
  138. {
  139. index = i;
  140. break;
  141. }
  142. }
  143. }
  144. if (index === -1)
  145. {
  146. alert("Something goes wrong !")
  147. }
  148. $scope.ClassModel.splice(index,1)
  149. }
  151. });


StudentViewController.js



Now, add the View. After adding View, your project looks like this.

Index.cshtml
  1. <!DOCTYPE html>
  2. <html data-ng-app="AngularModule">
  3. <head>
  4. <script src="~/Scripts/angular.min.js"></script>
  5. <script src="~/Scripts/angular-route.min.js"></script>
  6. <link href="~/Content/Styletest.css" rel="stylesheet" />
  7. <script src="~/AngularController/RohitRoute.js"></script>
  8. <script src="~/AngularController/RohitService.js"></script>
  9. <script src="~/AngularController/StudentRecordcontroller.js"></script>
  10. <script src="~/AngularController/StudentViewcontroller.js"></script>
  11. </head>
  12. <body>
  13. <table style="width: 99%;">
  14. <tr>
  15. <td colspan="2" class="Header">
  16. <center><h1>Angular Test Header</h1></center>
  17. </td>
  18. </tr>
  19. <tr>
  20. <td class="left">
  21. <ul>
  22. <li><a href="#/studentRecord">Application Form</a></li>
  23. <li><a href="#/studentView">View Form</a></li>
  24. </ul>
  25. </td>
  26. <td class="right">
  27. <ng-view>
  28. </ng-view>
  29. </td>
  30. </tr>
  31. <tr>
  32. <td colspan="2" class="footer">
  33. <center><h1>Footer</h1></center>
  34. </td>
  35. </tr>
  36. </table>
  37. </body>
  38. </html>
StudentRecord.cshtml
  1. @{
  2. ViewBag.Title = "Student Record";
  3. }
  4. <h2>Student Record</h2>
  6. <table style="vertical-align: top">
  7. <tr data-ng-show="false">
  8. <td>Student Name
  9. </td>
  10. <td>:
  11. </td>
  12. <td>
  13. <input type="text" data-ng-model="KeyId" />
  14. </td>
  15. </tr>
  16. <tr>
  17. <td>Student Name
  18. </td>
  19. <td>:
  20. </td>
  21. <td>
  22. <input type="text" data-ng-model="SName" />
  23. </td>
  24. </tr>
  26. <tr>
  27. <td>Fathe's Name
  28. </td>
  29. <td>:
  30. </td>
  31. <td>
  32. <input type="text" data-ng-model="FName" />
  34. </td>
  35. </tr>
  36. <tr>
  37. <td>Gender
  38. </td>
  39. <td>:
  40. </td>
  41. <td>
  42. <input type="radio" data-ng-model="Gender" style="width: 15px;" value="Male" />
  43. Male
  44. <input type="radio" data-ng-model="Gender" style="width: 15px;" value="Female" />
  45. Female
  46. </td>
  47. </tr>
  48. <tr>
  49. <td>Mobile No
  50. </td>
  51. <td>:
  52. </td>
  53. <td>
  54. <input type="text" data-ng-model="MobileNo" />
  55. </td>
  56. </tr>
  57. <tr>
  58. <td>State Name
  59. </td>
  60. <td>:
  61. </td>
  62. <td>
  63. <select name="ddlState" id="ddlState" ng-model="StateId" ng-options="a.StateName for a in States track by a.StateId" data-ng-change="OnStateNameChange()">
  64. <option value="">--Select--</option>
  65. </select>
  66. </td>
  67. </tr>
  68. <tr>
  69. <td>City Name
  70. </td>
  71. <td>:
  72. </td>
  73. <td>
  74. <select name="ddlCity" id="ddlCity" ng-model="CityID" ng-options="b.CityName for b in Cities track by b.CityID">
  75. <option value="">--Select--</option>
  76. </select>
  77. </td>
  78. </tr>
  81. <tr>
  82. <td></td>
  83. <td></td>
  84. <td>
  85. <input type="submit" data-ng-click="finalSubmit();" value="{{val}}" />
  86. <input type="submit" data-ng-click="restSubmit();" value="Rest" />
  87. <input type="hidden" data-ng-model="KeyId" />
  88. </td>
  89. </tr>
  90. </table>
  91. <table class="table table-striped table-bordered">
  92. <thead>
  93. <tr>
  94. <th>ID</th>
  95. <th>ClassName</th>
  96. <th>BoardName</th>
  97. <th>CRollNo</th>
  98. <th>MM</th>
  99. <th>OM</th>
  100. <th>Divi</th>
  101. </tr>
  102. </thead>
  103. <tbody>
  104. <tr ng-repeat="cls in ClassModel" id="{{$index+1}}">
  105. <td>{{$index+1}}</td>
  106. <td>
  107. <input type="text" ng-model="cls.ClassName" style="width: 150px;" /></td>
  108. <td>
  109. <input type="text" ng-model="cls.BoardName" style="width: 150px;" /></td>
  110. <td>
  111. <input type="text" ng-model="cls.CRollNo" style="width: 150px;" /></td>
  112. <td>
  113. <input type="text" ng-model="cls.MM" style="width: 50px;" /></td>
  114. <td>
  115. <input type="text" ng-model="cls.OM" style="width: 50px;" /></td>
  116. <td>
  117. <input type="text" ng-model="cls.Divi" style="width: 50px;" /></td>
  118. <td>
  119. <input type="submit" ng-click="add()" value="Add" /></td>
  120. <td>
  121. <input type="submit" ng-click="remove(cls.Index)" value="Delete" ng-show="{{cls.Index!=0}}" /></td>
  122. </tr>
  123. </tbody>
  124. </table>
StudentView.cshtml
  1. @{
  2. ViewBag.Title = "Student View";
  3. }
  4. <h2>Student View</h2>
  5. <table>
  6. <tr>
  7. <thead>
  9. <th>Student Name
  10. </th>
  11. <th>Father's Name
  12. </th>
  13. <th>Gender
  14. </th>
  15. <th>Mobile No.
  16. </th>
  17. </thead>
  18. </tr>
  19. <tr>
  20. <tbody data-ng-repeat="students in student">
  22. </td>
  23. <td>{{students.SName | uppercase}}
  24. </td>
  25. <td>{{students.FName}}
  26. </td>
  27. <td>{{students.Gender}}
  28. </td>
  29. <td>{{students.MobileNo}}
  30. </td>
  31. <td>
  32. <span data-ng-click="editEmployee(students.KeyId)">Edit</span>
  33. <span data-ng-click="deleteEmployee(students.KeyId)">Delete</span>
  34. </td>
  35. </tbody>
  36. </tr>
  37. </table>
Now, build your project and run it.

After running your application it's here .