Javascript 控制器操作返回模型后取消隐藏表的问题

我有一个隐藏表，由返回模型的控制器操作填充。我一直在尝试使用与以前相同的方法来取消隐藏表（通过JS切换），但是，一旦单击按钮，表就会在短时间内可见，但一旦控制器操作返回模型，表就会再次隐藏。下面是我的代码：

HTML:

带btn的表格

     @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "submitForm"}))
 {
    <div class="row">
        @*<input type="text" name="CasinoID" placeholder="Enter Casino ID" id="cIdSearch" />*@
        <div>
            Casino: @Html.DropDownList("CasinoID", Model.TerminalReceiptPostData.CasinoIdDDL, "Select Casino", new { id = "cIdSearch", @class = "custom-class-for-dropdown card" })
        </div>
        &nbsp;
        <div>
            Date: <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" onclick="toggleTable()"> Search Transactions</button>
        </div>
    </div>
}

JS:

有什么更好的方法来解决这个问题？？谢谢大家!

问题 看起来发生的情况是，默认情况下隐藏了表的div容器，并且在单击“搜索事务”按钮时尝试显示表

问题是单击该按钮，因为它是表单的“提交”按钮，将刷新页面。这意味着页面刷新后将不会调用切换代码。（它将在页面刷新之前调用，这就是为什么您会短暂地看到结果）

假设您希望隐藏表，除非其中有内容（例如，在没有加载数据时仅隐藏表），那么您有两个选项，我将在下面建议其中一个

建议的解决方案

• 从submit/“Search Transactions”按钮中删除“onClick”
• 删除onClick调用的函数
• 放置加载页面时激活的javascript
  • 切换div（

    $（“#receiptsmindiv”）.toggle（）；

    ）将其“取消隐藏”仅当数据存在于表中时，在文档加载javascript函数中

由于我没有模型类，因此无法告诉您如何确定是否存在数据，但是：

• 如果模型是一组单一的值（例如，一个“事务”），那么您可能有一个

  Id

  字段
  • 查找该

    Id

    字段是否不是其默认值。如果是

    int

    ，检查

    Id>0

    就足够了
• 如果模型是“事务”的集合，请查找集合本身的

  计数>0

---

希望这有帮助

您的按钮有两个功能：首先切换表的可见性，然后触发默认操作，即提交表单。你看到的是它的工作方式。但是你实际上想要的是什么行为呢？@ZorgoZ如果我把它放在其中任何一个中，它实际上也会做同样的事情。@ZorgoZ我只想在模型返回后显示表格并保持可见。

<hr />
<div class="row hidden" 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>

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

  function toggleTable() {

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

}