Storing the .NET Framework viewmodel in its own individual Javascript file

Question

Storing the .NET Framework viewmodel in its own individual Javascript file

I have a question about structuring my design for SoC (Separation of Concerns). I currently have the following files:

testController.cs
testViewModel.cs
testView.cshtml
testScript.js

Currently, I generate data in the controller, populate the testViewModel, and pass it to the Razor view. Inside the Razor view, I can directly use the data like this:

<script>
    var someVariable = @Model.someVariable;
</script>

Everything works fine until I try to move my JavaScript code into a separate file.

What is the best way to access the data in a variable that is located in a JavaScript file?

That's my main question. Additionally, once I solve this issue, I'd like to incorporate VueJs in a separate file as well.

However, I'm unsure how to pass data from the Razor view to the Vue data variable.

What would be the best practice for achieving this?

javascript asp.net-mvc vue.js model-view-controller razor

Answer 1

Answer №1

There isn't a one-size-fits-all "best practice" for this situation as different approaches work better in different contexts. Personally, I find the "revealing module pattern" with IIFEs to be a useful method. Here's an example:

CustomScript.js

var CustomModule = (function () {
    var customVariable = null;

    return {
        // externalVariable will be provided by the caller
        initialize: function (externalVariable) {
            customVariable = externalVariable;
        }
    };
})();

Then in the HTML file:

MyPage.html

<!-- include your CustomScript.js file -->

<!-- other content -->

<script>
    CustomModule.initialize(@Model.externalVariable);
</script>

This pattern can also be adapted to set up Vue using the parameter(s) passed to CustomModule.initialize().

Answer 2

There isn't a one-size-fits-all "best practice" for this situation as different approaches work better in different contexts. Personally, I find the "revealing module pattern" with IIFEs to be a useful method. Here's an example:

CustomScript.js

var CustomModule = (function () {
    var customVariable = null;

    return {
        // externalVariable will be provided by the caller
        initialize: function (externalVariable) {
            customVariable = externalVariable;
        }
    };
})();

Then in the HTML file:

MyPage.html

<!-- include your CustomScript.js file -->

<!-- other content -->

<script>
    CustomModule.initialize(@Model.externalVariable);
</script>

This pattern can also be adapted to set up Vue using the parameter(s) passed to CustomModule.initialize().

Storing the .NET Framework viewmodel in its own individual Javascript file

Answer №1

Similar questions

Leveraging jQuery to implement onclick functionality within a Jinja2 loop

Develop a Vue.js module that incorporates SCSS styling for enhanced customization

Tips for closing 2 models in a React application

Load a page and sprinkle some contents with a slide effect

A guide to efficiently passing props in a Vue.js application connected to Express with MongoDB

The Problem of Restoring Column Height in Tabulator 4.6.3 Filters

What is the process for extending the timeout of my ApplicationCookie in Identity 2.0?

Parsing Problem---Is there a Parsing Error?

What sets Fetch apart from ajax and XMLHttpRequest that makes it impressively faster?

Can a function be passed to the URL field in an AJAX request?

Combine all div elements to create a unified image and then proceed to save it as a jpg file before uploading to the server

Learn the process of adding transformation to an SVG path element

What are the steps to reset the Firebase server in order to allow the deployment of functions

There is a necessary pause needed between carrying out two statements

Utilizing jQuery Mobile - Dividing content across multiple HTML files

angular corresponding vue binding="$props"

What is the best way to capture GotError [HTTPError]: When the response code 404 (Not Found) occurs in a nodejs

Ordering a string of whole numbers using JavaScript

Leveraging $last in Angular for obtaining the final visible element with ng-show

Using dangerouslySetInnerHTML in React within a Fragment