Javascript 在部分视图中更新表

目标：尝试创建一个功能，其中使用数据库中添加的行更新表

我遇到了一个关于视图如何格式化的问题，我对javascript和MVC的知识还不足以知道应该朝哪个方向发展

我有主视图，从那里我通过一个ajax调用分别加载三个PartialView，该调用使用定义的ID填充div

<div class="container-fluid">

    <div id="preTestSteps">

    </div>

    <div id="mainTestSteps">

    </div>

    <div id="postTestSteps"></div>
</div>

这是工作的预期

在这些局部视图中，视图的模型是视图模型的列表，这些视图模型通过其中定义的日志列表进行迭代

从主视图加载的局部视图

<div class="container-fluid">

    @foreach (var testStep in Model)
    {
        <div class="row">
            <div class="col-sm-12">
                <h5 style="background-color: beige; padding: 5px">
                    @Html.DisplayFor(modelItem => testStep.TestStepName)
                </h5>
            </div>
        </div>

        <div>
                @Html.Partial("~/Views/TestSuiteExecutions/TestStepLogsPartialView.cshtml", testStep.TestStepLogs)
        </div>

        <div>
                @Html.Partial("~/Views/TestSuiteExecutions/TestStepLogsPartialView.cshtml", testStep.VerificationLogs)
            <div style="padding-bottom: 25px" class="row"></div>
        </div>
    }
</div>

@foreach（模型中的var testStep）
{
@DisplayFor（modelItem=>testStep.TestStepName）
@Html.Partial（“~/Views/TestSuiteExecutions/TestStepLogsPartialView.cshtml”，testStep.TestStepLogs）
@Html.Partial（“~/Views/TestSuiteExecutions/TestStepLogsPartialView.cshtml”，testStep.VerificationLogs）
}

这就是事情开始崩溃的地方。此部分视图加载的部分视图包含日志和表

日志部分视图

@if (Model.Count > 0)
{
    var accordianStepItemName = "accordianStep" + Model[0].TestStepId + Model[0].MessageType;
    var collapseStepItemName = "collapseStep" + Model[0].TestStepId + Model[0].MessageType;

    <!--TODO: Use PartialViews-->
    <div class="row">
        <div id="accordion" role="tablist" style="margin-left: 30px" aria-multiselectable="true">
            <div id="transparent-card" class="card" style="border-color: white;">

                <h6 class="mb-0">
                    <a data-toggle="collapse" data-parent="#@accordianStepItemName" href="#@collapseStepItemName" aria-expanded="false" aria-controls="@collapseStepItemName">
                        <i class="fa fa-plus"></i>
                        <i class="fa fa-minus"></i>
                        @(Model[0].MessageType == false ? Html.Raw("Verification Log") : Html.Raw("Execution Log"))
                    </a>
                </h6>

                <div id="@collapseStepItemName" class="collapse col-sm-12" role="tabpanel" aria-labelledby="headingOne">
                    <div class="card-body">
                        <table class="table" id="logTable_@Model[0].TestStepId@Model[0].MessageType">
                            <thead>
                            <tr>
                                <th width="5%"></th>
                                <th width="20% !important">Time</th>
                                <th width="75%">Message</th>
                            </tr>
                            </thead>
                            <tbody>
                                @foreach (var logEntry in Model)
                                {
                                    <tr id="tableRow_@logEntry.TestStepId@logEntry.MessageType">
                                        <td><img width="20" height="20" src="~/Content/Images/@HtmlUtilities.GetTestSuiteExecutionIconName(logEntry.LogType)" /></td>
                                        <td><i>@logEntry.TimeStamp</i></td>
                                        <td><i>@Html.Raw(HtmlUtilities.GetHtmlFormattedString(logEntry.Message))</i></td>
                                    </tr>
                                }
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
}

@if（Model.Count>0）
{
var accorbianstepitemname=“accorbianstep”+模型[0]。TestStepId+模型[0]。消息类型；
var collapseStepItemName=“collapseStep”+模型[0]。TestStepId+模型[0]。消息类型；
时间
消息
@foreach（模型中的var logEntry）
{
@logEntry.TimeStamp
@Html.Raw（htmluties.GetHtmlFormattedString（logEntry.Message））
}
}

我正在尝试编写一个javascrtipt方法，该方法将调用ajax调用以在列表中显示新的日志模型，然后向表中添加新行，但我遇到了两个问题

1） 如何将部分视图表id传递给javascript函数以执行更新？如果我没有唯一的ID（因为这是循环的，并且它需要基于我试图更新的内容的唯一ID），那么我甚至无法在脚本中找到要附加新行的元素

2） 我怎么才能连桌子都贴上？我曾尝试使用静态数据，但在尝试访问部分视图中的表以证明我可以实际添加行时，在调试菜单中得到的“getElementsByTagName”为空错误

---

我正在尝试的是当前视图的布局吗？简单地使用一个视图模型，并将所有这些逻辑放在一个页面上，使javascript更易于处理/实际运行，这样会更好吗？

您可以通过以下方式实现这一点：

为行创建局部视图

css类可能会使用一些独特的过滤器隔离表

使用这些id来追加行

---

现在还不完全清楚您想做什么，但我可以说id必须是文档的唯一id，所以像“accordion”和“transparent card”这样的id应该被类或

数据id

属性所取代。似乎如果要刷新表，只需使用适当的值调用

loadTestStepResultsPartialView

，它就会更新与表关联的元素。目标是更新表而不刷新整个部分视图，这样，您就可以在TestStep下打开table选项卡，并在脚本从数据库获取新日志时看到日志，然后将这些日志作为新行添加到表中。这样就不会有“闪烁”或任何中断的外观观众。

@if (Model.Count > 0)
{
    var accordianStepItemName = "accordianStep" + Model[0].TestStepId + Model[0].MessageType;
    var collapseStepItemName = "collapseStep" + Model[0].TestStepId + Model[0].MessageType;

    <!--TODO: Use PartialViews-->
    <div class="row">
        <div id="accordion" role="tablist" style="margin-left: 30px" aria-multiselectable="true">
            <div id="transparent-card" class="card" style="border-color: white;">

                <h6 class="mb-0">
                    <a data-toggle="collapse" data-parent="#@accordianStepItemName" href="#@collapseStepItemName" aria-expanded="false" aria-controls="@collapseStepItemName">
                        <i class="fa fa-plus"></i>
                        <i class="fa fa-minus"></i>
                        @(Model[0].MessageType == false ? Html.Raw("Verification Log") : Html.Raw("Execution Log"))
                    </a>
                </h6>

                <div id="@collapseStepItemName" class="collapse col-sm-12" role="tabpanel" aria-labelledby="headingOne">
                    <div class="card-body">
                        <table class="table" id="logTable_@Model[0].TestStepId@Model[0].MessageType">
                            <thead>
                            <tr>
                                <th width="5%"></th>
                                <th width="20% !important">Time</th>
                                <th width="75%">Message</th>
                            </tr>
                            </thead>
                            <tbody>
                                @foreach (var logEntry in Model)
                                {
                                    <tr id="tableRow_@logEntry.TestStepId@logEntry.MessageType">
                                        <td><img width="20" height="20" src="~/Content/Images/@HtmlUtilities.GetTestSuiteExecutionIconName(logEntry.LogType)" /></td>
                                        <td><i>@logEntry.TimeStamp</i></td>
                                        <td><i>@Html.Raw(HtmlUtilities.GetHtmlFormattedString(logEntry.Message))</i></td>
                                    </tr>
                                }
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
}