آپلود با AngularJS در ASP.NET MVC5

آپلود با AngularJS در ASP.NET MVC5 ، در این مقاله میخواهیم راجب آپلود با AngularJS باهم صحبت کنیم. این مقاله بسیار آسان است.

در اینجا من راحت ترین راه برای آپلود با AngularJS در ASP.NET MVC5 را به شما نشان میدهم .

چرا این ؟ کتابخانه های بسیاری وجود دارد که این کار را به صورت آنلاین انجام میدهند.

پس من چه تغییری ایجاد خواهم کرد ؟ اگر در همین ابتدای کار این سوال به ذهنتان خطور کرد خیلی خوبه ! بیاید با هم نگاهی به دلیل اصلی نگرانی شما از این موضوع داشته باشیم…

احتیاجات من بسیار ساده اند. من یک مدل دارم  :

public class TutorialModel
{
public string Title { get; set; }
public string Description { get; set; }
public HttpPostedFileBase Attachment { get; set; }
}

من میخواهم این مدل را از سمت مشتری با AngularJS بگیرم و آن را به کنترلر های ASP.NET MVC5 بفرستم.

اغلب کتابخانه های آنلاینی که من پیدا کردم از روش زیر این کار را انجام میدهند :

• آپلود فایل -> ذخیره آن -> بازگرداندن آدرس به عنوان جواب
• فرستادن درخواست دیگری با آدرس فایل و مدل آن

مشکل رایج در این روش این است که :

هربار که شما فایل را تغییر میدهید فایل را به سرور آپلود میکند و فایل های قبلی را پاک نمیکند.

پس من نمیخواهم از این روش استفاده کنم و ممکن است که شما هم با من موافق باشید.

من به شما نشان خواهم داد که چگونه این کار را در یک درخواست انجام دهید.

کاربران میتوانند هر چندبار که مایلند هرچیزی را تغییر دهند. پس از کلیک بر روی ذخیره مدل به سرور ارسال خواهد شد.

چگونه کار میکند؟

برای انجام این کار من اینجا از فرم داده HTML5 استفاده میکنم.

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

بیایید با هم نگاهی بیاندازیم به مدل akFileUploader من:

لینک دانلود : https://github.com/dipongkor/FileUploaderModule/

(function () {

"use strict"

angular.module("akFileUploader", [])

.factory("akFileUploaderService", ["$q", "$http",
function ($q, $http) {

var getModelAsFormData = function (data) {
var dataAsFormData = new FormData();
angular.forEach(data, function (value, key) {
dataAsFormData.append(key, value);
});
return dataAsFormData;
};

var saveModel = function (data, url) {
var deferred = $q.defer();
$http({
url: url,
method: "POST",
data: getModelAsFormData(data),
transformRequest: angular.identity,
headers: { 'Content-Type': undefined }
}).success(function (result) {
deferred.resolve(result);
}).error(function (result, status) {
deferred.reject(status);
});
return deferred.promise;
};

return {
saveModel: saveModel
}}])
.directive("akFileModel", ["$parse",
function ($parse) {
return {
restrict: "A",
link: function (scope, element, attrs) {
var model = $parse(attrs.akFileModel);
var modelSetter = model.assign;
element.bind("change", function () {
scope.$apply(function () {
modelSetter(scope, element[0].files[0]);
});
});
}
};
}]);
})
(window, document);

من به شما خصوصیات بسیار دقیقی از روش کار این مدل خواهم داد. این یک هدایتگر و یک سرویس فاکتوری دارد.

akFileModule هدایتگر : تغییر و گرفتن فایل ها از modelSetter به عهده ی آن است.

akFileUploaderService : این عموما فرم داده ی اشیا را میسازد و با استفاده از $http آن را به آدرس موردنظر میفرستد.

استفاده در MVC

Application.js

"use strict";
(function () {
angular.module("application", ["ngRoute", "akFileUploader"]);
})()


<h3><span style="color: #ff0000;">قالب</span></h3>

form class="form-horizontal"
h4Tutorial/h4
hr /
div class="form-group"
label for="title" class="col-md-2 control-label"Title/label
div class="col-md-10"
input type="text" data-ng-model="tutorial.title"
name="title" class="form-control" /
/div
/div
div class="form-group"
label for="description" class="col-md-2 control-label"Description/label
div class="col-md-10"
textarea data-ng-model="tutorial.description"
name="description" class="form-control"
/textarea
/div
/div
div class="form-group"
label for="attachment" class="col-md-2 control-label"Attachment/label
div class="col-md-10"
input type="file" name="attachment"
class="form-control" data-ak-file-model="tutorial.attachment" /
/div
/div
div class="form-group"
div class="col-md-offset-2 col-md-10"
input type="button" class="btn btn-primary"
value="Save" data-ng-click="saveTutorial(tutorial)" /
/div
/div
/form


<h3><span style="color: #ff0000;">سرویس</span></h3>

"use strict";
(function () {
angular.module("application")
.factory("entityService",
["akFileUploaderService", function (akFileUploaderService) {
var saveTutorial = function (tutorial) {
return akFileUploaderService.saveModel(tutorial, "/controllerName/actionName");
};
return {
saveTutorial: saveTutorial
};
}]);
})();


<h3><span style="color: #ff0000;">کنترلر (js)</span></h3>

"use strict";
(function () {
angular.module("application")
.controller("homeCtrl", ["$scope", "entityService",
function ($scope, entityService) {
$scope.saveTutorial = function (tutorial) {
entityService.saveTutorial(tutorial)
.then(function (data) {
console.log(data);
});
};
}]);
})();


<h3><span style="color: #ff0000;">اکشن کنترلرMVC</span></h3>

[HttpPost]
public ActionResult SaveTutorial(TutorialModel tutorial)
{
return Json("Tutorial Saved",JsonRequestBehavior.AllowGet);
}

امیدوارم از آن استفاده کنید . با تشکر از وقتی که برای مطالعه گذاشتید.