使用信号 r 和 javascript 构建动态网页的最佳方法是什么？答案

【问题标题】：What's the best approach for building a dynamic web pages with signal r and javascript?使用信号 r 和 javascript 构建动态网页的最佳方法是什么？
【发布时间】：2020-04-17 04:17:10
【问题描述】：

我目前正在使用带有信号 r 的 asp.net MVC .net core 3.1 来构建网站。然而，最耗时的事情之一是编写用于构建动态 html 元素的代码。例如，我正在使用以下 javascript：

function generateScheduleInfoRow(category, emplName, emplSendTestReport, empldSendBoe, emplEmail, emplPhoneNum, emplid, emplDeptNum) {
    var output = `
            <td> 
                <input name="category" type="text" value="` + category + `"/>
            </td>
            <td>
                <input id="emplName` + currentScheduleInfoRows +`" name="emplName" value="` + emplName + `" type="text" />
            </td>
            <td>
                <input type="hidden" name="emailPersonalCalendar" value="0"><input type="checkbox" onclick="this.previousSibling.value=1-this.previousSibling.value">
            </td>
            <td>
                <input type="hidden" value="` + emplSendTestReport + `" name="emplSendTestReport" value="0"><input type="checkbox" onclick="this.previousSibling.value=1-this.previousSibling.value">
            </td>
            <td>
                <input id="emplEmail` + currentScheduleInfoRows + `" name="emplEmail" value="` + emplEmail + `" type="text" />
            </td>
            <td>
                <input id="emplPhoneNum` + currentScheduleInfoRows +`"  name="emplPhoneNum" value="` + emplPhoneNum + `" type="text" />
            </td>
            <td>
                <input id="emplId` + currentScheduleInfoRows +`"  name="emplid" value="` + emplid + `" type="text" />
            </td>
            <td>
                <input id="emplDeptNum` + currentScheduleInfoRows +`"  name="emplDeptNum" value="` + emplDeptNum + `" type="text" />
            </td>`;
    currentScheduleInfoRows++;
    return output;
}

此功能有助于在表格中建立一行。我从信号 r 连接接收到一些 JSON 数据并使用它来动态构建表：

    for (var i = 0; i < dataJson["schedulePeople"].length; i++) {
        var cur = dataJson["schedulePeople"][i];
        document.getElementById("eventDetailsTable").insertRow(-1).innerHTML = generateScheduleInfoRow(cur["Category"], cur["EntityName"], cur["EmailTestReport"], cur["EmailBoe"],
            cur["EmailAddr"], cur["PhoneNum"], cur["Emplid"], cur["DeptNum"]);
    }

是否有更好的技术或框架或方法或开源代码来快速构建这些 HTML 页面？我在整个网站上都使用这种相同的代码技术。谢谢。

【问题讨论】：

标签： javascript html asp.net-mvc signalr

【解决方案1】：

经过一段时间的挖掘，我推荐使用微软的新 Blazor：

Microsoft documentation!

Blazor 让您可以使用类似 C# 的代码轻松生成 razor 页面和 html 元素。它在后台使用信号器来促进这一点。所有的信号 r 调用都被抽象掉了。

【讨论】：