如何编写Javascript来显示带有SignalR的MVC模型？（Javascript在参数中接收属性）

我正在致力于将signar添加到一个正常工作的MVC应用程序中，但我不擅长Javascript，也不知道如何编写它来显示我需要的内容。我看到了很多聊天应用程序的教程（发送消息），但这不是我需要的

我想要的是： 显示完整模型及其所有组件。 程序接收一个文件，该文件在数据库中添加一个新属性。属性必须与其所有组件一起显示

以下是要显示的模型（属性）示例

    public int WaterLevel { get; set; }

    public int WindSpeed { get; set; }

    public int NumberOfMachine { get; set; }

    public int FoodLevel { get; set; }

html页面是使用Visual studio创建的默认html页面： （这是需要使用javascript在网页上更新的内容）

就像现在一样，它在好的列中写入，但不在表的末尾，也不写入值。它是在写对象而不是数字。 此外，当我用javascript编写时

properties.WaterLevel  //For example

它是在空白处，而不是写东西

//It does the same thing if I write properties [0].WaterLevel

更新前的输出： 更新后的输出： 所需输出： 添加新文件后调试中的属性值：

---

你知道如何在一个好的位置获得正确的值吗？

我想你对表格和表格行的工作原理有点困惑。首先，html应该更像这样：

<tbody id="properties_display">
    @foreach (var item in Model)
    {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.WaterLevel)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.WindSpeed)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.NumberOfMachine)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.FoodLevel)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Number)
        </td>
    </tr>
    }
</tbody>

connection.on("onFileChange", function (properties) {
    let table = document.getElementById("properties_display");
    // Remove all existing rows
    while (table.firstChild) {
        table.removeChild(table.firstChild);
    }

    // Add a new row for each item in properties
    for (let i = 0; i < properties.length; i++) {
        let tr = document.createElement("tr");

        let tdWaterLevel = document.createElement("td");
        tdWaterLevel.textContent = properties[i].waterLevel;
        tr.appendChild(tdWaterLevel);

        let tdWindSpeed = document.createElement("td");
        tdWindSpeed.textContent = properties[i].windSpeed;
        tr.appendChild(tdWindSpeed);

        let tdNumberMachine = document.createElement("td");
        tdNumberMachine.textContent = properties[i].numberMachine;
        tr.appendChild(tdNumberMachine);

        let tdFoodLevel = document.createElement("td");
        tdFoodLevel.textContent = properties[i].foodLevel;
        tr.appendChild(tdFoodLevel);

        let tdNumber = document.createElement("td");
        tdNumber.textContent = properties[i].number;
        tr.appendChild(tdNumber);

        table.appendChild(tr);
    }
});

我还没有测试过，但这可能更符合您的需求。您正在将所有元素传递给JavaScript，因此它需要遍历所有项并获取它们各自的属性。您可能需要确保将中心数据正确地传递给javascript。若不是这样，在传递之前，您可能需要在服务器上转换为Json，但我认为SignalR会自动处理这些内容

您提到了

properties。由于属性是一个数组，WaterLevel

不会返回任何有意义的内容，但是如果

properties[0]。WaterLevel

可能还有其他问题，我会将properties对象记录在javascript中，以查看服务器实际传递给浏览器的内容

---

最后，删除并替换所有行可能不是最好的主意。您最好重用现有行并添加所需的行，或者只从服务器传递更改的元素，而不是全部。只是一些想法。希望这对您有所帮助。

基于您所拥有的，请参阅代码片段。 JavaScript对象是包含单个对象的数组

