使用 AngularJS 将数据发送到 ASP.NET MVC 5 控制器的操作方法
Sending data by using AngularJS to an action method of ASP.NET MVC 5 controller
我在我的项目中使用了 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: It's need to write some codes to handle data to an action in ASP.NET MVC controller.But how?
}
});
ASP.NET MVC 控制器:
public class IncomingCallSurfaceController : BaseSurfaceController
{
public ActionResult Reply(SendMailModel sendMailModel)
{
//TODO: how I should be write this method that be proper for getting data from angularjs?
return null;
}
}
发送邮件模型:
public class SendMailModel
{
public string TextMessage { get; set; }
public string SendTo { get; set; }
}
package.manifest:
{
propertyEditors: [
{
alias: "Send.Reply",
name: "Send Reply",
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: how I should be write this method that be proper for getting data from angularjs?
return null;
}
}
Reply.controller.js :
angular.module("umbraco")
.controller("Reply.controller", function ($scope, $http, $routeParams) {
$scope.SendReply = function () {
var sendTo = $("#Email").val();
var textMessage = $("#TextMessage").val();
var contentId = $routeParams.id;
$scope.xxx = "I'm here!";
var dataObj = {
TextMessage: textMessage,
SendTo: sendTo,
ContentId: contentId
};
$http.post("backoffice/Reply/ReplyToIncomingCall/ReplyMessage", dataObj)
.then(function (response) {
alert("YES!");
//TODO:
});
}
});
ReplyToIncomingCallController.cs :
namespace Jahan.Nuts.Web.Mvc.UmbracoCms.App.App_Plugins.Reply
{
[PluginController("Reply")]
public class ReplyToIncomingCallController :UmbracoAuthorizedJsonController
{
[HttpPost][ChildActionOnly]
public ActionResult ReplyMessage(SendMailViewModel vm)
{
return null;
}
}
}
发送邮件视图模型:
public class SendMailViewModel
{
public string TextMessage { get; set; }
public string SendTo { get; set; }
public int ContentId { get; set; }
}
文件的树结构:
如果您想了解更多关于 Umbraco 中的后台路由 7.x,您可以访问 this link.
我在我的项目中使用了 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: It's need to write some codes to handle data to an action in ASP.NET MVC controller.But how?
}
});
ASP.NET MVC 控制器:
public class IncomingCallSurfaceController : BaseSurfaceController
{
public ActionResult Reply(SendMailModel sendMailModel)
{
//TODO: how I should be write this method that be proper for getting data from angularjs?
return null;
}
}
发送邮件模型:
public class SendMailModel
{
public string TextMessage { get; set; }
public string SendTo { get; set; }
}
package.manifest:
{
propertyEditors: [
{
alias: "Send.Reply",
name: "Send Reply",
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: how I should be write this method that be proper for getting data from angularjs?
return null;
}
}
Reply.controller.js :
angular.module("umbraco")
.controller("Reply.controller", function ($scope, $http, $routeParams) {
$scope.SendReply = function () {
var sendTo = $("#Email").val();
var textMessage = $("#TextMessage").val();
var contentId = $routeParams.id;
$scope.xxx = "I'm here!";
var dataObj = {
TextMessage: textMessage,
SendTo: sendTo,
ContentId: contentId
};
$http.post("backoffice/Reply/ReplyToIncomingCall/ReplyMessage", dataObj)
.then(function (response) {
alert("YES!");
//TODO:
});
}
});
ReplyToIncomingCallController.cs :
namespace Jahan.Nuts.Web.Mvc.UmbracoCms.App.App_Plugins.Reply
{
[PluginController("Reply")]
public class ReplyToIncomingCallController :UmbracoAuthorizedJsonController
{
[HttpPost][ChildActionOnly]
public ActionResult ReplyMessage(SendMailViewModel vm)
{
return null;
}
}
}
发送邮件视图模型:
public class SendMailViewModel
{
public string TextMessage { get; set; }
public string SendTo { get; set; }
public int ContentId { get; set; }
}
文件的树结构:
如果您想了解更多关于 Umbraco 中的后台路由 7.x,您可以访问 this link.