در این مقاله قصد پیاده سازی چهار عمل اصلی (ثبت-ویرایش- حذف) با استفاده از WebApI و تکنولوژی AngularJS در MVC را به شما علاقه مندان به MVC آموزش بدهم

WebApIچیست و چه کاربردی دارد؟ Web API،  قالب جدیدی برای پروژه‌های مبتنی بر وب در NET. است که بر مبنای اصول و الگوهای موجود در ASP.NET MVC ساخته شده است. Web API توسعه گران را قادر می‌سازد تا با استفاده از یک الگوی ساده که در Controllerها پیاده سازی می‌شود، وب سرویس‌های مبتنی بر پروتوکل HTTP را با کدها و تنظیمات کم ایجاد کنند.

AngilarJSچیست؟ AngularJS کتابخانه‌ای برپایه‌ی جاوااسکریپت است که به منظور تولید نرم‌افزارهای تحت وب توسط گوگل توسعه پیدا کرده است.
حال برای شروع، یک پروژه از نوع Asp.Net.MVC5 ایجاد میکنیم و همانند شکل زیر MVC و WebApI را انتخاب میکنیم.

حال روی Models  راست کلیک کرده ویک کلاس به نام Friend ایجاد کنیم و کد های زیر را داخل آن مینویسیم

public class Friend  
{  
    [Key]  
    [DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)]  
    public int FriendId { get; set; }  
    public string FirstName { get; set; }  
    public string LastName { get; set; }  
    public string Address { get; set; }  
    public string City { get; set; }  
    public string PostalCode { get; set; }  
    public string Country { get; set; }  
    public string Notes { get; set; }  
}  

در این آموزش قصد داریم از روش codeFrist استفاده کنیم و لذا دراین مرحله شروع به ساختن Context میکنیم

public class FriendsContext : DbContext  
{  
     public FriendsContext()  
         : base("name=DefaultConnection")  
     {  
         base.Configuration.ProxyCreationEnabled = false;  
     }  
     public DbSet<Friend> Friends { get; set; }  
}  

اکنون روی پروژه راست کلیک کرده و یک کنترلر ایجاد میکنیم که از ApiController ارث بری کند

public class FriendController : ApiController  
    {  
        private FriendsContext db = new FriendsContext();  
         
 // GET api/<controller>          
[HttpGet]  
public IEnumerable<Friend> Get()           
        {  
            return db.Friends.AsEnumerable();  
        }             
// GET api/<controller>/5  
        public Friend Get(int id)  
        {  
            Friend friend = db.Friends.Find(id);  
            if (friend == null)  
            {  
                throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.NotFound));  
            }  
  
            return friend;  
        }             
// POST api/<controller>  
        public HttpResponseMessage Post(Friend friend)  
        {  
            if (ModelState.IsValid)  
            {  
                db.Friends.Add(friend);  
                db.SaveChanges();  
  
                HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.Created, friend);  
                response.Headers.Location = new Uri(Url.Link("DefaultApi", new { id = friend.FriendId }));  
                return response;  
            }  
            else  
            {  
                return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState);  
            }  
        }             
// PUT api/<controller>/5  
        public HttpResponseMessage Put(int id, Friend friend)  
        {  
            if (!ModelState.IsValid)  
            {  
                return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState);  
            }  
  
            if (id != friend.FriendId)  
            {  
                return Request.CreateResponse(HttpStatusCode.BadRequest);  
            }  
  
            db.Entry(friend).State = EntityState.Modified;  
  
            try  
            {  
                db.SaveChanges();  
            }  
            catch (DbUpdateConcurrencyException ex)  
            {  
                return Request.CreateErrorResponse(HttpStatusCode.NotFound, ex);  
            }  
  
            return Request.CreateResponse(HttpStatusCode.OK);  
        }            
 // DELETE api/<controller>/5  
        public HttpResponseMessage Delete(int id)  
        {  
            Friend friend = db.Friends.Find(id);  
            if (friend == null)  
            {  
                return Request.CreateResponse(HttpStatusCode.NotFound);  
            }  
  
            db.Friends.Remove(friend);  
  
            try  
            {  
                db.SaveChanges();  
            }  
            catch (DbUpdateConcurrencyException ex)  
            {  
                return Request.CreateErrorResponse(HttpStatusCode.NotFound, ex);  
            }  
  
            return Request.CreateResponse(HttpStatusCode.OK, friend);  
        }            
 protected override void Dispose(bool disposing)  
        {  
            db.Dispose();  
            base.Dispose(disposing);  
        }  
    }  

