0
我有一個ASP.NET應用程序，它有一個頁面中的產品列表與相關的詳細信息和狀態列（位域 - 複選框）。它完美地工作，我可以使用Ajax將狀態從true更改爲false或反之亦然。雖然這樣做，我保持CheckBox的狀態意味着如果它是真的，那麼它仍然被檢查，否則未被選中。請參閱下面除了紅色突出顯示的圖像（還有一兩件事 - 真正意味着活躍和虛假裝置不起作用的產品在這種情況下）：複選框要像撥動開關
現在我試圖爲使複選框成爲撥動開關以及保持的複選框像這樣的變化 - BootStrap Toggle Switches
我不知道如何做到這一點，並試圖按照本作的複選框使用類，如下所示爲撥動開關的工作 - jQuery Toggle Switches
<script>
$(document).ready(function() {
$('.toggle-checkbox').btnSwitch({
Theme: 'Light',
OnText: "On",
OffText: "Off",
OnValue: true,
OffValue: false
});
});
</script>
注意：我必須保持圖像中顯示的複選框的狀態不爲紅色突出顯示，如真，檢查，反之亦然。很高興知道這是否可以用切換開關來完成。
數據庫腳本：
CREATE TABLE [dbo].[Products](
[Id] [int] IDENTITY(1,1) PRIMARY KEY,
[ProductName] [nvarchar](MAX) NOT NULL,
[Time_Posted] [nvarchar](MAX) NOT NULL,
[Status] [bit] NOT NULL
)
INSERT INTO Products VALUES
('Denim', '7:30:10 PM', 1),
('Pringles', '8:00:00 PM', 1)
型號：
public class Product
{
public int Id { get; set; }
public string ProductName{ get; set; }
public string Time_Posted { get; set; }
public bool Status { get; set; }
}
控制器：
//Get details of the products
[HttpGet]
public ActionResult Index()
{
MainDbContext db = new MainDbContext();
var con = (from c in db.Products
select c).ToList();
return View(con);
}
//Update status of the products like active or inactive
[HttpPost]
public JsonResult UpdateStatus(int id, bool status)
{
MainDbContext db = new MainDbContext();
var result = db.Lists.Find(id);
if (result != null)
{
result.Status = status;
db.Entry(result).State = EntityState.Modified;
db.SaveChanges();
}
return Json(true);
}
查看：
@model SampleApp.Models.Product
@{
ViewBag.Title = "Index";
}
<link href="~/Scripts/jquery.btnswitch.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.1.1.slim.min.js"></script>
<script src="~/Scripts/jquery.btnswitch.js"></script>
<div id="divData">
<table class="table table-bordered table-condensed" id="data">
<thead>
<tr>
<th style="text-align:center;" class="hide">ID</th>
<th style="text-align:center;">Products</th>
<th style="text-align:center;">Time Posted</th>
<th style="text-align:center;">Status</th>
</tr>
</thead>
<tbody>
@for (int i = 0; i < Model.Items.Count; i++)
{
<tr>
<td id="ID" style="text-align: center;" class="hide">@Html.DisplayFor(modelItem => Model.Items[i].Id)</td>
<td style="text-align: center;">@Html.DisplayFor(modelItem => Model.Items[i].ProductName)</td>
<td style="text-align: center;">@Html.DisplayFor(modelItem => Model.Items[i].Time_Posted)</td>
<td style="text-align: center;">@Html.CheckBoxFor(modelItem => Model.Items[i].Status, new { @class = "toggle-checkbox", data_id = Model.Items[i].Id })</td>
</tr>
}
</tbody>
</table>
</div>
<script type="text/javascript">
var url = '@Url.Action("UpdateStatus")';
$('.toggle-checkbox').click(function() {
var isChecked = $(this).is(':checked'); //CheckBox checked - True or false
var id = $(this).data('id'); //Get the id of that specific checked row
$.post(url, { id: id, status: isChecked }, function (response) {
if (response) {
alert("Status changed");
}
})
});
</script>
<script>
$(document).ready(function() {
$('.toggle-checkbox').btnSwitch({ //This is the script for toggling
Theme: 'Light',
OnText: "On",
OffText: "Off",
OnValue: true,
OffValue: false
});
});
</script>
完美工作，非常感謝。我可以切換切換並在數據庫表中進行更改。但有一件事 - 無論何時刷新頁面，都無法保持其狀態。例如：如果位域是真的，那麼切換開關應保持綠色，反之亦然。我試圖使用CSS來保持狀態像這樣 - ** if（Model.Items [i] .Status == true）{
} **。但沒有奏效。有什麼更好的想法我將分享Ajax以瞭解是否有改進的機會。 –我得到的CSS類檢查瀏覽器中的元素，並希望有一種方法，使其工作，我的意思是保持或保持在前端的狀態。 –
我更新了切換狀態的代碼。我希望能幫到你。 –