How to access a model property from seperate javascript file? (MVC)

Question

Right now I am using a model property in the javascript as one of the values in a json object that i pass to the controller. The problem is that the javascript will be seperated in a .js file and will not be able to access @Model. So the question is; how do i access model from a seperated .js file?

A workaround is to create javascript variable in your view and access in js file: <script> var varWithValue = '@Model.Value'; </script> And access the varWithValue in your js file. — Ricardo Pontual
– Ricardo Pontual, Commented Apr 4, 2016 at 19:30
@GeneR It was on my suggestion the user asked, so I feel partly responsible. Is there an alternative way to access the page's model? Or is the @Model.Blopp the only choice? — Konrad Viltersten
– Konrad Viltersten, Commented Apr 4, 2016 at 19:31

Hypnobrew · Accepted Answer · 2016-04-04 19:52:29Z

1

You can load the external javascript as usual and the send the model value as a property to an init method like this in your view:

<script type="text/url" src="externalscript.js"/>
<script type="text/javascript">
        $(function() {
            var model = home.views();
            model.init({
                modelProperty: '@Model.Property',
            });
</script>

And then your externalscript.js looks like:

(function (window) {
    home = window.home || {};
    home.views = function () {
        pub.init = function (options) {
            var property = options.modelProperty;
        };
        return pub;
})(window);

And you can use your property like you want to in the external script.

edited Apr 4, 2016 at 19:52

answered Apr 4, 2016 at 19:45

Hypnobrew

1,1409 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

invernomuto · Accepted Answer · 2016-07-23 06:45:21Z

1

You could try RazorJs (unfortunatelly seems no more mantained)

Write Razor-Style C# or VB.NET inside your Javascript Files. Also contains an http handler for serving, when needed, those files.

You could do something like this:

Views/Home

@{
    ViewBag.Title = "Home Page";
}

@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);

        }
      });
    }

edited Jul 23, 2016 at 6:45

answered Apr 4, 2016 at 19:45

invernomuto

10.2k5 gold badges42 silver badges54 bronze badges

Collectives™ on Stack Overflow

How to access a model property from seperate javascript file? (MVC)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related