如何使C＃和Javascript代码保持同步？

Question

I should think this problem could come to anyone, I'm interested in ways of making the best use of technology to keep my code-base DRY and in sync.

I'm developing an ASP.NET MVC5 web application. I have several variables I need to be communicating to the client side. Say "PageType", which I need to be tracked on the client side using Google Analytics. The intent may be multifarious, this is a simple application with the same purpose, for illustration.

I have a C# class which allows me to specify the various PageTypes and also switch between them for switch-casing, say:

public static class PageTypes {
    public const String Home = "Home";
    public const String AboutUs = "AboutUs";
    public const String ContactUs = "ContactUs";
}

This is useful when we check dynamic values, like:

String pageType = ViewBag.PageType;
if(!String.IsNullOrWhiteSpace(pageType))
{
    switch(pageType)
    {
        case PageTypes.Home:
            // do something here
            break;
        case PageTypes.AboutUs:
            // do something else here
            break;
        ...

... or even when doing comparisons. I hope you get the point. So, in a Razor View, I can output var pageType = '@ViewBag.PageType'; in a page in an inline script, and it will be present as var pageType = 'Home'; or some such as the case, in the inline javascript of the page. Now, just as I did with the C# code, I want to be able to switch-case the page type inside my javascript.

// This part is dynamic so will be inline script of the razor view
var pageType = 'Home';

// This part is logic so can reside in an external script

// This part is just illustration, I will worry about naming and accessibility later
// This will be in a separate script and will be included, and will be referenced, thereby providing Intellisense within Visual Studio
var PageTypes = {
    Home: 'Home',
    AboutUs: 'AboutUs'
};

// I should be able to do this, in an external script
switch(pageType){
    case PageTypes.Home:
        alert('Home!');
        break;
    case PageTypes.AboutUs:
        alert('Not Home');
        break;
    default:
        alert('Nothing');
        break;
}

It can be seen that if the static class PageTypes of C# is in sync with the var PageTypes in the JavaScript, it would be a boon to our developers, with the Intellisense and predefined values, so that they may avoid typos and incompatibilities of values.

What's the best way to achieve this, while gaining Intellisense in both C# and JavaScript?

I would prefer changes in C# affecting JS rather than the reverse. The switch statements need not be converted, only the constant values like what I have mentioned.

I think a script in the build process could be useful but is there any tool/plugin/alternate way to accomplish what I have mentioned?

Answer 1

If I have understand what the problem is, what you can do is:

• set the pagetype in some variable inside your html markup, using the template engine (sorry, I don't work with .Net, don't know how to write it). In this example, I used the data-* in the body element

< body data-type="%some template engine syntax that output the page type%">

• in your js, retrieve the data-type value (in the example, I used jquery)

  var type = $("body").data("type");

• define some functions, each one for your pagetype, inside an key/object variable / object

  var PageTypeFunctions = { home: function() {

   }, aboutus: function() { }, xpto: function() { } 

  }

• invoke the function from the

  PageTypeFunctionstype;

With this approach, you won't have to deal with the PageTypes variable. You will only need one function for each pagetype. Of course you can do some check to validate if PageTypeFunctions[type] exists.