First time AJAX, examples not working for me

Question

I was trying to call a c# class method, using a HTML button. In another topic people advised me to use AJAX. I've looked at different tutorials and tried implementing it but sofar its just not working for me.

For now i just want the button to give me a pop-up (just so I know the method is being called) the method i want to call is setLang(string lang) from the class HomeController

this is how i have my onclick event

<input type="submit" onclick="setLanguage();" value="submit">

and this is the script part, i have this in same page

<script type="text/javascript">
function setLanguage() {
var lang = "en";
$.post('@Url.Action("setLang","HomeController")/' + lang,function(){
//i'm not expecting a result to process
});
}
</script>

but nothing happens when i click my button.

am i missing something here?

edit: the function is getting called, but the callback isnt

UPDATE: still not working, this is my current code (by request)

button (index.aspx)

<input type="button" onclick="setLanguage();" value="submit">

function (index.aspx)

<script type="text/javascript">
function setLanguage() { 
alert("this message shows");       
    $.post('Url.Action("setLang","Home")/?lang=' + lang,
        function (data) {
            alert("this message does not");
        });
 }
</script>

in HomeController.cs

   public JsonResult setLang(string lang)
    {       
        Thread.CurrentThread.CurrentUICulture = CultureInfo.GetCultureInfo(lang);
        .....//a lot more code, until it reaches
        return Json("Language: " + lang);
    }

Answer 1

Since you are calling the action method via POST Http type, Make sure that your Action method is also ready to respond HTTPPostType request. You may need to add the HttpPost annotation to your action method.

[HttpPost]
public ActionResult setLang(string id)
{
  return Content("MVC is awesome");
}

To handle a response from the action method, use the call back method with an argument. In the below example, you will get the response from the action method in the variable data.

<input type="submit" value="submit">
<script type="text/javascript">
 $(function(){

   $("form").submit(function(e){

    e.preventDefault();  // preventing the default form submit behaviour
       var lang="en"
       $.post("@Url.Action("setLang","Home")/" + lang,function(data){
           alert(data);
       });

   });

 });
</script>

Answer 2

Add the following to your Index view of the HomeController:

<input type="button" onclick="setLanguage();" value="submit">

<script type="text/javascript">
    function setLanguage() {
        var lang = "en";
        $.post('@Url.Action("setLang","Home")/?lang=' + lang,
            function (data) {
                alert(data);
        });
    }
</script>

I've changed a couple of things compared to your code:

• input type = button
• The controller name should be 'Home', not 'HomeController'. ASP.NET MVC adds the 'controller' part by default
• Your success functions takes a data parameter and executes a javascript alert on the client machine.
• Because you have no routes setup for this specific method, I've changed the lang parameter to be a part of your query string.

Then on the server add the following action method to your HomeController

public JsonResult setLang(string lang)
{
    return Json("Language: " + lang);
}

The function takes your lang parameter and then returns a JsonResult with only a simple string value. Json is the preferred way of sending data between a browser and the server.

You can expand this example and return more complex data to your browser.