var属性=[
{
“FoodLevel”：48，
“Id”：0，
“MachineID”：“1234567”，
“数字”：0，
“机器编号”：32，
“水位”：54，
“风速”：98
}
]
让tbody=document.getElementById（“表体”）
设tr=document.createElement（“tr”）；
设tdWaterLevel=document.createElement（“td”）；
tdWaterLevel.innerHTML=属性[0]。水位；
tr.appendChild（TDL水位）；
设tdWindSpeed=document.createElement（“td”）；
tdWindSpeed.innerHTML=属性[0]。WindSpeed；
tr.appendChild（tdWindSpeed）；
让tdNumberOfMachine=document.createElement（“td”）；
tdNumberOfMachine.innerHTML=属性[0]。NumberOfMachine；
tr.appendChild（tdNumberOfMachine）；
让tdFoodLevel=document.createElement（“td”）；
tdFoodLevel.innerHTML=属性[0]。FoodLevel；
tr.appendChild（tdFoodLevel）；
设tdNumber=document.createElement（“td”）；
tdNumber.innerHTML=属性[0]。编号；
tr.appendChild（tdNumber）；
t附肢儿童（tr）

水位
风分离
机器数量
食物水平
数
能否将“console.log（JSON.stringify（properties））”的输出粘贴到“onFileChange”功能中？请向我们展示一些输出，它在浏览器中显示了什么？谢谢您的回复，非常清晰，非常有帮助。您注意到我的代码有一些问题，所以我有时间更改一些内容。现在，我的InsertData返回刚刚插入的数据，这样，我就不必获取数组。我可以传递一个项目，这样我就可以只传递属性。水位。@Michaeldc很高兴这有帮助。我不确定您是希望获取所有行还是仅获取更新的行。您是否碰巧知道为什么网页上没有写入值？我传递的属性在调试中查找时具有良好的值。当我使用innerHTML时，它会写“未定义”，而不是用textContent什么都不写。我可以写tdWaterLevel.textContent=property.WaterLevel吗？还是我必须写些别的东西？@Michaeldc你的意思是，当它到达JavaScript代码后，在调试中查找它时，你可以看到好的值？如果在到达javascript代码后可以看到这些值，那么就需要找到正确的引用路径来获取这些值。我在我的connection.on函数中创建了一个console.log，并在控制台中显示数据。所以它在酒店被破坏了。水位电话？谢谢你的回答。我尝试了提供的代码，但它在网页上写“未定义”，而不是显示数字。你知道这是什么原因吗？我稍微改变了一下我的观察程序，所以我只得到javascript中添加的最后一个属性，当我调试时，我看到了好的值。但它只写未定义的内容。如果我使用textContent而不是innerHTML，它不会写任何东西。问题解决了，它必须是javascript中的驼峰式。大概是这样的：属性。水位。非常感谢。没问题，这是一次多么精彩的旅程啊！
//It does the same thing if I write properties [0].WaterLevel

<tbody id="properties_display">
    @foreach (var item in Model)
    {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.WaterLevel)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.WindSpeed)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.NumberOfMachine)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.FoodLevel)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Number)
        </td>
    </tr>
    }
</tbody>

connection.on("onFileChange", function (properties) {
    let table = document.getElementById("properties_display");
    // Remove all existing rows
    while (table.firstChild) {
        table.removeChild(table.firstChild);
    }

    // Add a new row for each item in properties
    for (let i = 0; i < properties.length; i++) {
        let tr = document.createElement("tr");

        let tdWaterLevel = document.createElement("td");
        tdWaterLevel.textContent = properties[i].waterLevel;
        tr.appendChild(tdWaterLevel);

        let tdWindSpeed = document.createElement("td");
        tdWindSpeed.textContent = properties[i].windSpeed;
        tr.appendChild(tdWindSpeed);

        let tdNumberMachine = document.createElement("td");
        tdNumberMachine.textContent = properties[i].numberMachine;
        tr.appendChild(tdNumberMachine);

        let tdFoodLevel = document.createElement("td");
        tdFoodLevel.textContent = properties[i].foodLevel;
        tr.appendChild(tdFoodLevel);

        let tdNumber = document.createElement("td");
        tdNumber.textContent = properties[i].number;
        tr.appendChild(tdNumber);

        table.appendChild(tr);
    }
});