In this article I will explain with an example, how to call JavaScript function from handler in ASP.Net Core Razor Pages.
The handler method operates from Server-Side while the JavaScript function is present in the Razor page (Client-Side), and hence in order to call it, the ViewData object is used to render the script in Razor page.
Note: For beginners in ASP.Net Core (.Net Core 7) Razor Pages, please refer my article ASP.Net Core 7 Razor Pages: Hello World Tutorial with Sample Program example.
 
 

Razor Page (HTML)

HTML Markup

Inside the Razor Page, the ASP.Net TagHelpers is inherited.
The HTML of Razor Page consists of an HTML INPUT TextBox and a Submit Button.
The Submit button has been set with the POST Handler method using the asp-page-handler attribute.
Note: In the Razor PageModel, the Handler method name is OnPostSubmit but here it will be specified as Submit when calling from the Razor HTML Page.
 

Submitting the Form

When Submit button is clicked, the ViewData object is returned from the PageModel (Server Side) and then the contents of the ViewData object is rendered using the Html.Raw Helper Method inside the Script Tag.
Note: The Html.Raw Helper method is used to render the contents without any HTML Encoding, for more details on Html.Raw Helper Method, please refer Using Html.Raw Helper Method in ASP.Net MVC.
 
Then, based on the function script is returned from the PageModel, the respective function is called.

ShowGreetings

The ShowGreetings JavaScript function accepts TextBox value as parameter which finally displayed in JavaScript Alert Message Box.
 

ShowServerDateTime

The ShowServerDateTime JavaScript function accepts DateTime string as parameter which finally displayed in JavaScript Alert Message Box.
@page
@model Call_JS_Function_Controller_Core_Razor.Pages.IndexModel
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <form method="post">
        <input type="text" id="txtName" name="name" />
        <input type="submit" id="btnSubmit" value="Submit" asp-page-handler="Submit" />
    </form>
    <script type="text/javascript">
        function ShowGreetings(name) {
            alert("Name: " + name);
        };
        function ShowServerDateTime(dt) {
            alert("Server Time: " + dt);
        };
    </script>
    @if (ViewData["JavaScriptFunction"] != null)
    {
        <script type="text/javascript">
            @Html.Raw(ViewData["JavaScriptFunction"])
        </script>
    }
</body>
</html>
 
 

Razor PageModel (Code-Behind)

The PageModel consists of following Handler method.

Handler method for handling GET operation

This Handler method is left empty as it is not required.
 

Handler method for handling POST operation

This Handler method handles the Form submission and it accepts the value of the INPUT TextBox as parameter.
Note: The name of the parameter must be same as the value of name attribute specified for the Form element.
 
The accepted parameter is checked for empty or NULL, if found NULL or empty then the TextBox value is passed as parameter to ShowGreetings JavaScript function (discussed earlier) using the string.Format function and set into a ViewData object.
And if found empty or NULL, then Current DateTime is passed as parameter to ShowServerDateTime JavaScript function (discussed earlier) using the string.Format function and set into a ViewData object.
public class IndexModel : PageModel
{
    public void OnGet()
    {
    }
 
    public void OnPostSubmit(string name)
    {
        if (!string.IsNullOrEmpty(name))
        {
            ViewData["JavaScriptFunction"] = string.Format("ShowGreetings('{0}');", name);
        }
        else
        {
            ViewData["JavaScriptFunction"] = string.Format("ShowServerDateTime('{0}');", DateTime.Now.ToString());
        }
    }
}
 
 

Screenshots

ShowGreetings and ShowServerDateTime JavaScript functions being called

Call JavaScript function in ASP.Net Core Razor Pages
 

Rendered script of ShowGreetings JavaScript function

Call JavaScript function in ASP.Net Core Razor Pages
 

Rendered script of ShowServerDateTime JavaScript function

Call JavaScript function in ASP.Net Core Razor Pages
 
 

Downloads

Download Code