Question

我的情况如下：

我正在创建一个仪表板框架，我想在其中开发多个应用程序。每个应用程序都应该有自己的View（HTML＆amp; JS），Model（当前使用EF6）和MVC控制器。最好全部包含在一个文件夹中。

仪表板可以在其页面上多次使用相同的应用程序，但具有不同的设置。这些设置存储在DB中，该DB将UID分配给此类应用程序的实例。例如：假设我有一个HTMLContainer应用程序。此应用程序应基于给定的设置替换其内部html。 HTML＆amp; JS看起来像这样：

＆＃13;

$('#htmlContainer').innerHTML = "This value would be retrieved from a .NET server/controller based on a certain UID which should be given to this 'component' when instantiated.";

＆＃13;

<div id="htmlContainer">This should be replaced based on the settings retrieved</div>

＆＃13;

由于我们想要一个仪表板，我们需要它可以在同一页面上多次使用相同的HTMLContainer。

这引入了两个挑战：

我们应该能够制作id =＆＃34; htmlContainer＆＃34;通过添加某种UID来获得它。因此ID将成为＆＃39; htmlContainer-1384＆＃39;例如。这可以通过在例如选择ASP.NET MVC时更改渲染器中的内容来完成。
接下来的挑战是我最挣扎的挑战。由于HTML的ID会发生变化，因此附加到HTML的JS将不再起作用。我们需要一种方法来保持该HTMLContainer应用程序的JS范围。这就是我现在陷入困境的地方。

我还没有找到支持这种行为的ASP.NET框架，而没有自定义该框架的许多核心功能。

我真的很想知道是否有人可以帮助我，也许有使用ASP.NET框架创建仪表板和仪表板应用程序的经验。我特别想要ASP.NET框架的原因是因为我目前使用的很多外部库都在.NET中。

如果我需要添加更多信息以便明确我的情况，请告诉我。

提前谢谢。

Answer 1

您可以使用Object Orient Javascript实践来执行此操作。您将只有一个应用程序具有同一类的多个实例。

创建一个跟踪自身实例数的类，并使用该实例ID为需要它的每个元素设置UID。

它看起来像这样：

// private static
var nextId = 0;

// constructor
function MyComponent(element) {
    if (!(this instanceof MyComponent)) return new MyComponent();

    // private        
    var id = nextId++; //component instance ID
    var divId = 'div-id-' + id;
    var spanId = 'span-id-' + id;

    function renderUniqueComponent(sender, args){
        var el = document.getElementById(element);
        var data = getDataFromServer();

        el.innerHTML += '<div id=' + divId + '>'
                            + '<span id=' + spanId + '>'
                                + data
                            + '</span>'
                      + '</div>';
    }

    function getDataFromServer(){
       //make an Ajax call to your API
    }

};

这将为每个元素呈现具有唯一ID的相同组件，并生成从您的api检索到的唯一内容。

您应该每页只加载一次该文件，并为您需要的组件的每个实例调用它的构造函数，传入要在其中呈现新组件的目标元素的元素引用。

.NET仪表板应用程序的可能性

1 个答案: