Post
Ask Question

CRUD Operation And MultiRow Insert In MVC 4 With AngularJS Using Web API

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
  • Start Visual Studio 2012 or later.
  • Create a new project.
  • Select ASP.NET MVC 4 Web Application.
  • Provide the name of the project as demoAngular.
  • Set the location where you want to save the project.
  • Click on OK button.



  • Now, select the project template "Empty" or "Basic"; and the View engine will be razor.



  • Click on OK button.


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.     }  
  17.   
  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.     }  
  24.   
  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.         }  
  29.   
  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.         }  
  48.   
  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.         }  
  58.         
  59.         public IEnumerable<StateMaster> BindLstate(int Procid)  
  60.         {  
  61.             var sqlParms = new SqlParameter[]{  
  62.   
  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.         }  
  68.   
  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.         }  
  78.   
  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.     }  
  89.   
  90.   
  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.         }  
  37.   
  38.         [HttpGet]  
  39.         [ActionName("ShowALLStudent")]  
  40.         public IEnumerable<StudentData> ShowALLStudent()  
  41.         {  
  42.             var mod = db.StudentALLDetails(2,0).ToList();  
  43.             return mod;  
  44.         }  
  45.   
  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.         }  
  53.   
  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.         }  
  62.   
  63.         [HttpGet]  
  64.         [ActionName("ShowState")]  
  65.         public IEnumerable<StateMaster> ShowState()  
  66.         {  
  67.             var mod = db.BindLstate(1).ToList();  
  68.             return mod;  
  69.         }  
  70.   
  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.         }  
  78.   
  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.     };  
  11.   
  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.     };  
  21.   
  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.     }  
  31.   
  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.     }  
  41.   
  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.     };  
  52.   
  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.     }  
  62.   
  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.     }  
  80.   
  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.     }  
  90.   
  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.     }  
  106.       
  107.     $scope.ClassModel = [{ Index: "0", "ClassName": "", "BoardName": "", "CRollNo": "", "MM": "", "OM": "", "Divi": "" }   
  108.            //,{ Index: "1", "ClassName": "Intermediate", "BoardName": "XII", "CRollNo": "", "MM": "", "OM": "", "Divi": "I" }  
  109.     ];  
  110.   
  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.     //};  
  128.   
  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.     }  
  150.      
  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>  
  5.   
  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>  
  25.   
  26.     <tr>  
  27.         <td>Fathe's Name  
  28.         </td>  
  29.         <td>:  
  30.         </td>  
  31.         <td>  
  32.             <input type="text" data-ng-model="FName" />  
  33.   
  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>  
  79.   
  80.   
  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>  
  8.           
  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">  
  21.               
  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 .


Similar Articles