Hi, I have a custom section with my custom tree and relative actions. In my view I have a table and a form to filter table results.

This is the form inside the view (myview.html):

<form id="filterForm" ng-submit="vm.filterTable()" role="form" class="form-inline">
    <div>
        <label for="search" class="sr-only">Search:</label>
        <div class="input-group" style="float: left; margin-right: 10px;">
            <div class="input-group-addon">
                <span class="glyphicon glyphicon-search"></span>
            </div>
            <input type="text" ng-model="vm.q" id="search" class="form-control" style="-webkit-border-top-right-radius: 4px !important; -webkit-border-bottom-right-radius: 4px !important; -moz-border-radius-topright: 4px !important; -moz-border-radius-bottomright: 4px !important; border-top-right-radius: 4px !important; border-bottom-right-radius: 4px !important; width: 300px; height: 32px !important;"/>
        </div>
        <div class="form-group">
            <label for="itemsPerPage" style="vertical-align: bottom;">Items per page:</label>
            <select ng-model="vm.tracelogs.itemsPerPage" id="itemsPerPage" class="form-control" style="-webkit-border-top-right-radius: 4px !important; -webkit-border-bottom-right-radius: 4px !important; -moz-border-radius-topright: 4px !important; -moz-border-radius-bottomright: 4px !important; border-radius: 4px !important; height: 32px !important;">
                <option value="10">10</option>
                <option value="50">50</option>
                <option value="100">100</option>
                <option value="100">300</option>
                <option value="100">500</option>
                <option value="100">1000</option>
            </select>
        </div>
        <div class="form-group">
            <button type="submit" id="btnFilter" name="btnFilter" class="btn btn-danger">Filter</button>
        </div>
    </div>
</form>

This is the code to call the action to filter table data (mycontroller.js):

myResource.filterData(vm.id, vm.q, vm.itemsPerPage, vm.pageNumber).then(function (response) {
    vm.dataItems = response.data.ListData;
}, function (response) {
    console.log(response);
    notificationsService.error("Error", "Could not load log data.");
});

This is my resource file (myresource.js):

// #############################
// # DATA RESOURCES (Data API) #
// #############################
// Get Data
getData: function (id, itemsPerPage, pageNumber) {
    return $http.get('MyPlugin/MyDataApi/GetData', { params: { id: id, itemsPerPage: itemsPerPage, pageNumber: pageNumber } });
},
// Get Filtered Data
filterData: function (id, search, itemsPerPage, pageNumber) {
    return $http({
    method: 'POST',
    url: 'MyPlugin/MyDataApi/PostFilterData',
    data: { id: id, search: search, itemsPerPage: itemsPerPage, pageNumber: pageNumber }
    });
}

And my custom controller (dataAPIController.cs):

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text.RegularExpressions;
using System.Web.Mvc;
using Umbraco.Core.Cache;
using Umbraco.Core.Logging;
using Umbraco.Core.Models;
using Umbraco.Core.Persistence;
using Umbraco.Web.Mvc;
using Umbraco.Web.WebApi;

namespace My.Controllers
{
    [PluginController("MyPlugin")]
    public class MyDataApiController : UmbracoApiController
    {
        [HttpGet]
        public MyDataModel GetData(string id, int itemsPerPage = 10, int pageNumber = 1)
        {
            // my code
        }

        [HttpPost]
        public MyDataModel PostFilterData(string id, string search, string itemsPerPage, string pageNumber)
        {
            // my code
        }
    }
}

The "GetData" action function properly, but with the "PostFilterData" action I receive this message:

Request error: The URL returned a 404 (not found): 
MyPlugin/MyDataApi/PostFilterData
with data: 
{"id":"1","search":"service","itemsPerPage":10,"pageNumber":"1"}
Contact your administrator for information.

What am I doing wrong?

Thank you for the support

A.