Question

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

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

我有一个主视图，然后从那里通过ajax调用分别加载三个partialViews，该调用用定义的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”为空错误的情况。

在当前视图布局下，我什至尝试做些什么吗？最好只使用一个视图模型并将所有这些逻辑放在一个页面上，以使javascript更易于处理/实际运行，这样会更好吗？

Answer 1

您可以通过以下操作来实现：

为行创建局部视图。
带有某些唯一过滤器的隔离表可能是css类。
使用这些ID附加行。

在部分视图中更新表

1 个答案: