Passing Javascript Parameters to [Webmethod] C#

Asked

Viewed 962 times

1

I would like to know how to pass parameters of a Javascript call to an ASMX Webservice Method without having to define a name for the parameters.

Example:

$scope.testar = () =>{
    filtros ={
        id:1,
        funcionalidade:02
    }
    $http.post("minhaUrl/meuMetodo",filtros)
    .success((retorno)=>{
        // 
    })
    .catch((retorno) =>{
        //
    });
}

Now take it like this on C#

[WebMethod]
public void meuMetodo(String[] params){
   int id = params[0];
   int funcionalidade = params[1];

   // 
}
javascript c# angularjs asp.net asmx

  • Dude, I don’t know Csharp, but... if you pass a JSON as a parameter it doesn’t solve your problem no more?

  • Good idea, I’ll try here.

  • @Felipesantos I made an example with Dictionary, check if this can be a solution to your expectation.

1 answer

0

If you’re passing one object which in this case is filtros just specify in the Framework the names and their respective types that the architecture take charge of loading the information and in the example below is with framework .

Minimal 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 back-end make the following code, minimal 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 that case not specifying 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

  • In the case of Virgil, I don’t want to specify the parameters in the method header in my backend, I want to use PHP style, like this: request->getParam("id"); request->getParam("functionality");

  • @Felipesantos does not deserialize arrays this way, must have a type! PHP is different from . NET!

  • @I watch if I use this public void method(String.. params){ }

  • @Felipesantos, the method of a Webservice is Static, it has no access by Request.Form, The way I work with this guy is the two ways I’ve explained it. Another point if now put a Java code, it is necessary not to identify the parameters, what the reason, if it is these two for example do not see why? try to explain the reasons please?

  • The point is that I want to avoid creating classes to pass parameters understand? in the case of your example (filters) I would have to create a class called Filters.

  • @Felipesantos I made two examples because the answers are made for community to enjoy in all forms, so use the first, strongly typed languages use types to program! understood? and do not compare one language with the others is wrong this thought, each one does its own way.

Show 1 more comment

Browser other questions tagged javascript c# angularjs asp.net asmx

You are not signed in. Login or sign up in order to post.