Sending data by using AngularJS to an action method of ASP.NET MVC 5 controller

Question

I've used Umbraco 7.3 and ASP.NET MVC 5 in my project.

I want to Send data from AngularJS to ASP.NET MVC 5 controller.

How can I do it?

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 controller:

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

Updated: add a picture of structure of solution folders

score 1 · Accepted Answer · answered Nov 13 '15 at 18:37

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

Tree Structure Of Files :

If you want to know more about backoffice-routing in Umbraco 7.x, you can visit this link.

Bartosz Czerwonka · Answer 2 · 2015-11-03T23:38:06.573

0

Firstly, when you use Angular try to avoid use jQuery.

Use ng-model from angular to bind input value to your controller. And use $http module to send data to API.

View:

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

edited Nov 03 '15 at 23:38

answered Nov 03 '15 at 22:21

Bartosz Czerwonka

1,631
1
10
11

In the below comment, I wrote my code based on your guide but I got an error in Umbraco backoffice that says: Request error: The URL returned a 404 (not found): /IncomingCallSurface/Reply – x19 Nov 03 '15 at 22:54
var data = { SendTo: sendTo, TextMessage: textMessage }; $http.post("/IncomingCallSurface/Reply", data) .then(function (response) { //TODO }); – x19 Nov 03 '15 at 22:55
1

Yes, but you need to set the improvement of the URL. I'm not sure, but with this document, you have two options - https://our.umbraco.org/documentation/reference/routing/surface-controllers: 1. /umbraco/surface/IncomingCallSurface/Reply 2. /umbraco/Reply/IncomingCallSurface/Reply – Bartosz Czerwonka Nov 03 '15 at 23:01
Please look at a picture that I added. According to your advise, Am I have to change the structure? It means add View folder nested the Reply folder and add Controller to Reply folder instead of Controllers folder? – x19 Nov 03 '15 at 23:28
Please see my changes, it can help you. - http://stackoverflow.com/posts/33510208/revisions . I hope that you will steer and help – Bartosz Czerwonka Nov 03 '15 at 23:40
Unfortunately, It wasn't useful for me. I need a real sample. The documentation in Umbraco site is awful! – x19 Nov 04 '15 at 02:01
1

You need to break this down into simple steps. If you've never written a UmbracoApiController before then do so. Start simple. Create test method using HttpGet rather than HttpPost. Make it return some test string ("Hello Word"). Call it in your browser directly. When you get that working + the text shows in your browser then write your Angular code to retrieve from that same URL. Use tools like Fiddler to check your URL call is right. TLDR: Ensure that you're serving the right actions from your controller on the URL's and that those URL's are called by your Angular. If you don't you get 404. – csharpforevermore Nov 09 '15 at 16:09

Sending data by using AngularJS to an action method of ASP.NET MVC 5 controller

2 Answers2

Linked