Telerik blogs
.NET DevChat Structuring JavaScript Code in ASP.NET MVC Apps_870x220

In this .NET DevChat Recap, we dive into how you can most effectively structure your JavaScript code when developing ASP.NET MVC applications.

Another exciting .NET DevChat is behind us and will remain for posterity—if you missed it, you can watch it below. This past week we covered Structuring JavaScript Code in ASP.NET MVC Applications.

If you are happy with the powerful ASP.NET MVC framework and see no need to embrace an opinionated client-side framework such as Angular, Vue or React, this resource is for you. Modern applications will undoubtedly need JavaScript so even if you are sticking with the traditional, server-rendered Razor-based approach of building MVC apps, it is important that you structure your code comprehensively so that your client-side code does not get impossible to maintain. That’s exactly what we wanted to achieve with the live demo.

What We Covered

We started off going over what comes out of the box with the Visual Studio MVC templates. In particular, the MVC layout support for sections, which allows you to get full control over where specific pieces of markup you add to the view actually end up in the finalized rendered HTML. This is quite handy when dealing with JavaScript that’s specific to certain pages of your app.

We added Telerik UI for ASP.NET MVC widgets by using the Visual Studio Wizard. We relied on the Deferred functionality to fully separate markup generation from JavaScript generation. We then added the very helpful Garber-Irish implementation pattern to provide a sound structure for simple and predictable execution of JavaScript based on controller and action names, by creating a logical bridge between the MVC context and the JavaScript execution context.

As promised, here’s the source code of the application we built during the presentation.

Questions and Answers

Is the position of the JavaScript in the DOM relevant?

Yes. According to W3 schools, “Placing scripts at the bottom of the <body> element improves the display speed, because script compilation slows down the display.” This is also recommended by the Exceptional Performance team at Yahoo.

How to deal with JavaScript code that belongs to a partial page that gets loaded via AJAX?

In general I would recommend against loading JavaScript code as part of an AJAX response. This is in essence adding extra code to an application during its runtime. Loading data (JSON, JSONP, XML) or simple markup (HTML) is going to be much easier to maintain than loading JavaScript, which will have to be executed at some point, potentially conflicting with the already loaded application code.

Other Questions?

Do you have a question you couldn’t ask during the demo? We want to hear it—just write it in the comments.


ignacio fuentes
About the Author

Ignacio Fuentes

Ignacio Fuentes is a Sales Engineer at Progress. He’s a full stack software developer and is deeply passionate about technology. He is a firm believer in engaging and compelling software as a means to fix the modern world's problems.

Related Posts

Comments

Comments are disabled in preview mode.