.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 仪表板应用程序的可能性的主要内容,如果未能解决你的问题,请参考以下文章
elsa-core:4.ASP.NET Core Server with Elsa Dashboard
如何在我的 ASP.NET 项目中通过 Revox 设置 Pages 管理面板仪表板模板?
.net core 3.0 Signalr - 实现一个业务推送系统