404.15 not found MVC4 RazorJS

Question

I am using RazorJS in my MVC4 application to use the Razor "@" syntax in a Js file.

//The code:

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

In "Transaction.js" there is a "LoadGrid" mehtod inside. When I use my Transaction.js as the code above, it causes the error "There is no such method (Loadgrid)".

Presented HTML in the browser indicates that

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

When I tried to use 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 does not cause the call and raises the following exception as a warning.

 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 column method does not fall. Where am I mistaken?

FYI,

When using url in an ajax call such as url: '/Home/LoadColumns' , the woks code is very good, but only on the local computer and not on the server (host in dev).

RazorJS Version 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 this is not allowed, change something return Json(new { foo = "bar", baz = "Blech" }, JsonRequestBehavior.AllowGet) , then you say that the ajax call is not inside your script called gettin, then you say that you get a warning, this warning:

 alert(xhr.statusText); 

therefore, your function is called expected. Do not use warnings for debugging, try:

 console.log(error); 

Also, the network tab of your preferred developer tools will do more work than warnings.

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

\ 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 works as expected.