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

Posted

技术标签:

【中文标题】.NET 仪表板应用程序的可能性【英文标题】:.NET Possibilities for a Dashboard Application 【发布时间】: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.";
<div id="htmlContainer">This should be replaced based on the settings retrieved</div>

由于我们想要一个仪表板,我们需要能够在同一页面上多次使用相同的 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 来区分这些实例。因此,类并不是真正的选择 【参考方案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 检索到的唯一内容。

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

【讨论】:

以上是关于.NET 仪表板应用程序的可能性的主要内容,如果未能解决你的问题,请参考以下文章

Log4Net 的仪表板 [关闭]

elsa-core:4.ASP.NET Core Server with Elsa Dashboard

如何在我的 ASP.NET 项目中通过 Revox 设置 Pages 管理面板仪表板模板?

.net core 3.0 Signalr - 实现一个业务推送系统

.net core 3.0 Signalr - 实现一个业务推送系统

在 ADO.Net C# 中执行并行数据库访问