I want to use the checkbox value in the code in the view. This is the part where I check if the product is available, when it is available it wil be added to the table. When the checkbox is checked a product which isn't available will be added too.
I have searched for possible solutions but everytime I get stuck, not knowing what to do. Can somebody help me with this?
<div class="checkbox">
<label><input id="UnavailableProducts" name="UnavailableProducts" value="true" type="checkbox" />Laat niet beschikbare artikelen zien</label>
</div>
<div class="panel panel-default" style="margin-top: 25px; margin-bottom: 25px; min-width: 330px">
<!-- Default panel contents -->
<div class="panel-heading">Artikelen</div>
<!-- Table -->
<table class="table table-responsive">
<thead>
<tr>
<th>#</th>
<th>Artikelnr</th>
<th>Omschrijving</th>
<th>Aantal</th>
</tr>
</thead>
<tbody>
@{
if (Model != null)
{
DataFound = true;
int count = 0;
foreach (Article a in Model)
{
if (a.Available == true)
{
count++;
<tr class='clickable-row' data-url="@Url.Action("ArticleDetail", "Article", new { articleNumber = a.ArticleNumber} )">
<th scope="row">@count.ToString()</th>
<td>@Html.Encode(a.ArticleNumber)</td>
<td style="word-wrap: break-word;min-width: 50px;max-width: 160px;">@Html.Encode(a.Summary)</td>
<td>@Html.Encode(a.Stock)</td>
</tr>
}
}
}
else
{
DataFound = false;
}
}
</tbody>
</table>
I have found my solution. Javascript has a checkbox changed event which calls the form submit. This will call the HttpPost action in my controller and adds the value of the checkbox to a session["UnavailableProduct"] And this is what I use to check if the unavailable products needs to be shown or not.
Controller:
[HttpPost]
public ActionResult Articles(bool UnavailableProducts = false)
{
if (Session["employee"] != null)
{
Session["UnavailableProducts"] = UnavailableProducts;
List<Article> articles;
try
{
articles = system.OverviewArticles();
}
catch
{
articles = null;
ModelState.AddModelError("DatabaseError", "Database error de data kon niet geladen worden!");
}
return View(articles);
}
else
{
return RedirectToAction("Login", "Home");
}
}
View:
<p style="margin-top: 25px;">Op deze pagina vind je een overzicht van alle artikelen. Om meer informatie te krijgen, of een wijzing wilt maken kun je op de regel klikken van het artikel.</p>
<div class="checkbox">
<form method="post" action="">
<label><input class="checkboxChange" id="UnavailableProducts" name="UnavailableProducts" value="true" type="checkbox"
@{if (Session["UnavailableProducts"] != null && Session["UnavailableProducts"].ToString() == "True") { CheckIfChecked = "checked"; } } @CheckIfChecked />Laat niet beschikbare artikelen zien</label>
</form>
</div>
<div class="panel panel-default" style="margin-top: 25px; margin-bottom: 25px; min-width: 330px">
<!-- Default panel contents -->
<div class="panel-heading">Artikelen</div>
<!-- Table -->
<table class="table table-responsive">
<thead>
<tr>
<th>#</th>
<th>Artikelnr</th>
<th>Omschrijving</th>
<th>Aantal</th>
</tr>
</thead>
<tbody>
@{
if (Model != null)
{
DataFound = true;
int count = 0;
foreach (Article a in Model)
{
if (a.Available == true && Session["UnavailableProducts"].ToString() == "False" || Session["UnavailableProducts"].ToString() == "True")
{
count++;
<tr class='clickable-row' data-url="@Url.Action("ArticleDetail", "Article", new { articleNumber = a.ArticleNumber })">
<th scope="row">@count.ToString()</th>
<td>@Html.Encode(a.ArticleNumber)</td>
<td style="word-wrap: break-word;min-width: 50px;max-width: 160px;">@Html.Encode(a.Summary)</td>
<td>@Html.Encode(a.Stock)</td>
</tr>
}
}
}
else
{
DataFound = false;
}
}
</tbody>
</table>
</div>
<center><input style="max-width:450px; margin-bottom: 25px" type="button" class="btn btn-primary btn-sm btn-block btn-site" value="Artikel toevoegen" onclick="location.href='@Url.Action("AddArticle", "Article")'" /></center>
@{ if (DataFound == false)
{
<script>alert("Er is geen data gevonden!")</script> }
}
JavaScript:
$(document).ready(function ($) {
$(".checkboxChange").click(function () {
$('form').submit();
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.