2

I have an ASP.NET MVC Website with a lot of JavaScript inside my views.

I have a few questions:

  1. Is it possible to put JavaScript functions in an external .js file (using razor syntax in some functions to get model values)?

  2. How can I debug my application? For now I just put some alert() in the code but it is not a good solution.

  3. How can I log data? I use log4net for the C# part but is there a way to do it in JavaScript? At least into the "Output" section of Visual Studio.

Ani
  • 2,636
  • 1
  • 21
  • 17
user3544117
  • 587
  • 4
  • 9
  • 25

3 Answers3

2

1) Yes, I usually create an object literal to act like a simple class. Then i make a method on that called init and pass all the required values from the view to it on document.ready.

Create your class in the external file like this:

var someHelper = {
  init: function (options) {
  }, 
  otherMethod: function (params) {
  }
};

Then from the razor view i do something like this

<script>
var options = @{new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model);};
someHelper.init(options)
</script>

If you place the init-script early on the view, you can then in the code call the methods you need as if it was inline.

2) use console.log(objectToInspect) to inspect the values in the developer console. This should work in chrome, firefox and IE (IE needs to have console open before called).

3) Create a route in your asp.net project that accepts a string at the minimum. In your javascript setup a method that posts the data (as a string) to your asp.net endpoint/route with an ajax call. Using jquery to build the request is probably the easiest way. Also if you want to log data before jquery is loaded/ready, you can hook your logging up to a method that can simply push the errors into a array and once jquery is loaded, flush/post that data to the endpoint along with any new loggings.

Per Hornshøj-Schierbeck
  • 15,097
  • 21
  • 80
  • 101
  • Some browsers - like chrome - will let you log multiple object to the console like this: console.log(firstObj, secondObj); this is easier than doing two logs or even trying to concanate the values of the two objects. – Per Hornshøj-Schierbeck Jun 02 '14 at 08:43
  • Thank you for the answer. I'll use the 3rd answer for the logging, and try the solution for the first question – user3544117 Jun 02 '14 at 08:47
0

Here it goes:

  1. No. The Razor engine will not parse .js files so the code will not be "understood",
  2. You can set a debugger; wherever you wish to inspect you JavaScript code,
  3. You can print messages to the console.

For 2 & 3 just open the developer tools from your browser of choice. For 3, you can start reading here.

Community
  • 1
  • 1
Andrei V
  • 7,306
  • 6
  • 44
  • 64
  • Thanks. But for some reason, I have to launch the website inside a WebBrowser control... Is there a way to do it without using a browser ? – user3544117 Jun 02 '14 at 08:37
0

  1. You can use partial views to render your javascript and pass data by Model or ViewBag, here's a good tutorial on partial views Partial View in ASP.NET MVC .

  2. You can debug javascript using chrome developer tools, in Chrome open developer tools (F12) and go to Sources and select your page or javascript file and set breakpoints.

  3. To log data in javascript, you can use the console.log() function and logs will appear in the browser's console, here's a simple tutorial Console.Log : Say Goodbye to JavaScript Alerts for Debugging!

Saffar
  • 149
  • 4