通过JavaScript类调用javaScript函数

Question

I am a newbie in the ASP.NET technology and also I did not find any answer on the forum (however if there is one please let me know)

I am writing ASP.NET MVC app and I use a lot of Ajax there. At the moment I am rewriting "free" Javascript into classes and their methods, so the code will be more readable. And here is the problem:

For such a case:

@Ajax.ActionLink("Text", "SomeAction", "Controller", new AjaxOptions() { UpdateTargetId="content", HttpMethod="Post", OnComplete="javascriptActionStatedBelow"})

    <script>

        function javascriptActionStatedBelow() 
        {
            // do stuff here 
        }

    </script>

Everyting works perfectly fine. However when I try to input the function into the class and then call it, it does not work.

I am doing this in the following way:

    <script>

    // is in seperate file and here is added reference to it
    class myClass {
        javascriptActionStatedBelow() {
            // do stuff here
        }
    }

    // this is on the view page
    var someObj = new myClass();


</script>

I initilize the object in the header and then in the body I put the following.

@Ajax.ActionLink("Text", "SomeAction", "Controller", new AjaxOptions() { UpdateTargetId="content", HttpMethod="Post", OnComplete= "someObj.javascriptActionStatedBelow" })

The second idea does not work.

What am I doing wrong ? Is there a better solution for managing javascript content in ASP.NET MVC applications while using AJAX ?

I know about $.ajax type of solution but actions like OnComplete, OnBegin,.. etc worked perfectly for now.

Answer 1

It's important to note that there are no classes in JavaScript. Functions can be used to somewhat simulate classes, but in general JavaScript is a class-less language. However from ECMAScript 2015, classes are introduced which are primarily syntactical sugar over JavaScript's existing prototype-based inheritance. For your requirement, should defined the java script function as IIFE . If your javascript is not targeted for ECMAScript 2015 , then you can write the code as follows for IIFE:

1. Define the IIFE method as

    var myClass = (function () { // Object that's returned from the IIFE. return { javascriptActionStatedBelow: function() { } }; }()); 

Now in view's script section you can use it as

// this is on the view page
var someObj = myClass.javascriptActionStatedBelow();

Answer 2

Javascript isn't strictly a “class-based” object-oriented language, hence the same patterns that apply to conventional back-end object-oriented languages don't apply there effectively. However, there is a number of ways to make javascript much more convenient and manageable. One of the ways that I highly recommend is through the use of “Module / Revealing module pattern”, or simply put through making javascript “namespaces” and calling them wherever needed. This reduces the clutter in View files and mimics the design we are used to seeing.

In a separate js file (conventionally named similar to the view file), you will define your javascript as follows:

var className = (function() {
    // private variables and functions
    var javacriptField1 = "some field"; 

    var javascriptFunction1 = function() {
        //function logic
    }

    var javascriptFunction2 = function() {
        //function logic
    }

    // public API
    return {
        javascriptField1   : javascriptField1,
        javascriptFunction1: javascriptFunction1,
        javascriptFunction2: javascriptFunction2
    };
})();

In your view you would include your js file:

<script src="~/Scripts/myfile.js"></script>

And use it within the javascript on your view as follows:

var obj = className.javascriptFunction1();

Following is a very nice tutorial you should go through: https://www.dcaric.com/blog/asp-net-mvc-and-revealing-module-pattern

Here's another example: How to use javascript namespaces correctly in a View / PartialView