"> آموزش ساخت فرم ساده توسط Angularjs | ام اس پی سافت

آموزش ساخت فرم ساده توسط Angularjs

Angularjs

برای دستیابی به ویژگی های برابر با jQuery اصلی با نمونه ی ASP.NET Web API ، احتیاج به قابلیت ایجاد یک ویدیوی جدید داریم. نمونه ی اصلی رویداد ثبت فرم را دریافت میکند و داده های فرم را برای ثبت به صورت AJAX در Web Server سریالی میکند. با Angularjs فقط لازم است که تعدادی از المان های فرم را با استفاده از ( ng-model مستقیم) به مدل و یک رویداد کلیک را با استفاده از (ng-click مستقیم) Bind کنیم.

Angularjs

<form>
<input type="hidden" ng-model="editableVideo.Id"/>
<label>Title:</label>
<input type="text" ng-model="editableVideo.Title" required />
<label>Length</label>
<input type="number" ng-model="editableVideo.Length" min="1" max="360" />
<input type="submit" value="Save" ng-click="saveVideo()" />
</form>

یاداشت: یک ngSubmit مستقیم نیز وجود دارد، اما اگر نوع دیگری داشته باشیم Angularjs ، از ثبت فرم پیش فرض جلوگیری می کند. وقتی کاربر روی save کلیک کند، فقط لازم است که اطلاعات ویدئو جدید را به Web API اضافه کنیم.

کد controller به صورت زیر خواهد شد:

var VideoController = function ($scope, $http) {
 
    var serviceUrl = "/api/videos";
 
    var blankVideo = {
        Id: "",
        Title: "",
        Length: 75
    };
 
    var refreshVideos = function() {
        $http.get(serviceUrl).success(function (data) {
            $scope.videos = data;
        });                
    };
 
    $scope.isEditVisible = false;
 
    $scope.showEdit = function () {
        $scope.isEditVisible = true;
        $scope.editableVideo = angular.copy(blankVideo);
    };
 
    $scope.saveVideo = function() {
        $scope.isEditVisible = false;
        $http.post(serviceUrl, $scope.editableVideo)
             .success(function (video) {
                 $scope.videos.push(video);
             });
    };
 
    refreshVideos();
};

به یاد داشته باشید که نگهداری متود ها و داده های محلی در داخل یک کنترلر آسان تر است.

در مرحله بعد توانایی حذف و ویرایش کردن ویدئو های موجود لازم است، و سپس نمونه دقیقا مانند jQuery اصلی که میخواستیم ، رفتار می کند.

موفق باشید !

  • پسورد: www.mspsoft.com
داریوش فرخی

داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

کدیشن ! مارکت پروژه های برنامه نویسی راه اندازی شدیه توکه پا بریم ببینم