حال برای استفاده از AngilarJS روی پروژه راست کلیک کرده و    Nuget Package Manager  را انتخاب میکنیم ودر قسمت جستجو، AngularJS را جستجو میکنیم

و حال برای استفاده Angilar.js یک Script به نام Emp.js ایجاد میکنیم و کد های زیر را داخل آن مینوسیم.

function friendController($scope, $http) {    
    $scope.loading = true;  
    $scope.addMode = false;  
  
    //Used to display the data  
    $http.get('/api/Friend/').success(function (data) {          
        $scope.friends = data;  
        $scope.loading = false;  
    })  
    .error(function () {  
        $scope.error = "An Error has occured while loading posts!";  
        $scope.loading = false;  
    });  
  
    $scope.toggleEdit = function () {  
        this.friend.editMode = !this.friend.editMode;  
    };  
    $scope.toggleAdd = function () {  
        $scope.addMode = !$scope.addMode;  
    };  
  
    //Used to save a record after edit  
    $scope.save = function () {  
        alert("Edit");  
        $scope.loading = true;  
        var frien = this.friend;  
        alert(emp);  
        $http.put('/api/Friend/', frien).success(function (data) {  
            alert("Saved Successfully!!");  
            emp.editMode = false;  
            $scope.loading = false;  
        }).error(function (data) {  
            $scope.error = "An Error has occured while Saving Friend! " + data;  
            $scope.loading = false;  
  
        });  
    };  
  
    //Used to add a new record  
    $scope.add = function () {          
        $scope.loading = true;  
        $http.post('/api/Friend/', this.newfriend).success(function (data) {  
            alert("Added Successfully!!");  
            $scope.addMode = false;  
            $scope.friends.push(data);  
            $scope.loading = false;  
        }).error(function (data) {  
            $scope.error = "An Error has occured while Adding Friend! " + data;  
            $scope.loading = false;  
  
        });  
    };  
  
    //Used to edit a record  
    $scope.deletefriend = function () {         
        $scope.loading = true;  
        var friendid = this.friend.FriendId;  
        $http.delete('/api/Friend/' + friendid).success(function (data) {  
            alert("Deleted Successfully!!");  
            $.each($scope.friends, function (i) {  
                if ($scope.friends[i].FriendId === friendid) {  
                    $scope.friends.splice(i, 1);  
                    return false;  
                }  
            });  
            $scope.loading = false;  
        }).error(function (data) {  
            $scope.error = "An Error has occured while Saving Friend! " + data;  
            $scope.loading = false;  
  
        });  
    };  
  
}  

اکنون در صفحه Layout.cshtm_  ، کد های زیر را برای استفاده از Angilar.js و  اسکریپت Emp.js  اضافه میکنیم

@Scripts.Render("~/bundles/jquery")  
@Scripts.Render("~/bundles/bootstrap")  
@Scripts.Render("~/bundles/angularjs")  
@Scripts.Render("~/bundles/empjs")  

و حال از کنترلر Frindsیک view ساخته و کد های زیر را به آن اضافه میکنیم.

@{  
    ViewBag.Title = "FriendView";  
    Layout = "~/Views/Shared/_Layout.cshtml";  
}  
  
<h2>Friends View</h2>  
<style>  
    #mydiv {  
        position: absolute;  
        top: 0;  
        left: 0;  
        width: 100%;  
        height: 100%;  
        z-index: 1000;  
        background-color: grey;  
        opacity: .8;  
    }  
  
    .ajax-loader {  
        position: absolute;  
        left: 50%;  
        top: 50%;  
        margin-left: -32px; /* -1 * image width / 2 */  
        margin-top: -32px; /* -1 * image height / 2 */  
        display: block;  
    }  
