Url.Action in jquery ajax: Second parameter not passed

Question

I am trying to pass two parameters in an Url.Action function with jQuery ajax, and only the first parameter is passed. Both parameters show up correctly in the ajax function when I debug. The values passed in data are passed correctly.

What am I doing wrong?

Here is the code from the view:

<script type="text/javascript">

    $(function () {
        $("#sendForm").click(function () {
            //they both show correctly in the console
            console.log('@ViewData["recordURL"]');
            console.log('@ViewData["title"]');
            $.ajax({
                url: '@Url.Action("SendEmail", "Search", new { title = ViewData["title"], recordURL = ViewData["recordURL"] })',
                type: "POST",
                data: {
                    //placed these here so don't have to intersperse javascript with razor code in Url.Action
                    recepient: $("#recepient").val(),
                    message: $("#message").val()
                },
                success: function (result) {
                    $(".emailForm").hide();
                    $(".results").text(result);

                    window.setTimeout(closeEmailPopup, 3500);
                }
            });
        });
    });
</script>

And from the controller:

[HttpPost]
public virtual ActionResult SendEmail(string title, string recordURL, string recepient, string message = "")
{
    // title is correct value, recordURL is null. 
    // If I switch the order in the URL.Action in the View,
    // then recordURL has correct value, and title is null 


    //recepient and message have correct value
}

Answer 1

I guess the problem is with your final URL string. Try wrapping it in Html.Raw to prevent escaping & symbols:

...
url: '@Html.Raw(Url.Action("SendEmail", "Search", new { title = ViewData["title"], recordURL = ViewData["recordURL"] }))',
...

Taken from this answer.