在部分視圖中更新表

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

您可以通過以下步驟實現：

1. 為行創建局部視圖。

2. 具有某些唯一過濾器的隔離表可能是css類。

3. 使用這些ID附加行。