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; }
          }
    
          [Route("api/[controller]/[action]")]
          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
    
    <Route("api/[controller]/[action]")>
    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)
                })
                Next
    
                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';
    
    @Component({
       selector: 'main',
       templateUrl: './main.component.html'
    })
    export class MainComponent extends MainGenerated {
       constructor(injector: Injector, private http: HttpClient) {
          super(injector);
       }
    
       getData(type: string) {
          // Extract the server URL
          const url = environment.sample.replace(/odata.*/, '');
    
          this.http
             // 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
                this.data = data;
             });
       }
    }
    
  5. Run the application and change types from the DrownDown component:

Get Radzen

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