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

【问题标题】：.NET Possibilities for a Dashboard Application.NET 仪表板应用程序的可能性
【发布时间】：2017-11-15 06:26:24
【问题描述】：

我的情况如下：

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

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

$('#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.";

&lt;div id="htmlContainer"&gt;This should be replaced based on the settings retrieved&lt;/div&gt;

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

这带来了两个挑战：

我们应该能够通过向其添加某种 UID 来使 id="htmlContainer" 独一无二。例如，ID 将变为“htmlContainer-1384”。这可以通过更改渲染器中的某些内容来完成，例如选择 ASP.NET MVC。
下一个挑战是我最挣扎的挑战。由于 HTML 的 ID 会发生变化，因此附加到 HTML 的 JS 将不再起作用。我们需要一种方法来保持该 HTMLContainer 应用程序的 JS 范围。这就是我现在卡住的地方。

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

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

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

提前谢谢你。

【问题讨论】：

您是否致力于从头开始构建自己的框架？我建议使用成熟的前端框架，例如 Angular，并从 .Net Api 控制器中提取渲染内容所需的任何数据。
不错的建议。我们目前尝试使用 ASP.NET Web API 2 后端来制作 Angular 2 前端。不幸的是，这导致后端与前端分离。通常这是一件好事，但我们希望在一个文件夹中维护一个组件/应用程序的所有必要文件。这意味着这个解决方案将不是我们想要的。此外，这个解决方案需要我们的开发人员有一定的学习曲线来学习 Angular 2 和 typescript。这就是为什么我们正在尝试探索不同的可能解决方案。
使用 HTML 类，即.htmlContainer，而不是#htmlContainer-1384。 ID 必须是唯一的，但 HTML 类的全部意义在于将样式或行为应用于一组相似的事物。或者，如果您坚持使用 id，则始终可以使用以选择器开头的属性：[id^=htmlContainer]，这将捕获任何具有以 htmlContainer 开头的 id，即 #htmlContainer-1234 和 #htmlContainer-5678。
FWIW，不过，我在上一条评论中提到的东西就像 HTML 101。如果您不知道，那么从头开始创建一个完整的仪表板框架是可能过于雄心勃勃。
使用类不是一个选项。我再举一个例子：假设您有两个具有相同基本代码的应用程序。该应用程序有一个标签元素，其中包含一个数字（例如从一开始就为 0）和一个按钮。单击按钮时，标签元素内的数字应增加一。假设您的页面上有两个这样的应用程序。相同的基本代码，相同的应用程序。我现在想防止当我单击一个实例上的按钮时，它会影响另一个实例。这就是为什么我需要一个 UID 来区分这些实例。因此，类并不是真正的选择

标签： javascript asp.net asp.net-mvc components dashboard

【解决方案1】：

您可以通过面向对象的 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 检索到的唯一内容。

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

【讨论】：