In this article I will explain with an example, how to Call JavaScript Function from Controller in ASP.Net MVC Razor.
There is no direct way to call JavaScript function from Controller as Controller is on Server side while View is on Client side and once the View is rendered in Browser, there is no communication between them.
Hence the only possible way is to use the ViewBag object and pass the script to call a particular JavaScript function from Controller to View.
Note: For beginners in ASP.Net MVC, please refer my article ASP.Net MVC Hello World Tutorial with Sample Program example.
 
 
Controller
The Controller consists of two Action methods.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
 
Action method for handling POST operation
This Action method handles the Form submission and it accepts the value of the Form element as parameter.
Note: The name of the parameter must be same as the value of name attribute specified for the Form element.
 
The name value fetched from the Form collection and if the value of name parameter is not blank (empty) then the ShowGreetings JavaScript function’s script is set in the ViewBag object.
And if the value of name parameter is blank (empty), then the ShowServerDateTime JavaScript function’s script is set in the ViewBag object.
This script present in the ViewBag object will be rendered in the View and will call the respective function once the View is loaded in the client’s Browser.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    public ActionResult Index(string name)
    {
        if (!string.IsNullOrEmpty(name))
        {
            ViewBag.JavaScriptFunction = string.Format("ShowGreetings('{0}');", name);
        }
        else
        {
            ViewBag.JavaScriptFunction = string.Format("ShowServerDateTime('{0}');", DateTime.Now.ToString());
        }
        return View();
    }
}
 
 
View
The View consists of an HTML Form which has been created using the Html.BeginForm method with the following parameters.
ActionName – Name of the Action. In this case the name is Index.
ControllerName – Name of the Controller. In this case the name is Home.
FormMethod – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
The Form consists of two elements i.e. a TextBox and a Submit Button.
There are two JavaScript functions ShowGreetings and ShowServerDateTime which display the data received from the Controller in JavaScript Alert Message Box.
The functions are called later using the Html.Raw function which renders the ViewBag object inside the Script Tag.
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
        <input type="text" id="txtName" name="name"/>
        <input type="submit" id="btnSubmit" value="Submit"/>
    }
    <script type="text/javascript">
        function ShowGreetings(name) {
            alert("Name: " + name);
        };
        function ShowServerDateTime(dt) {
            alert("Server Time: " + dt);
        };
    </script>
    @if (ViewBag.JavaScriptFunction != null)
    {
        <script type="text/javascript">
            @Html.Raw(ViewBag.JavaScriptFunction)
        </script>
    }
</body>
</html>
 
 
Screenshot
ShowGreetings and ShowServerDateTime JavaScript functions being called
Call JavaScript Function from Controller in ASP.Net MVC
 
Rendered calling script of ShowGreetings JavaScript function
Call JavaScript Function from Controller in ASP.Net MVC
 
Rendered calling script of ShowServerDateTime JavaScript function
Call JavaScript Function from Controller in ASP.Net MVC
 
 
Downloads
Download Code