Invoke custom server-side method

Invoke custom server-side method

This help article shows how to create custom server-side controller and invoke custom method.

  1. Create new application with single Main page and add Sample Microsoft SQL Server data-source:

  2. Create types and data properties on Page load event. Bind DropDown component to types and DataGrid component to data with single column bound to name property:

  3. Add new change event handler for the DropDown component to execute the following code (<any>this).getData(event.text);:

  4. Run and stop the application in order to generate server and client projects. Add new CustomMethodController.cs to server\Controllers\Sample folder with the following code:

    using System.Collections.Generic;
    using Microsoft.AspNetCore.Mvc;
    using Sample.Data;
    namespace Sample.Controllers
          public class MyObject
                public string Name { get; set; }
          public class CustomMethodController : Controller
                private SampleContext context;
                public CustomMethodController(SampleContext context)
                      this.context = context;
                public IActionResult GetData(string type)
                      var list = new List<MyObject>();
                      for (var i = 0; i < 10; i++)
                            list.Add(new MyObject() { Name = string.Format("{0}{1}", type, i) });
                      return Json(list);
    Imports System.Collections.Generic
    Imports Microsoft.AspNetCore.Mvc
    Imports Sample.Data
    Namespace Sample.Controllers
    Public Class MyObject
          Public Property Name As String
    End Class
    Public Class CustomMethodController
          Inherits Controller
          Private context As SampleContext
          Public Sub New(ByVal context As SampleContext)
                Me.context = context
          End Sub
          Public Function GetData(ByVal type As String) As IActionResult
                Dim list = New List(Of MyObject)()
                For i = 0 To 10 - 1
                list.Add(New MyObject() With {
                      .Name = String.Format("{0}{1}", type, i)
                Return Json(list)
          End Function
    End Class
    End Namespace

    and add new getData() method in main.component.ts file in the client\src\app\main folder:

    import { Component, Injector } from '@angular/core';
    import { MainGenerated } from './main-generated.component';
    // Import HttpClient and HttpParams which are needed to make HTTP calls.
    import {HttpClient, HttpParams} from '@angular/common/http';
    // Import the environment to get the server URL
    import {environment} from '../../environments/environment';
       selector: 'main',
       templateUrl: './main.component.html'
    export class MainComponent extends MainGenerated {
       constructor(injector: Injector, private http: HttpClient) {
       getData(type: string) {
          // Extract the server URL
          const url = environment.sample.replace(/odata.*/, '');
             // Request the GetData action method
             .get(`${url}api/custommethod/getdata`, {
                // Pass the type parameter
                params: new HttpParams().set('type', type)
             .subscribe(data => {
                // Set the data page property to the server response
       = data;
  5. Run the application and change types from the DrownDown component:

Get Radzen

Sign-up to download the free 30-day Radzen trial.