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.

Answer 2

Why not use your ajax success callback function?

[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 strnum3;
    }

    return string.Empty;

}

$.ajax({
    url: "/Controller/TestAjax/",
    type: "POST",
    data: /* form data here */,
    success: SuccessCallback,
    error: FailureCallback
});

function SuccessCallback(data) {
   alert(data);
}

Answer 3

Try this,

[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);
        if (strnum3 != null)
        {
            return "<script>alert("some message")</script>";
        }

           return JavaScript("JSFunction(paramtr);");    
    }

View:-

function JSFunction(paramtr)
{

}