在局部视图中更新表

Question

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

我在视图的格式设置方面遇到了问题，我对 javascript 和 MVC 的了解还不足以知道该往哪个方向发展。

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

<div class="container-fluid">

    <div id="preTestSteps">

    </div>

    <div id="mainTestSteps">

    </div>

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

使用以下函数加载这些部分视图；

$(document).ready(function() {
    var testSuiteExecutionId = @(Model.TestSuiteExecutionId);
    var testSuiteId = @(Model.TestSuiteId);

    loadTestStepResultsPartialView(testSuiteExecutionId, testSuiteId, 1, "preTestSteps");
    loadTestStepResultsPartialView(testSuiteExecutionId, testSuiteId, 0, "mainTestSteps");
    loadTestStepResultsPartialView(testSuiteExecutionId, testSuiteId, 2, "postTestSteps");

});


function loadTestStepResultsPartialView( testSuiteExecutionId, testSuiteId, testStepType, divId) {
    $.ajax({
        type: 'POST',
        url: '@Url.Action("DetailsTestStepResults", "TestSuiteExecutions")',
        data: { 'testSuiteExecutionId': testSuiteExecutionId, 'testSuiteId': testSuiteId, 'testStepType': testStepType },
        success: function(data) {
            $("#" + divId).html(data);
        }
    });
}

这是按预期工作的。

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

从主视图加载的部分视图；

<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>

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

日志局部视图

@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>
}

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

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

2) 我什至如何附在桌子上？我尝试使用静态数据，但在尝试访问局部视图中的表以证明我实际上可以添加行时，我在调试菜单中得到 'getElementsByTagName' is null 错误。

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

Answer 1

您可以通过以下方式实现：

1. 为行创建局部视图。

2. 具有一些独特过滤器的隔离表可能是 css 类。

3. 使用这些 id 来追加行。