Calling method from javascript in MVC

Question

I want to call a controller method from Javascript. I used the following code:

<input type="submit" name="button" value="Run" onclick="RunEXE"/>

I want to write the javascript to call the below function in controller.

public void Run(UserProgram userProgram)
    {
        SaveAndCompile(userProgram);
    }

Can anyone provide me the javascript to call the function.

Answer 1

You can use Ajax here. jQuery ajax is very flexible and easy

Then

prepare your data to post

var myData={};// this is similar to your C# class UserProgram structure
myData.property1=value1; //etc

jQuery.ajax{( 
url: '/controllerName/Run/', // or '@Url.Action("Run", "ControllerName")'
type: 'post',
data:{userProgram:myData},
success: function (data) { jQuery('#container').html(data); }
)};

or shorthand

 $.post('/controllerName/Run/',{userProgram:myData}, function(result){});

Answer 2

Try this using JQuery:

function RunEXE() {
   $.post('@Url.Action("Run", "ControllerName")',
      {
         userProgram: "WhatEver" //The parameter you want to pass to your action
      },
      function (data) {
         //Code for what to do with the result.
      })
};

Answer 3

You can't just call a function like that. What you need to understand is that javascript runs on the client, and your function is on the server. What you need to do is make a request to the server, just like you would when loading a page, so for this you need an Action (make sure it is a POST action as we will be "posting" the request). This action can be as short as just calling the function you need:

[HttpPost]
public ActionResult RunAction(string option1)
{
    //if needed, you can use the "option1" value to determine the UserProgram to pass
    UserProgram userProgram = new UserProgram();
    Run(userProgram);

    //you can return a JSON reuslt that you can evaluate back at the client
    return Json(new { @Success = true, @MyString = "a string" });
}

Then you want to use ajax to call the function from the client (javascript), for this I would recommend JQuery as it makes things much easier using post :

$.post('@Url.Action("RunAction", "MyController")',
      {
         option1: "some optional value"
      },
      function (data) {
          alert("success!");
          //here you have access to your JSON result via data, for example:
          //data.Success = true
          //data.MyString = "a string"
      }
);

Answer 4

Use the Normal AJAX method as::

On the Server side(ie In Controller) you are using some class/Model like 'UserProgram'

I don't know what are the Properties in that class but I have assumed it as::

   public class UserProgram
    {
         public long   ID{get;set}
         public string Name{get;set}
    }

this Model fields should be based on your Model that you have to pass into your AJAX code as::

var myData={ID:1,Name:"RJ"};

    $.ajax{( 
        type: 'post',
        url: '/controllerName/Run'
        data:{UserProgram:myData},
        success: function (data) {
                                  $('#container').empty();
                                  $('#container').html(data); 
                                  }
        )};

Answer 5

To get the full description on using ajax calls in ASP.net MVC using jQuery please refer to:

http://bobcravens.com/2009/11/ajax-calls-to-asp-net-mvc-action-methods-using-jquery/