Hiding and un-hiding table div based off of data being returned

Question

I have a table that I want to be hidden there is no data to be displayed.

I have a controller action that returns data to display for the table. If data is returned, I want the table to be show, otherwise I want it hidden. I have tried several approaches to this and it seems like my fix is working (for a few seconds) but then once the controller returns the model, the table becomes hidden again. I am doing something wrong. How can I fix this? Below is my code:

HTML:

         @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "submitForm"}))
     {
            <div class="row">
                <div>
                    @Html.DropDownList("CasinoID", Model.TerminalReceiptPostData.CasinoIdDDL, "Select Casino", new { id = "cIdSearch", @class = "custom-class-for-dropdown card" })
                </div>
                &nbsp;
                <div>
                    <input id="datepicker" class="datepicker-base card" name="Date" placeholder="MM/DD/YYY" type="text"/>
                </div>
                &nbsp;
                <div>
                    <button type="submit" class="btn btn-sm btn-primary" id="search"> Search Transactions</button>
                </div>
            </div>
     }

     <hr />
        <div class="row" id="ReceiptsMainDiv">
            <div class="col-md-12" style="overflow-y:scroll">
                <table class="table table-striped table-hover table-bordered" id="terminalReceipts">
                    <thead>
                        <tr>
                            <th>Terminal ID</th>
                            <th>Local Transaction Time</th>
                            <th>Amount</th>
                            <th>Receipt</th>
                            <td class="hidden"></td>
                        </tr>
                    </thead>
                    <tbody>

                        @foreach (var item in Model.TransactionsTests)
                        {
                            <tr id="@String.Concat("rowIndex", Model.TransactionsTests.IndexOf(item))">
                                <td>@item.TerminalID</td>
                                <td>@item.TransactionTime</td>
                                <td>@item.Amount</td>
                                @*<td>@Html.ActionLink("View Receipt", "ViewReceipt", new { id = item.Id }, new { @class = "btn btn-primary btn-sm" }) <br /></td>*@
                                <td class="transactionID hidden">@item.Id</td>
                                <td>
                                    @if (item.ReceiptData == null)
                                    {
                                        <button class="btn btn-sm btn-primary viewReceipt" disabled>View Receipt</button>
                                    }
                                    else
                                    {
                                        <button class="btn btn-sm btn-primary viewReceipt" data-rowindex="@String.Concat("rowIndex", Model.TransactionsTests.IndexOf(item))">View Receipt</button>
                                    }
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
    </div>

Controller action:

      [HttpPost]
    public ActionResult Index(string CasinoID, DateTime Date)
    {

        //var id = Int32.Parse(Request.Form["CasinoID"].ToString());

        var Cid = Request.Form["CasinoID"];
        Cid = GetNumbers(Cid);

        var id = Int32.Parse(Cid);

        var model = TRBL.GetTransactionTestsData(id, Date);
        model.TerminalReceiptPostData = TRBL.GetCasinosDDL();
        return View(model);
    }

and finally my JS function:

    window.onload = function () {


    $("#ReceiptsMainDiv").toggle();

    var rowCount = $("#rowindex").length;

    console.log(rowCount);

    if (rowCount > 0) {
        $("#ReceiptsMainDiv").toggle();
     }

};

As you can see, the Form at the top contains the button, and the block below is the table that needs to be toggled.

Let me know if there is anything else you guys would need.

Answer 1

When you have results to show, <tr id="@String.Concat("rowIndex", Model.TransactionsTests.IndexOf(item))"> will not produce ids of "rowIndex" (unlike what you might be expecting). Instead, you will have "rowIndex0", "rowIndex1", etc. Therefore, after rowCount will be zero, and your will not toggle.