使用AngularJS向ASP.NET MVC 5控制器的操作方法发送数据

Question

我在我的项目中使用了Umbraco7.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;
    }
}

SendMailModel:

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'
]
}

更新：添加解决方案文件夹结构图

- x19

Answer 1

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;
       }
   }
}

SendMailViewModel ：

 public class SendMailViewModel
 {
    public string TextMessage { get; set; }
    public string SendTo { get; set; }
    public int ContentId { get; set; }
 }

文件树形结构:

如果您想了解有关Umbraco 7.x中后台路由的更多信息，可以访问this link。

- x19

Answer 2

首先，在使用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;
    }
}

- Bartosz Czerwonka

---

在下面的评论中，我根据您的指南编写了我的代码，但是在Umbraco后台出现了一个错误，显示如下： 请求错误：URL返回了404（未找到）： /IncomingCallSurface/Reply - x19

是的，但您需要设置URL的改进。我不确定，但是根据此文档，您有两个选项 - https://our.umbraco.org/documentation/reference/routing/surface-controllers：1. /umbraco/surface/IncomingCallSurface/Reply 2. /umbraco/Reply/IncomingCallSurface/Reply - Bartosz Czerwonka

请看我添加的图片。根据您的建议，我需要改变结构吗？这意味着要在Reply文件夹中嵌套View文件夹，并将控制器添加到Reply文件夹中，而不是Controllers文件夹中吗？ - x19

请查看我的更改，它可以帮助你 - http://stackoverflow.com/posts/33510208/revisions。我希望你能指导和帮助。 - Bartosz Czerwonka

你需要将这个问题分解成简单的步骤。如果你以前没有写过UmbracoApiController，那就先写一个。从简单的开始。使用HttpGet创建测试方法，而不是HttpPost。让它返回一些测试字符串（"Hello Word"）。直接在浏览器中调用它。当你做到这一点并且文本显示在浏览器中时，再编写Angular代码从同一个URL检索数据。使用像Fiddler这样的工具来检查你的URL调用是否正确。简而言之：确保你从控制器上为URL提供了正确的操作，并且这些URL被你的Angular调用。否则会出现404错误。 - csharpforevermore