使用AngularJS向ASP.NET MVC 5控制器的操作方法发送数据
我在我的项目中使用了 Umbraco
7.3 和 ASP.NET MVC 5。
我想要从 AngularJS
将数据发送到 ASP.NET MVC
5 控制器。
我该怎么做?
reply.html :
<div ng-controller="Reply.controller">
<input type="button" name="Send Reply" ng-click="SendReply()"/>
</div>
Reply.controller.js:
angular.module("umbraco")
.controller("Reply.controller", function ($scope) {
$scope.SendReply = function () {
var SendTo = $("#Email").val();
var TextMessage = $("#TextMessage").val();
//TODO: 需要编写一些代码来处理数据以将其发送到ASP.NET MVC控制器的操作。但如何做?
}
});
ASP.NET MVC 控制器:
public class IncomingCallSurfaceController : BaseSurfaceController
{
public ActionResult Reply(SendMailModel sendMailModel)
{
//TODO: 我应该如何编写此方法,以便从AngularJS获取数据?
return null;
}
}
SendMailModel:
public class SendMailModel
{
public string TextMessage { get; set; }
public string SendTo { get; set; }
}
package.manifest:
{
propertyEditors: [
{
alias: "Send.Reply",
name: "发送回复",
editor:{
view:"/App_Plugins/Reply/Reply.html"
},
}
]
,
javascript:[
'/App_Plugins/Reply/Reply.controller.js'
]
}
首先,在使用Angular时尽量避免使用jQuery。
使用Angular的ng-model将输入值绑定到控制器上。使用$http模块将数据发送到API。
视图:
<div ng-controller="Reply.controller">
<input type="text" ng-model="message.TextMessage"/>
<input type="text" ng-model="message.SendTo"/>
<input type="button" name="Send Reply" ng-click="SendReply()"/>
</div>
Angular:
angular.module("umbraco")
.controller("Reply.controller", function($scope, $http) {
$scope.message = {
TextMessage: '',
SendTo: ''
};
$scope.SendReply = function() {
//TODO URL
$http.post('/umbraco/api/IncomingCallSurface/Reply', $scope.message)
.then(function(response) {
//TODO
});
}
});
ASP.NET MVC:
public class IncomingCallSurfaceController : UmbracoApiController
{
[HttpPost]
public ActionResult Reply(SendMailModel sendMailModel)
{
//TODO: 该如何编写此方法以适当地从AngularJS获取数据?
return null;
}
}
Reply.controller.js :
ReplyToIncomingCallController.cs :
SendMailViewModel :
文件树结构:
如果您想了解有关Umbraco 7.x后端路由的更多信息,可以访问此链接。