Fatal编程技术网
  • ajax/
  • Ajax 使用AngularJS向ASP.NET MVC 5控制器的动作方法发送数据

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

ajax angularjs asp.net-mvc umbraco

Ajax 使用AngularJS向ASP.NET MVC 5控制器的动作方法发送数据,ajax,angularjs,asp.net-mvc,umbraco,umbraco7,Ajax,Angularjs,Asp.net Mvc,Umbraco,Umbraco7,我在项目中使用了Umbraco7.3和ASP.NET MVC 5 我想将数据从AngularJS发送到ASP.NET MVC5控制器 我怎么做 reply.html: <div ng-controller="Reply.controller"> <input type="button" name="Send Reply" ng-click="SendReply()"/> </div> angular.module("umbraco") .contr

我在项目中使用了
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>

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

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

{
propertyEditors: [
    {
        alias: "Send.Reply",
        name: "Send Reply",
        editor:{
            view:"/App_Plugins/Reply/Reply.html"
        },
    }
]
,
javascript:[
    '/App_Plugins/Reply/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: 
           });
    }
});

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; }
 }
ASP.NET MVC控制器：

<div ng-controller="Reply.controller">
    <input type="button" name="Send Reply"  ng-click="SendReply()"/>
</div>

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

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

{
propertyEditors: [
    {
        alias: "Send.Reply",
        name: "Send Reply",
        editor:{
            view:"/App_Plugins/Reply/Reply.html"
        },
    }
]
,
javascript:[
    '/App_Plugins/Reply/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: 
           });
    }
});

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

<div ng-controller="Reply.controller">
    <input type="button" name="Send Reply"  ng-click="SendReply()"/>
</div>

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

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

{
propertyEditors: [
    {
        alias: "Send.Reply",
        name: "Send Reply",
        editor:{
            view:"/App_Plugins/Reply/Reply.html"
        },
    }
]
,
javascript:[
    '/App_Plugins/Reply/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: 
           });
    }
});

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; }
 }
包。清单：

<div ng-controller="Reply.controller">
    <input type="button" name="Send Reply"  ng-click="SendReply()"/>
</div>

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

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

{
propertyEditors: [
    {
        alias: "Send.Reply",
        name: "Send Reply",
        editor:{
            view:"/App_Plugins/Reply/Reply.html"
        },
    }
]
,
javascript:[
    '/App_Plugins/Reply/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: 
           });
    }
});

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; }
 }
更新：添加解决方案文件夹结构的图片

首先，在使用Angular时，尽量避免使用jQuery

使用ng模型从角度将输入值绑定到控制器。并使用$http模块将数据发送到API

视图：

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:

<div ng-controller="Reply.controller">
    <input type="button" name="Send Reply"  ng-click="SendReply()"/>
</div>

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

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

{
propertyEditors: [
    {
        alias: "Send.Reply",
        name: "Send Reply",
        editor:{
            view:"/App_Plugins/Reply/Reply.html"
        },
    }
]
,
javascript:[
    '/App_Plugins/Reply/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: 
           });
    }
});

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; }
 }
ReplyToIncomingCallController.cs:

<div ng-controller="Reply.controller">
    <input type="button" name="Send Reply"  ng-click="SendReply()"/>
</div>

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

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

{
propertyEditors: [
    {
        alias: "Send.Reply",
        name: "Send Reply",
        editor:{
            view:"/App_Plugins/Reply/Reply.html"
        },
    }
]
,
javascript:[
    '/App_Plugins/Reply/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: 
           });
    }
});

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

<div ng-controller="Reply.controller">
    <input type="button" name="Send Reply"  ng-click="SendReply()"/>
</div>

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

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

{
propertyEditors: [
    {
        alias: "Send.Reply",
        name: "Send Reply",
        editor:{
            view:"/App_Plugins/Reply/Reply.html"
        },
    }
]
,
javascript:[
    '/App_Plugins/Reply/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: 
           });
    }
});

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; }
 }
文件的树结构：

<div ng-controller="Reply.controller">
    <input type="button" name="Send Reply"  ng-click="SendReply()"/>
</div>

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

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

{
propertyEditors: [
    {
        alias: "Send.Reply",
        name: "Send Reply",
        editor:{
            view:"/App_Plugins/Reply/Reply.html"
        },
    }
]
,
javascript:[
    '/App_Plugins/Reply/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: 
           });
    }
});

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中backoffice路由的更多信息，可以访问。

在下面的评论中，我根据您的指南编写了代码，但在Umbraco backoffice中出现了一个错误：请求错误：URL返回了404（未找到）：/IncomingCallSurface/Replyvar data={SendTo:SendTo，TextMessage:TextMessage}；$http.post（“/IncomingCallSurface/Reply”，data.），然后（函数（响应）{//TODO}）；是的，但是您需要设置URL的改进。我不确定，但是有了这个文档，您有两个选择-：1/umbraco/surface/IncomingCallSurface/Reply 2/umbraco/Reply/IncomingCallSurface/Reply请看我添加的图片。根据你的建议，我必须改变结构吗？这意味着将视图文件夹添加到回复文件夹，并将控制器添加到回复文件夹而不是控制器文件夹？您需要将其分解为简单的步骤。如果您以前从未编写过UmbracoApiController，请这样做。从简单开始。使用HttpGet而不是HttpPost创建测试方法。让它返回一些测试字符串（“Hello Word”）。直接在浏览器中调用它。当你开始工作时，文本会显示在你的浏览器中，然后写下你的角度代码从同一个URL检索。使用诸如Fiddler之类的工具检查URL调用是否正确。TLDR：确保您在URL上提供来自控制器的正确操作，并且这些URL由您的控制器调用。如果你不这样做，你会得到404。