Question

我正在做票务申请，我正在使用复选框过滤项目。首先，页面加载数据库中的每个项目，视图将其显示在表格中。然后，用户可以单击复选框，视图仅显示所选类别。它应该在复选框点击时更新。

控制器操作：

 public ActionResult Display(int[] checkId)
        {
            if (checkId == null)
            {
                DispDisplayVM viewModel = new DispDisplayVM
                {
                    Jidlos = db.Jidlos.ToList(),
                    //Jidlos = (from Jidlo jidlo in db.Jidlos where checkId.Contains(jidlo.CategoryID) select jidlo).ToList(),
                    Categories = db.Categories.ToList()

                };

                return View(viewModel);
            }
            else
            {
                DispDisplayVM viewModel = new DispDisplayVM
                {
                    //Jidlos = db.Jidlos.ToList(),
                    Jidlos = (from Jidlo jidlo in db.Jidlos where checkId.Contains(jidlo.CategoryID) select jidlo).ToList(),
                    Categories = db.Categories.ToList()

                };

                return View(viewModel);
            }
}

控制器的数据由ajax传递。它可以是一个值或一个数组。然后有一个LINQ查询来过滤数据库。

查看：

@using jidloApp.Classes
@using jidloApp.Models
@model DispDisplayVM


@{
    ViewBag.Title = "Display";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Display</h2>

<div class="container">
    <a href="@Url.Action("Create", "Disp")" class="btn btn-default pull">Pridat novy recept</a>
</div>

<div class="btn-group" data-toggle="buttons">
    <label class="form-check-label">
        <input class="form-check-input" type="checkbox" value="1" name="checkId">
        Kuřecí
    </label>
    <label class="form-check-label">
        <input class="form-check-input" type="checkbox" value="2" name="checkId">
        Vepřové
    </label>
    <label class="form-check-label">
        <input class="form-check-input" type="checkbox" value="3" name="checkId">
        Hovězí
    </label>
    <label class="form-check-label">
        <input class="form-check-input" type="checkbox" value="4" name="checkId">
        Krůtí
    </label>
    <label class="form-check-label">
        <input class="form-check-input" type="checkbox" value="5" name="checkId">
        Vegetariánské
    </label>
</div>

    <table class="table">
        <thead>
            <tr>
                <th>Nazev Jidla</th>
                <th>Kategorie</th>
                <th>Akce</th>

            </tr>
        </thead>
        <tbody>
             @foreach (Jidlo jidlo in Model.Jidlos)
             {
                 <tr>
                     <td>
                         @Html.DisplayFor(modelItem => jidlo.name)
                     </td>
                     <td>
                         @Html.DisplayFor(modelItem => jidlo.Category.popis)
                     </td>
                     <td>
                         @Html.ActionLink("Edit", "Edit", new { id = jidlo.JidloID }) |
                         @Html.ActionLink("Details", "Details", new { id = jidlo.JidloID }) |
                         @Html.ActionLink("Delete", "Delete", new { id = jidlo.JidloID })
                    </td>
                 </tr>
             }
        </tbody>
</table>



<script>
    $(document).ready(function () {
        $('input[name="checkId"]').click(function () {
            getSelectedCheckBoxes();
        });

        var getSelectedCheckBoxes = function () {
            var idArray = [];
            $('input[name="checkId"]:checked').each(function () {
                idArray.push($(this).attr("value"));
            });
            $.ajax({
                url: '@Url.Action("Display", "Disp")',
                type: "POST",
                data: { checkId: idArray },
                dataType: "json",
                traditional: true,
                success: function () {
                    alert("ajax request to server succeed");
                }
            });

    };
    });


</script>

数据过滤工作正常，请求的数据正确传递到视图中。

什么不起作用是当我点击复选框时，表格保持与以前相同并且不更新。我真的找不到这里的错误。你能告诉我该怎么做吗？

当我在数据库中创建新项目或删除它时，表格会更新...

Answer 1

我认为你需要一个View和一个PartialView。控制器：

public ActionResult Index()
{
   return View();
}

public PartialViewResult Display(int[] checkId)
{
   DispDisplayVM viewModel = null;
   [youre code]

   return PartialView(viewModel)
}

索引视图：

@{
    ViewBag.Title = "Display";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Display</h2>

<div class="container">
    <a href="@Url.Action("Create", "Disp")" class="btn btn-default pull">Pridat novy recept</a>
</div>

<div class="btn-group" data-toggle="buttons">
    <label class="form-check-label">
        <input class="form-check-input" type="checkbox" value="1" name="checkId">
        Kuřecí
    </label>
    <label class="form-check-label">
        <input class="form-check-input" type="checkbox" value="2" name="checkId">
        Vepřové
    </label>
    <label class="form-check-label">
        <input class="form-check-input" type="checkbox" value="3" name="checkId">
        Hovězí
    </label>
    <label class="form-check-label">
        <input class="form-check-input" type="checkbox" value="4" name="checkId">
        Krůtí
    </label>
    <label class="form-check-label">
        <input class="form-check-input" type="checkbox" value="5" name="checkId">
        Vegetariánské
    </label>
</div>

<div id="data-container"></div>

<script>
    $('input[name="checkId"]').on("click",function () {
        var idArray = [];
        $("input[name="checkId"]:checked").each(function () {
            idArray.push($(this).attr("value"));
        });

        $("#data-container").load("@Url.Action("Display", "Disp")",{ checkId: idArray });
    });
</script>

显示视图：

@using jidloApp.Classes
@using jidloApp.Models
@model DispDisplayVM

<table class="table">
    <thead>
        <tr>
            <th>Nazev Jidla</th>
            <th>Kategorie</th>
            <th>Akce</th>

        </tr>
    </thead>
    <tbody>
            @foreach (Jidlo jidlo in Model.Jidlos)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => jidlo.name)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => jidlo.Category.popis)
                    </td>
                    <td>
                        @Html.ActionLink("Edit", "Edit", new { id = jidlo.JidloID }) |
                        @Html.ActionLink("Details", "Details", new { id = jidlo.JidloID }) |
                        @Html.ActionLink("Delete", "Delete", new { id = jidlo.JidloID })
                </td>
                </tr>
            }
    </tbody>
</table>

代码编写＆＃34;飞行＆＃34;

使用复选框过滤后，asp.net mvc表不会更新

1 个答案: