In this article I will explain with an example, how to call JavaScript function from Controller in ASP.Net MVC.
Calling JavaScript function from Controller is not possible as Controller is on Server-Side (Code-Behind) while View is on Client-Side and once the View is rendered in Browser.
Thus ViewBag is used to render the script in View to call a particular JavaScript function from Controller.
Note: For beginners in ASP.Net MVC, please refer my article ASP.Net MVC Hello World Tutorial with Sample Program example.
 
 

View

HTML Markup

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 an HTML INPUT TextBox and a Submit Button.
 

Submitting the Form

When Submit button is clicked, the ViewBag object is returned from the Controller and then the contents of the ViewBag 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 Controller, 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.
@{
    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>
 
 

Controller

The Controller consists of following 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 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 ViewBag object.
And if found empty or NULL, then the Current DateTime is passed as parameter to ShowServerDateTime JavaScript function (discussed earlier) using the string.Format function and set into a ViewBag object.
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();
    }
}
 
 

Screenshots

ShowGreetings and ShowServerDateTime JavaScript functions being called

Call JavaScript function from Controller in ASP.Net MVC
 

Rendered script of ShowGreetings JavaScript function

Call JavaScript function from Controller in ASP.Net MVC
 

Rendered script of ShowServerDateTime JavaScript function

Call JavaScript function from Controller in ASP.Net MVC
 
 

Downloads

Download Code