Invoke custom server-side methodlink

Radzen has now built-in support for custom methods. Check the Invoke custom method article instead.

This help article shows how to create custom server-side controller and invoke one of its methods. This approach allows you to consume custom business logic in Radzen applications.

Source Code

1. Create new application with single MainPage 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 return (<any>this).getData(event.text);. This will invoke the custom action method via HTTP request.

   

4. Add a Then event handler which sets the data properto to result. This will update the value of the data property with the result of the custom action method.

   

5. 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;
   
   namespace Sample.Controllers
   {
         public class MyObject
         {
               public string Name { get; set; }
         }
   
         [Route("api/[controller]/[action]")]
         public class CustomMethodController : Controller
         {
               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
   
   Namespace Sample.Controllers
   Public Class MyObject
         Public Property Name As String
   End Class
   
   <Route("api/[controller]/[action]")>
   Public Class CustomMethodController
         Inherits Controller
   
         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 { MainPageGenerated } from './main-page-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-page',
            templateUrl: './main-page.component.html'
      })
      export class MainPageComponent extends MainPageGenerated {
            constructor(injector: Injector, private http: HttpClient) {
                  super(injector);
            }
   
            getData(type: string) {
                  // Extract the server URL
                  const url = environment.sample.replace(/odata.*/, '');
   
                  return this.http
                        // Request the GetData action method
                        .get(`${url}api/custommethod/getdata`, {
                        // Pass the type parameter
                        params: new HttpParams().set('type', type)
                        })
                        .toPromise();
            }
      }
   

6. Run the application and change types from the DrownDown component: