ASP.net MVC使用复选框值作为HTML代码中的布尔值

Question

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>

Answer 1

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