404.15 not found MVC4 RazorJS

Question

I'm using RazorJS in my MVC4 application for using the Razor syntax "@" in the Js file.

//Code:

@Html.RazorJSInclude("~/Scripts/Application/Transactions.js")
<button id="btnSearch" name="submit" type="button" onclick="Loadgrid();">Search</button>

The "Transaction.js" has "LoadGrid" mehtod inside. When i use my Transaction.js as the above code it throws me error as "No such method(Loadgrid) is found".

The rendered HTML in the browser shows like,

<SCRIPT src="/razorjs.axd?fn=/Scripts/Application/Transactions.js" type="text/javascript"></SCRIPT>

When i tried using like this,

<script src="~/Scripts/Application/Transactions.js"></script>
@Html.RazorJSInclude("~/Scripts/Application/Transactions.js")

The js file is accepted by the browser but the ajax call inside the js file is not getting called and throws me the following exception as an alert.

IIS 8.0 Detailed Error-404.15-Not Found

with some html content.

//Code in js file

function Loadgrid() {

    $.ajax({
        url: '@Url.Action("LoadColumns", "Home")',
        data: { 'workflowId': '5' },
        datatype: 'json',
        type: 'GET',
        cache: false,
        success: OnComplete,
        error: function (xhr, status, error) {
                alert(xhr.statusText);
                window.location.href = '@Url.Action("LogOut", "Account")';
        }
    });
}

//Controller:

    public ActionResult LoadColumns(string workflowId)
    {
      return Content("Success");
    }

The load columns method is not getting hit. Where i'm wrong?

FYI,

When using the url in the ajax call like url: '/Home/LoadColumns' the code woks very well but only in local machine and not in server(host in dev).

The RazorJS version is 0.4.3

Source: Razor inside Js file

Answer 1

You specify datatype: 'json' in your ajax call, but your controller action return Content("Success"); where Content will be plain text and it is not allowed, change with something return Json(new { foo = "bar", baz = "Blech" }, JsonRequestBehavior.AllowGet), then, you say the ajax call inside your script is not gettin called, then you say you retrieve an alert, this alert:

alert(xhr.statusText);

so your function is called as expected. Don't use alerts to debug, try:

console.log(error);

also the network tab of your preferred developer tools will do a better work then alerts.

Here you can find a simple working example to achieve your task:

\Views\Home\Index.cshtml

@Html.RazorJSInclude("~/Scripts/App/TestRazorJS.js")
<button id="btnSearch" name="submit" type="button" onclick="LoadFromRazor()">Search</button>

\Scripts\App\TestRazorJS.js

function LoadFromRazor() {
  $.ajax({
    url: '@Url.Action("Test", "Home")',
    datatype: 'json',
    type: 'GET',
    cache: false,
    success: function () { console.log('done'); },
    error: function (xhr, status, error) {
      console.log(status);

    }
  });
}

\Controllers\HomeController.cs

public ActionResult Test()
    {
      return Json(new { foo = "bar", baz = "Blech" }, JsonRequestBehavior.AllowGet);
    }

It work as expected.