asked on

ASP.Net MVC Multiple Instances of a Partial to call the same Javascript

I am working on an existing ASP.Net MVC application, which has a partial view that is called on numerous occasions in several views across the site. So, in a single instance the partial view an be called up to five times giving me 5 uniquely named objects on a full page when it is loaded. At the moment, the Javascript that is being used is held within the partial view, however we have a requirement to separate the Javascript into its own file so that the View and the JS do not exist in the same space.

The reason for the seperation is that the application that is being worked on is now part of a unification project where a WinForms application is going to be 'Migrated' into ASP.MVC. The two applications share a number of features, hence the unification, and the desire to split the View and the JS.

In one instance on the page we have

 @if (!Model.CustomChangeScripts)
    {
        var onSelectFn = "function " + Model.sName + "_onSelect(e)";
        onSelectFn += "{ var dataItem = this.dataItem(e.item.index()); ";
        onSelectFn += "window.document.getElementById('" + spnSummary + "').innerHTML = dataItem.Summary;";
        onSelectFn += "window.document.getElementsByName('" + Model.NameOfIdField + "')[0].value = dataItem.Id;}";

        var onChangeFn = "function " + Model.sName + "_onChange()";
        onChangeFn += "{ if ($.trim(window.document.getElementsByName('" + Model.Name + "')[0].value) == '') {";
        onChangeFn += "window.document.getElementById('" + spnSummary + "').innerHTML = '';";
        onChangeFn += "window.document.getElementsByName('" + Model.NameOfIdField + "')[0].value = '';}}";

        @Html.Raw(onSelectFn)
        @Html.Raw(onChangeFn)
    }

function @onAdditionalDataFnName {
            return {
            text: window.document.getElementsByName("@Model.Name")[0].value,
            excludeId: -1
        };
        }

Open in new window

So, when a view is loaded, it has its own Javascript functions, and they are defined to their own sections.

What I am tryig to acheive is multiple partial views on a page, where there is a single instance of the javascript, and the releavent calling object is passed in and updated.

We are looking at the possibility of TypeScript as a way of doing it, but at the moment I have no idea on how I would start or go about acheiving this right now.

Any ideas, solutions or constructive comments welcome.

THanks

Julian Hansen

What is it you think TypeScript will bring to this? Remember Typescript is simply Typed JavaScript - it is transpiled into normal JavaScript. It gives you the benefit of Typing (which is checked at compile time - or in Editor if you are using Code) - and allows you to use the latest JavaScript but target a different (lower) version.

It is not clear from your description what the actual problem is. As I understand it you have this

Master Page
    Child View 1
        [Common JavaScript Included]
        [Other javascript functions]
    End Child View 1
    Child View 2
        [Common JavaScript Included]
        [Other javascript functions]
    End Child View 2
...
    Child View 5
        [Common JavaScript Included]
        [Other javascript functions]
    End Child View 5
End Master Page

Open in new window

And you want to move the common JavaScript into a single file that is included once - is that correct?

In which case I don't see the problem? Remove it from the Child View's and add it to the Master View - or am I missing something?

SimonPrice3376

ASKER

Your representation is almost correct, but its more

Master Page
    Child View 1
        [specific View 1 JavaScript Included]
        
    End Child View 1
    Child View 2
        [specific View 2 JavaScript Included]
        
    End Child View 2
...
    Child View 5
        [specific View 5 JavaScript Included]
       
    End Child View 5
End Master Page

Open in new window

but all the javascript is the same, other than methods are named @Model.sName + "_methodName" making each instance unique for its mulitple appearance on the page.

I want to have a single instance of the JavaScript in its own file where we can just one method, and pass in the necessary values either to the method, or if using typescript pass in values to a constructor and then it has the necessary values for the methods.

Julian Hansen

this.dataItem indicates there are other players involved?

SimonPrice3376

ASKER

Yes, there are other players in the field so to speak, there are Views and Partials with other Javascript on them that also in some instances have the same method names and also methods that are blindly accepted that should be there... which is another reason to unify things

Julian Hansen

Ok but to make the JavaScript generic we have to understand those other players. The JS function includes a reference to this - that context is potentially important. If this is going to be different in each view then that needs to be taken into consideration.

SimonPrice3376

ASKER

that would mean me dumping the entire project on you and then that would just be a bucket load of spaghetti and some repeated method names....

I think were going down the typescript route to use classes and reference the right instances at the right times, so the work I have done over the last few weeks has been partially worth it.

Julian Hansen

Typescript is not going to do anything extra for you - it ends up as JavaScript it does not provide any functionality you don't already have through JavaScript.

This question needs an answer!

Become an EE member today

7 DAY FREE TRIAL

Members can start a 7-Day Free trial then enjoy unlimited access to the platform.

View membership options

Learn why we charge membership fees

We get it - no one likes a content blocker. Take one extra minute and find out why we block content.