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

    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.