String Parameter in AjaxOption null on Submit but showing in Response

Question

In this piece of code

@using (Ajax.BeginForm("MyAction", "MyRouteValues", new AjaxOptions { OnSuccess = "myJSFunction(" + Model.IntegerParameter + ", '" + Model.StringParameter + "')" }))

Why does my Javascript recognize Model.IntegerParameter correctly but Model.StringParameter as null? I am sure it has data on it as I check the response and it shows like this

data-ajax-success="myJSFunction(111111, 'AAAAAA')"

My View model is really simple and it looks like this

public class MyViewModel
{
    public int IntegerParameter { get; set; }
    public string StringParameter { get; set; }
}

How do I fix this?

Added Info

I tried changing the second parameter to int, now its not passing as null but 0 and still it shows in the response in FireBug.

I added the Html.Raw, but it still gets a null value in Javascript.

Here is a real world screenshot of what I get in the console response:

---------------Another Update------------------

I tried all the suggestions, but it seems to be a BUG in MVC s#arp? I tried in different projects and on different PC's it still happens for me. I noticed this only happens if its coming from a Model it looks like what happens in between the response to Javascript the value of string gets lost regardless whether its the first, second or any position in the parameter but if I use a hard coded value, such as:

myJSFunction(" + Model.IntegerParameter + ", 'AAAAAAAA')"

I get a successful result, also if I use jQuery like such :

myJSFunction(" + Model.IntegerParameter + ", $('#SearchString').val())"

This also works but if I do pass a Model that is a string like such

myJSFunction(" + Model.IntegerParameter + ", '" + Model.StringParameter + "')"

This does not work.

So is you want to see what really happens on real world where I taken account the suggestions of @Darin and @Shark. Here is a screenshot:

As you see in the response, it is there but when passed to Javascript, it gets lost. Here is the real life Javascript as well

displayResultsPopUpWindow: function (model) {
    var postData = {
        transactionId: model.transactionId,
        searchString: model.searchString
    };

    $.post("/Invoicing/GetSearchResults", postData, function (data) {
        WindowHelper.displayWindow("Add Airline Transaction", "<div id='matchBookingResults'>" + unescape(data.viewHtml) + "</div>", 640, 500);
    });
},

Answer 1

Unable to reproduce the issue. Try like this:

Model:

public class MyViewModel
{
    public int IntegerParameter { get; set; }
    public string StringParameter { get; set; }
}

Controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new MyViewModel
        {
            IntegerParameter = 1111,
            StringParameter = "AA'AA\"AA"
        });
    }

    [HttpPost]
    public ActionResult MyAction()
    {
        return Json(new { foo = "bar" });
    }
}

View:

@model MyViewModel

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script type="text/javascript">
    var myJSFunction = function (model) {
        alert('intParam=' + model.intParam + ', strParam=' + model.strParam);
    };
</script>

@using (Ajax.BeginForm(
    "MyAction",
    "Home",
    new AjaxOptions
    {
        OnSuccess = "myJSFunction(" + Json.Encode(new { intParam = Model.IntegerParameter, strParam = Model.StringParameter }) + ")"
    }
))
{
    <button type="submit">OK</button>
}

When the form is submitted using AJAX, the myJSFunction success callback is invoked and passed the correct values.