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

Question

If someone has a better title feel free to edit. I inherited a project from a developer who is leaving the company and I'm scratching my head trying to find a solution to a problem the existing code provides.

Code from the 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 being called from the button click:

<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);
    }

The button in the view has an Onclick event that goes to the Javascript function, which loads a partial view with the data from the controller calling a service method. Here's where the problem is. If no rows are returned, I want to bypass the partial being drawn entirely.

So I changed the controller action around a bit to include a condition where if the feedbackDetails.Data has 0 rows to just call a different method from the service, process as normal, but return the View instead of a partial.

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);
    }

This "worked", except since in the view it's being called in a Javascript function that loads a partial regardless, the view is returned inside that partial instead of the view being returned.

But I'm unsure how to fix this because without first clicking the button and attempting to populate that collection with data, I don't know if it's empty (and skip the partial) or it has rows (and draw the partial).

I attempted creating an intermediary controller action that returns a boolean and attempted to use the result of that inside the javascript function to either draw the partial or skip it based on the bool, but I'm not really the greatest at Javascript so I wasn't able to get it to work.

I'm unsure if the way to solve this involves creating logic that displays multiple buttons that route to different controller actions or javascript functions or just handling it all via Javascript somehow.

What would be a good way to go about solving this?

Answer 1

@Mkalafut, your jQuery function is loading the controller result directly into "#processingFeedbackPartialDiv" regardless of the result received. Better to pull this initially into a variable, then add some simple logic to decide what to do next. Potentially the controller can help by returning a null result that is easy to identify. eg

$.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");
    }
});

Remember, jQuery load & get are both just shorthand functions for ajax, so if needs be you can customise the code further to get the flexibility you need. https://api.jquery.com/jQuery.get/ https://api.jquery.com/load/