javascript - 如何根据用于确定要显示的按钮的值在单击之前不知道的条件动态显示按钮？

Question

如果有人有更好的标题，请随意编辑。我从一位即将离开公司的开发人员那里继承了一个项目，我正在绞尽脑汁试图找到现有代码提供的问题的解决方案。

View 中的代码:

<div>
            <table class="table">
                <tr>
                    <th class="border-bottom border-top-0">Action</th>
                </tr>
                @foreach (Step actionItem in Model.Steps)
                {
                    @if (actionItem.HasRun == false)
                    {
                        <tr class="border-top-0">
                            <td>
                                @if (actionItem.ReturnsInfo == true)
                                {
                                    <input type="button" value="Run Check" onclick="loadProcessingFeedbackPartial('@actionItem.StepID', '@Model.Client.DatabaseConnectionString' )" />
                                }
                                else
                                {
                                    <input type="submit" value="Run Check" name="btnRunStoredProcedure" asp-action="CallStepStoredProcedure" asp-route-StepID="@actionItem.StepID" asp-route-StepCompleted="@actionItem.HasRun" />
                                }
                            </td>
                        </tr>
                        break;
                    }
                }
            </table>
        </div>

从按钮点击调用 Javascript:

<script type="text/javascript">
    function loadProcessingFeedbackPartial(x, y) {
        var url = '@Url.Action("ViewProcessingFeedBackPartial", "Client")';
        var stepId = x;
        var databaseConnectionString = y;
        $("#processingFeedbackPartialDiv").load(url, { stepId, databaseConnectionString },
            function () {
                $("#confirmButton").removeAttr("style");
            });
    }
</script>

Controller Action :

public IActionResult ViewProcessingFeedBackPartial(int StepId, string DatabaseConnectionString)
    {
        FeedbackDetails feedbackDetails = new FeedbackDetails();

        feedbackDetails.Data = _clientProcessingService.GetProcessingFeedbackDetails(StepId, DatabaseConnectionString);

        return PartialView("_ViewFeedback", feedbackDetails);
    }

View 中的按钮有一个转到 Javascript 函数的 Onclick 事件，该函数使用调用服务方法的 Controller 中的数据加载部分 View 。这就是问题所在。如果没有返回任何行，我想完全绕过正在绘制的部分。

所以我稍微更改了 Controller 操作以包含一个条件，如果 feedbackDetails.Data 有 0 行，则只调用服务中的不同方法，正常处理，但返回 View 而不是部分。

public IActionResult ViewProcessingFeedBackPartial(int StepId, string DatabaseConnectionString, int ClientId)
    {
        FeedbackDetails feedbackDetails = new FeedbackDetails();

        feedbackDetails.Data = _clientProcessingService.GetProcessingFeedbackDetails(StepId, DatabaseConnectionString);
        if(feedbackDetails.Data.Rows.Count == 0)
        {
            _clientProcessingService.RunProcessStepConfirmation(DatabaseConnectionString, StepId, ClientId, "No information returned, automatically proceeding to next step.");
            return RedirectToAction("Processing", new { Id = ClientId });
        }

        return PartialView("_ViewFeedback", feedbackDetails);
    }

这“有效”，除了因为在 View 中它是在加载部分的 Javascript 函数中调用的，无论如何， View 在该部分内部返回，而不是返回 View 。

但我不确定如何解决这个问题，因为如果不先单击按钮并尝试用数据填充该集合，我不知道它是空的(并跳过部分)还是有行(并绘制部分).

我尝试创建一个返回 bool 值的中间 Controller 操作，并尝试使用 javascript 函数内部的结果来绘制部分或基于 bool 跳过它，但我并不是最擅长 Javascript 所以我无法让它工作。

我不确定解决这个问题的方法是创建逻辑来显示多个按钮，这些按钮路由到不同的 Controller 操作或 javascript 函数，还是仅通过 Javascript 以某种方式处理它们。

解决这个问题的好方法是什么？

Answer 1

@Mkalafut，您的 jQuery 函数正在将 Controller 结果直接加载到“#processingFeedbackPartialDiv”中，而不管收到的结果如何。最好先将它拉入一个变量，然后添加一些简单的逻辑来决定下一步做什么。 Controller 可能会通过返回易于识别的空结果来提供帮助。例如

$.get("url", { stepId, databaseConnectionString }, function (data) {
    var result = data;
    // Some example conditional logic - adjust as required
    if (result != null){
        $("#processingFeedbackPartialDiv").html(result);
        $("#confirmButton").removeAttr("style");
    }
});

请记住，jQuery 加载和获取都只是 ajax 的简写函数，因此如果需要，您可以进一步自定义代码以获得所需的灵 active 。 https://api.jquery.com/jQuery.get/ https://api.jquery.com/load/