Question

I have a simple yet really annoying problem. I have an ASP.NET MVC3 application with Razor as view engine.

I have two scripts that I call from a partial view that work good if I put the whole code in the _layout page. If I put the scripts in external files and reference them, they do not work. How can it be? I already checked basic issues such as file location and syntax of the script tag.

Here is the JavaScript code:

$(document).ready(function () {
$('#Year').change(function () {
    var selectedYear = $(this).val();
    if (selectedYear != null && selectedYear != '') {
        $.getJSON('@Url.Action("Months", "Home")', { year: selectedYear }, function (months) {
            var monthsSelect = $('#Month');
            monthsSelect.empty();
            $.each(months, function (index, month) {
                monthsSelect.append($('<option/>', {
                    value: month.value,
                    text: month.text
                }));
            });
        });
    }
}).change();

});

And here the reference in the _Layout file:

<script src="../../Scripts/CascadeDropDownList.js" type="text/javascript"></script>

This is the action method giving back the Json result to the view:

public ActionResult Months(int year)
    {
        if (year == DateTime.Now.Year)
        {
            return Json(
                Enumerable.Range(1, (DateTime.Now.Month -1)).Select(m => new 
                {
                    value = m,
                    text = CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(m)
                }),
                JsonRequestBehavior.AllowGet
            );
        }
        return Json(
            Enumerable.Range(1, 12).Select(m => new 
            {
                value = m,
                text = CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(m) 
            }),
            JsonRequestBehavior.AllowGet
        );
    }

Stack:

[ArgumentException: Illegal characters in path.]
   System.IO.Path.CheckInvalidPathChars(String path) +126
   System.IO.Path.Combine(String path1, String path2) +38
   System.Web.Configuration.UserMapPath.GetPhysicalPathForPath(String path, VirtualDirectoryMapping mapping) +114
   System.Web.Configuration.UserMapPath.GetPathConfigFilename(String siteID, VirtualPath path, String& directory, String& baseName) +82
   System.Web.Configuration.UserMapPath.MapPath(String siteID, String path) +58
   System.Web.Hosting.HostingEnvironment.MapPathActual(VirtualPath virtualPath, Boolean permitNull) +301
   System.Web.Hosting.HostingEnvironment.MapPathInternal(VirtualPath virtualPath, Boolean permitNull) +51
   System.Web.CachedPathData.GetPhysicalPath(VirtualPath virtualPath) +39
   System.Web.CachedPathData.GetConfigPathData(String configPath) +704
   System.Web.CachedPathData.GetVirtualPathData(VirtualPath virtualPath, Boolean permitPathsOutsideApp) +110
   System.Web.HttpContext.GetFilePathData() +36
   System.Web.HttpContext.GetConfigurationPathData() +26
   System.Web.Configuration.RuntimeConfig.GetConfig(HttpContext context) +43
   System.Web.Configuration.CustomErrorsSection.GetSettings(HttpContext context, Boolean canThrow) +41
   System.Web.HttpResponse.ReportRuntimeError(Exception e, Boolean canThrow, Boolean localExecute) +101
   System.Web.HttpRuntime.FinishRequest(HttpWorkerRequest wr, HttpContext context, Exception e) +397
</pre></code>

Thanks in advance

Answer 1

Problem is that JS files are not handled by the razor parser, so THIS CODE IS RENDERED ON CLIENT, EXACTLY THIS ONE

$(document).ready(function () {
$('#Year').change(function () {
    var selectedYear = $(this).val();
    if (selectedYear != null && selectedYear != '') {
        $.getJSON('@Url.Action("Months", "Home")', { year: selectedYear }, function (months) {
            var monthsSelect = $('#Month');
            monthsSelect.empty();
            $.each(months, function (index, month) {
                monthsSelect.append($('<option/>', {
                    value: month.value,
                    text: month.text
                }));
            });
        });
    }
}).change();

Note, the request url is EXACTLY SAME ON CLIENT SIDE

@Url.Action(“Months”, “Home”)

it is NOT transformed to real URL, because JS files are not handled by razor parser. Or, any other parser in fact. This’s why, external file donesn’t work. If you put it in razor view, the @Url.Action is processed by razor and it produces valid link on client side