想要为电子商务网站AspNet Core制作过滤器产品

Question

帮助，想要为电子商务网站Asp.Net Core和剃须刀页面制作具有多个参数（类别）的过滤器产品 不带文本框，我可以做到这一点，我需要带复选框或可下拉菜单 所以请帮助我完成了大部分网站，我尝试了但我做不到。 然后我用3个文本框进行了搜索操作

    `[HttpGet]
    public async Task<ActionResult> Search(string Id, string Id2, string Id3)
    {
        var Result = from Res in _context.ItEntity.Include(i => i.CaRelation)
                     .Include(i => i.FaRelation)
                     .Include(i => i.ITImages)
                     select Res;
        //var Result = _context.ItEntity.AsQueryable();
        if (!string.IsNullOrEmpty(Id))
        {
            Result = Result.Where(x => x.ITName.Contains(Id));
        }
        if (!string.IsNullOrEmpty(Id2))
        {
            Result = Result.Where(x => x.FaRelation.FaName == Id2);
        }
        if (!string.IsNullOrEmpty(Id3))
        {
            Result = Result.Where(x => x.CaRelation.CaName == Id3);
        }
        return PartialView("_Search", await Result.ToListAsync());
    }

`

Answer 1

以下是一个有效的演示，演示如何使用DropdownList来过滤结果并以partial view进行显示，如下所示：

型号：

public class ItEntity
{
    public int Id { get; set; }
    public string ITName { get; set; }
    public string Details { get; set; }
    public CaRelation CaRelation { get; set; }
    public FaRelation FaRelation { get; set; }
    public ITImages ITImages { get; set; }
}
public class CaRelation
{
    public int Id { get; set; }
    public string CaName { get; set; }
}
public class FaRelation
{
    public int Id { get; set; }
    public string FaName { get; set; }
}
public class ITImages
{
    public int Id { get; set; }
    public string ImName { get; set; }
}

Index.cshtml：

@model IEnumerable<ItEntity>
<form method="get" asp-action="Search">
    <div class="form-group">
        <label class="control-label">ITName</label>
        <select id="Id" asp-items="ViewBag.IT"></select>
    </div>
    <div class="form-group">
        <label class="control-label">FaName</label>
        <select id="Id2" asp-items="ViewBag.FaName"></select>
    </div>
    <div class="form-group">
        <label class="control-label">CaName</label>
        <select id="Id3" asp-items="ViewBag.CaName"></select>
    </div>
    <div class="form-group">
        <input type="button" id="btnSearch" value="Search" class="btn btn-primary"/>
    </div>
</form>
<div id="data"></div>
@section Scripts
{
    <script>
        $(function () {
            var filters = {
            Id: null,
            Id2: null,
            Id3: null
            };
            GetData(filters);
        });
        $('#btnSearch').on('click', function (e) {
            var filters = {
                Id: $('#Id').val(),
                Id2: $('#Id2').val(),
                Id3: $('#Id3').val()
            };
            GetData(filters);
        });
        function GetData(filters) {
            $.ajax({
                url: '/Tests/Search',
                type: 'Get',
                cache: false,
                async: true,
                dataType: "html",
                data : filters
                })
                .done(function (result) {
                $('#data').html(result);
                }).fail(function (xhr) {
                console.log('error : ' + xhr.status + ' - ' + xhr.statusText + ' - ' + xhr.responseText);
                });

        }
    </script>
}

_Search.cshtml：

注意：请确保部分视图位于正确的文件夹中，请参阅here。

@model IEnumerable<ItEntity>
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.ITName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.FaRelation.FaName)               
            </th>
            <th>
                @Html.DisplayNameFor(model => model.CaRelation.CaName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Details)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.ITName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.FaRelation.FaName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.CaRelation.CaName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Details)
                </td>
            </tr>
        }
    </tbody>
</table>

控制器：

public class TestsController : Controller
{
    private readonly YourDbContext _context;

    public TestsController(YourDbContext context)
    {
        _context = context;
    }
    // GET: Tests
    public async Task<IActionResult> Index()
    {

        ViewBag.IT = new SelectList(_context.ItEntity.Select(i => i.ITName).ToList());
        ViewBag.FaName = new SelectList(_context.FaRelation.Select(i => i.FaName).ToList());
        ViewBag.CaName = new SelectList(_context.CaRelation.Select(i => i.CaName).ToList());
        return View();
    }
    [HttpGet]
    public async Task<ActionResult> Search(string Id, string Id2, string Id3)
    {
        var Result = from Res in _context.ItEntity.Include(i => i.CaRelation)
                     .Include(i => i.FaRelation)
                     .Include(i => i.ITImages)
                     select Res;

        if (!string.IsNullOrEmpty(Id))
        {
            Result = Result.Where(x => x.ITName.Contains(Id));
        }
        if (!string.IsNullOrEmpty(Id2))
        {
            Result = Result.Where(x => x.FaRelation.FaName == Id2);
        }
        if (!string.IsNullOrEmpty(Id3))
        {
            Result = Result.Where(x => x.CaRelation.CaName == Id3);
        }
        return PartialView("_Search", await Result.ToListAsync());
    }
}

结果：