asp.net mvc - Can I return javascript from MVC controller to View via Ajax request?

Question

I am trying to do like this in ASP.net MVC 2.0 Application. I have a form with two fields number1 and number2.

I want add two these two numbers using an ajax request. In the controller, I am recieving two numbers ,adding them and storing result in another string. Then, I am doing like this:

    [HttpPost]
    public string TestAjax(FormCollection form)
    {
        int strnum1 = Convert.ToInt32(form["txtbox1"].ToString());
        int strnum2 = Convert.ToInt32(form["txtbox2"].ToString());
        string strnum3 = Convert.ToString(strnum1 + strnum2);
        if (strnum3 != null)
        {
            return "<script>alert("some message")</script>";
        }

        return string.Empty;

    }

Is it possible to return java script in the form of string from controller actions?

Answer 1

Is it possible to return java script in the form of string from controller actions

You could return a JavaScriptResult:

[HttpPost]
public ActionResult TestAjax(FormCollection form)
{
    int strnum1 = Convert.ToInt32(form["txtbox1"].ToString());
    int strnum2 = Convert.ToInt32(form["txtbox2"].ToString());
    return JavaScript("<script>alert("some message")</script>");
}

For this to work you have to configure your AJAX request to execute javascript. For example if you are using jQuery that would look like this:

$.ajax({
    url: '/someaction',
    type: 'POST',
    data: { txtbox1: '12', txtbox2: '13' },
    dataType: 'script'
});

As an alternative you could return a JsonResult which will serialize the model to a JSON string:

[HttpPost]
public ActionResult TestAjax(FormCollection form)
{
    int strnum1 = Convert.ToInt32(form["txtbox1"].ToString());
    int strnum2 = Convert.ToInt32(form["txtbox2"].ToString());
    string strnum3 = Convert.ToString(strnum1 + strnum2);
    return Json(new { sum = strnum3 });
}

and then:

$.ajax({
    url: '/someaction',
    type: 'POST',
    data: { txtbox1: '12', txtbox2: '13' },
    success: function(result) {
        alert(result.sum);
    }
});

As you can see here you are no longer mixing javascript with C# code in your controller. Respect the DRY principle. javascript belongs in javascript files.

As further improvement to this controller action I would recommend you introducing a view model and get rid of the terrible plumbing code of parsing stuff from the FormCollection. That's the responsibility of the default model binder.

So:

public class SumViewModel
{
    public int TxtBox1 { get; set; }
    public int TxtBox2 { get; set; }
}

and then:

[HttpPost]
public ActionResult TestAjax(SumViewModel model)
{
    int sum = model.TxtBox1 + model.TxtBox2;
    return Json(new { sum = sum });
}

Conclusion: we have put this controller action on a diet, and moved the javascript where it belongs.