Q:

Url. Action has one object route value as null

I am trying to pass two parameters to a controller in order to return a list of roles for the current user in a particular application.  This list is then used for to autocomplete a search box.  
My issue arises because one of the object route variables is always null in my Url. Action helper.  The code is in a script on a partial view as follows:
<script type="text/javascript">
    function roleFilter(element) {
        element.kendoAutoComplete({
            dataSource: {
                transport: {
                    read: "@Url. Action("FilterMenuCustomization_Roles", new { userName = ViewBag. UserName, applicationName = ViewBag. ApplicationName })"
            }
        }
        });
    }
</script>

This part of the code is what is failing and giving a null value: 
applicationName = ViewBag. ApplicationName

I know the ViewBag contains the correct values but it is empty in this script but I can pass it in code elsewhere on the page.  if any one can help it would be very appreciated. 
Full Partial View:
@(Html. Kendo().Grid<BUUK.BSS.Models. Role>()
    .Name("grid")
    .DataSource(dataSource => dataSource // Configure the grid data source
        .Ajax() // Specify that ajax binding is used
        .Read(read => read. Action("CurrentUserRoles_Read", "User",
            new
            {
                userName = ViewBag. UserName,
                applicationName = ViewBag. ApplicationName
            })) // Set the action method which will return the data in JSON format
            .PageSize(15)
     )
    .Columns(columns =>
    {
        columns. Bound(role => role. RoleName)
            .Filterable(filterable => filterable. UI("roleFilter"));
    })
          .Pageable() // Enable paging
          .Sortable() // Enable sorting
              .Filterable(filterable => filterable
                .Extra(false)

                .Messages(m => m.Info("Items with value equal to:")
                )
            ).Events(e => e.FilterMenuInit("filterMenuInit"))
        )

<p style="margin-top:5px;">
    @Html. ActionLink("Add Roles", "EditRoles", "User", new { applicationName =     ViewBag. ApplicationName, userName = ViewBag. UserName }, null)
</p>

<script type="text/javascript">
    function roleFilter(element) {
        element.kendoAutoComplete({
             dataSource: {
                transport: {
                    read: "@Url. Action("FilterMenuCustomization_Roles", new { userName = ViewBag. UserName, applicationName = ViewBag. ApplicationName })"
            }
        }
        });
    }
</script>

The Controller:
 public ActionResult Roles(string userName, string applicationName, string status)
    {
        var model = new List<Role>();

        foreach (KeyValuePair<Application. Applications, IRole> entry in Application. RoleMap)
        {
            if (entry. Key. ToString() == applicationName)
            {
                IRole role = entry. Value;
                model = role. GetUserRoles(userName);
            }
        }

        ViewBag. ApplicationName = applicationName;
        ViewBag. UserName = userName;
        ViewBag. Status = status;

        return View(model);
    }

public ActionResult FilterMenuCustomization_Roles(string userName, string applicationName)
    {
        var model = new List<Role>();

        foreach (KeyValuePair<Application. Applications, IRole> entry in Application. RoleMap)
        {
            if (entry. Key. ToString() == applicationName)
            {
                IRole role = entry. Value;
                model = role. GetUserRoles(userName);
            }
        }
        return Json(model. Select(e => e.RoleName).Distinct(), JsonRequestBehavior. AllowGet);
    }

I am happy to supply any other information that is required, Thanks again for any help. 
EDIT
If I switch the order in which the parameters are written i.e.
read: "@Url. Action("FilterMenuCustomization_Roles", new { applicationName = ViewBag. ApplicationName, userName = ViewBag. UserName })"

instead of as above.  The applicationName passes correctly but the userName is null instead

A:

Have a look at the url that is created by 
 @Url. Action("FilterMenuCustomization_Roles", new { userName = ViewBag. UserName, applicationName = ViewBag. ApplicationName })

in your JavaScript.  It might be formatted incorrectly.  Try:
"@Html. Raw(Url. Action("FilterMenuCustomization_Roles", new { userName = ViewBag. UserName, applicationName = ViewBag. ApplicationName }))"

