If you are passing a object that in this case is
filtros you just specify in the parent the names and their respective types that the architecture is in charge of loading the information and the example below is
angularjs .
Minimum example:
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="WebFormTest.aspx.cs"
Inherits="WebApplication2.WebFormTest" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Scripts/angular.min.js"></script>
</head>
<body ng-app="app" ng-controller="ctrl">
<form id="form1" runat="server">
<div>
{{quantidade}}
<button ng-click="btnEnviar()" type="button">Enviar</button>
</div>
</form>
<script>
var app = angular.module('app', [])
.controller('ctrl', function ($scope, $http) {
$scope.quantidade = 0;
$scope.btnEnviar = function () {
filtros = {
id: 1,
funcionalidade: '02'
}
$http.post("/WebFormTest.aspx/Receive", filtros)
.then(function successCallback(response) {
$scope.quantidade = response.data.d;
console.log(response);
}, function errorCallback(response) {
});
}
});
</script>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApplication2
{
public partial class WebFormTest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod()]
public static string Receive(string id, string funcionalidade)
{
return $"{id} {funcionalidade}";
}
}
}
If you still want to work with a class in the back-end , make the following code, minimum example :
public class filtros
{
public string id { get; set; }
public string funcionalidade { get; set; }
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Scripts/angular.min.js"></script>
</head>
<body ng-app="app" ng-controller="ctrl">
<form id="form1" runat="server">
<div>
{{quantidade}}
<button ng-click="btnEnviar()" type="button">Enviar</button>
</div>
</form>
<script>
var app = angular.module('app', [])
.controller('ctrl', function ($scope, $http) {
$scope.quantidade = 0;
$scope.btnEnviar = function () {
filtros = {
'filtros': {
id: '1',
funcionalidade: '02'
}
};
$http.post("/WebFormTest.aspx/Receive", filtros)
.then(function successCallback(response) {
$scope.quantidade = response.data.d;
console.log(response);
}, function errorCallback(response) {
});
}
});
</script>
</body>
</html>
[WebMethod()]
public static string Receive(filtros filtros)
{
return $"{filtros.id} { filtros.funcionalidade}";
}
another tip is with a dictionary, example Dictionary<string, string> filtros , in this case not needing the inclusion of a new class:
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="WebFormTest.aspx.cs"
Inherits="WebApplication2.WebFormTest" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Scripts/angular.min.js"></script>
</head>
<body ng-app="app" ng-controller="ctrl">
<form id="form1" runat="server">
<div>
{{quantidade}}
<button ng-click="btnEnviar()" type="button">Enviar</button>
</div>
</form>
<script>
var app = angular.module('app', [])
.controller('ctrl', function ($scope, $http) {
$scope.quantidade = 0;
$scope.btnEnviar = function () {
filtros = {
'filtros': {
id: '1',
funcionalidade: '02'
}
};
$http.post("/WebFormTest.aspx/Receive", filtros)
.then(function successCallback(response) {
$scope.quantidade = response.data.d;
console.log(response);
}, function errorCallback(response) {
});
}
});
</script>
</body>
</html>
[WebMethod()]
public static string Receive(Dictionary<string, string> filtros)
{
var v1 = filtros["id"];
var v2 = filtros["funcionalidade"];
return $"{v1} {v2}";
}
References
