Please, observe the following two razor templates:

index.cshtml:

@using Dayforce.HtmlClock
<!DOCTYPE html>
<html manifest="IndexManifest.ashx">
<head>
    <title id="DocumentTitle">CERIDIAN | Clock</title>
    <link rel="shortcut icon" href="./favicon.ico" />
    <meta http-equiv="X-UA-Compatible" content="IE=10; IE=9; IE=8; IE=EDGE" />
    <meta name="viewport" content="width=device-width" />
    <link href="css/dayforce_style.css" rel="stylesheet" type="text/css" />
    <link href="css/Fonts.css" rel="stylesheet" />
    <link href="css/progress_bar.css" rel="stylesheet" />
    <script>
        var webClock = { stateManager: null, config: { deviceServiceURL: null } },
        dojoConfig = {
            async: true,
            locale: 'en-US',
            cacheBust: false,
            packages: [
                { name: 'ui', location: '@ManifestBase.GenerateContentUrl("~/ui")' },
                { name: 'lib', location: '@ManifestBase.GenerateContentUrl("~/lib")' },
                { name: 'functions', location: '@ManifestBase.GenerateContentUrl("~/functions")' },
                { name: 'threads', location: '@ManifestBase.GenerateContentUrl("~/threads")' },
                { name: "dojo", location: '@ManifestBase.DojoPackageUrl("/dojo")' },
                { name: "dijit", location: '@ManifestBase.DojoPackageUrl("/dijit")' },
                { name: "dojox", location: '@ManifestBase.DojoPackageUrl("/dojox")' }
            ]
        };

    </script>
</head>

<body>
    <div id="MainPanel" class="containerCenter horizontalCenter"></div>
    <script src='@ManifestBase.JQueryUrl'></script>
    <script src='@ManifestBase.DojoUrl'></script>
    <script>
        require(["dojo/dom", "lib/StateManager", "lib/Utils", "dojo/domReady!"],
            function (dom, stateManager, utils) {
                webClock.stateManager = stateManager;
                stateManager.initializeRegistration().then(
                    function initializeRegistration() {
                        utils.registerStopDblTapZoom();
                        utils.registerResizeWindow(-20);
                        $(window).resize();
                        $("body").stopDoubleTapZoom();
                        $("#release").html(webClock.config.release);
                        $("body").dojoClick = true;
                    });
            });
    </script>
</body>
</html>

WebClock.cshtml:

@using Dayforce.HtmlClock
<!DOCTYPE html>
<html manifest="WebClockManifest.ashx">
<head>
    <title id="DocumentTitle">CERIDIAN | Clock</title>
    <link rel="shortcut icon" href="./favicon.ico" />
    <meta http-equiv="X-UA-Compatible" content="IE=10; IE=9; IE=8; IE=EDGE" />
    <meta name="viewport" content="width=device-width" />
    <link href="css/u_clock.css" rel="stylesheet" />
    <link href="css/Fonts.css" rel="stylesheet" />
    <link href="css/progress_bar.css" rel="stylesheet" />
    <script>
        var webClock = { stateManager: null, config: { deviceServiceURL: null } },
        dojoConfig = {
            async: true,
            locale: 'en-US',
            cacheBust: false,
            packages: [
                { name: 'ui', location: '@ManifestBase.GenerateContentUrl("~/ui")' },
                { name: 'lib', location: '@ManifestBase.GenerateContentUrl("~/lib")' },
                { name: 'functions', location: '@ManifestBase.GenerateContentUrl("~/functions")' },
                { name: 'threads', location: '@ManifestBase.GenerateContentUrl("~/threads")' },
                { name: "dojo", location: '@ManifestBase.DojoPackageUrl("/dojo")' },
                { name: "dijit", location: '@ManifestBase.DojoPackageUrl("/dijit")' },
                { name: "dojox", location: '@ManifestBase.DojoPackageUrl("/dojox")' }
            ]
        };
    </script>
</head>

<body>
    <audio id="keypad" src="css/sounds/keypad.mp3" preload="auto"></audio>
    <audio id="accepted" src="css/sounds/accepted.mp3" preload="auto"></audio>
    <audio id="rejected" src="css/sounds/rejected.mp3" preload="auto"></audio>
    <div id="MainPanel" class="containerCenter horizontalCenter"></div>
    <div id="release"></div>
    <script src='@ManifestBase.JQueryUrl'></script>
    <script src='@ManifestBase.DojoUrl'></script>
    <script>
        require(['dojo/dom', 'lib/StateManager', 'lib/Utils', "dojo/domReady!"],
            function (dom, stateManager, utils) {
                stateManager.initialize().then(
                    function initialized() {
                        utils.registerStopDblTapZoom();
                        utils.registerResizeWindow();
                        $(window).resize();
                        $("body").stopDoubleTapZoom();
                        $("#release").html(webClock.config.release);
                        $("body").dojoClick = true;
                    },
                    function () {
                        localStorage.clear();
                        window.location.replace('index.html');
                    });
            });
    </script>
</body>
</html>

They are very similar, yet I am puzzled as to how can I leverage this similarity.

Basically, I would like to know if it is possible to avoid massive copy pasting of the same code and/or markup here.

If needed, I can change from Razor to ASPX.

EDIT

There is no controllers, now explicit view creation in code. The cshtml page is just navigated to. These pages are static html in spirit, the only reason for them being dynamic is the need to compute the JS module paths.

Related posts

Recent Viewed