</style>  
<div data-ng-app data-ng-controller="friendController" class="container">  
    <strong class="error">{{ error }}</strong>  
    <div id="mydiv" data-ng-show="loading">  
        <img src="Images/ajax-loader.gif" class="ajax-loader" />  
    </div>  
    <p data-ng-hide="addMode"><a data-ng-click="toggleAdd()" href="javascript:;" class="btn btn-primary">Add New</a></p>  
    <form name="addFriend" data-ng-show="addMode" style="width:600px;margin:0px auto;">  
        <label>FirstName:</label><input type="text" data-ng-model="newfriend.FirstName" required />  
        <label>LastName:</label><input type="text" data-ng-model="newfriend.LastName" required />  
        <label>Address:</label><input type="text" data-ng-model="newfriend.Address" required />  
        <label>City:</label><input type="text" data-ng-model="newfriend.City" required />  
        <label>PostalCode:</label><input type="text" data-ng-model="newfriend.PostalCode" required />  
        <label>Country:</label><input type="text" data-ng-model="newfriend.Country" required />  
        <label>Notes:</label><input type="text" data-ng-model="newfriend.Notes" required />  
        <br />         
        <br />  
        <input type="submit" value="Add" data-ng-click="add()" data-ng-disabled="!addFriend.$valid" class="btn btn-primary" />  
        <input type="button" value="Cancel" data-ng-click="toggleAdd()" class="btn btn-primary" />  
        <br /><br />  
    </form>  
    <table class="table table-bordered table-hover" style="width:800px">  
        <tr>  
            <th>#</th>  
            <td>FirstName</td>  
            <th>LastName</th>  
            <th>Address</th>  
            <th>City</th>  
            <th>PostalCode</th>  
            <th>Country</th>  
            <th>Notes</th>  
        </tr>  
  
        <tr data-ng-repeat="friend in friends">  
            <td><strong data-ng-hide="friend.editMode">{{ friend.FriendId }}</strong></td>  
            <td>  
                <p data-ng-hide="friend.editMode">{{ friend.FirstName }}</p>  
                <input data-ng-show="friend.editMode" type="text" data-ng-model="friend.FirstName" />  
            </td>  
            <td>  
                <p data-ng-hide="friend.editMode">{{ friend.LastName }}</p>  
                <input data-ng-show="friend.editMode" type="text" data-ng-model="friend.LastName" />  
            </td>  
            <td>  
                <p data-ng-hide="friend.editMode">{{ friend.Address }}</p>  
                <input data-ng-show="friend.editMode" type="text" data-ng-model="friend.Address" />  
            </td>  
            <td>  
                <p data-ng-hide="friend.editMode">{{ friend.City }}</p>  
                <input data-ng-show="friend.editMode" type="text" data-ng-model="friend.City" />  
            </td>  
            <td>  
                <p data-ng-hide="friend.editMode">{{ friend.PostalCode }}</p>  
                <input data-ng-show="friend.editMode" type="text" data-ng-model="friend.PostalCode" />  
            </td>  
            <td>  
                <p data-ng-hide="friend.editMode">{{ friend.Country }}</p>  
                <input data-ng-show="friend.editMode" type="text" data-ng-model="friend.Country" />  
            </td>  
            <td>  
                <p data-ng-hide="friend.editMode">{{ friend.Notes }}</p>  
                <input data-ng-show="friend.editMode" type="text" data-ng-model="friend.Notes" />  
            </td>  
            <td>  
                <p data-ng-hide="friend.editMode"><a data-ng-click="toggleEdit(friend)" href="javascript:;">Edit</a> | <a data-ng-click="deletefriend(friend)" href="javascript:;">Delete</a></p>  
                <p data-ng-show="friend.editMode"><a data-ng-click="save(friend)" href="javascript:;">Save</a> | <a data-ng-click="toggleEdit(friend)" href="javascript:;">Cancel</a></p>  
            </td>  
        </tr>  
    </table>  
    <hr />  
  
</div>  

حال از برنامه اجرا بگیرید وعملیات  ثبت ، ویرایش و حذف را انجام دهید.