我有一个我想隐藏的表,没有要显示的数据。
我有一个 Controller Action ,它返回要显示在表格中的数据。如果返回数据,我希望显示该表,否则我希望它隐藏。我已经尝试了几种方法,看起来我的修复工作(几秒钟)但是一旦 Controller 返回模型,表就会再次隐藏。我做错了什么。我怎样才能解决这个问题?下面是我的代码:
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>
<div>
<input id="datepicker" class="datepicker-base card" name="Date" placeholder="MM/DD/YYY" type="text"/>
</div>
<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);
}
最后是我的 JS 函数:
window.onload = function () {
$("#ReceiptsMainDiv").toggle();
var rowCount = $("#rowindex").length;
console.log(rowCount);
if (rowCount > 0) {
$("#ReceiptsMainDiv").toggle();
}
};
如您所见,顶部的表单包含按钮,下面的 block 是需要切换的表格。
如果你们还需要什么,请告诉我。
最佳答案
当您有结果要显示时,<tr id="@String.Concat("rowIndex", Model.TransactionsTests.IndexOf(item))">
不会生成“rowIndex”的 ID(与您可能期望的不同)。相反,您将拥有“rowIndex0”、“rowIndex1”等。因此,在 rowCount
之后将为零,您将不会切换。
关于javascript - 根据返回的数据隐藏和取消隐藏表 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57119187/