C# mvc上的DropDownList过滤卡片/盒子的显示，但我无法显示所有加载的卡片或默认选择的卡片

我有一个局部视图，当前可以显示三个卡片/方框，其中包含关于不同案例研究的信息片段。我希望此页面能够加载并显示所有卡片，但同时还具有一个下拉菜单，该菜单可以根据每个卡片的CaseStudyIndustry属性对其进行筛选，并能够在选择行业/默认选择时返回显示所有卡片

我从中得到了很多帮助，但我似乎无法让所有的卡片都显示为onload或选择默认的DropDownList项。这件事我已经坚持了好几个星期了

这是我的密码：

局部视图：

@model IEnumerable<KenCast.Models.CaseStudies>
@foreach (var item in Model)
{
    await Html.RenderPartialAsync("_CaseStudyCard.cshtml", item);
}

控制器：

public IActionResult Index()
{
    var industries = new SelectList(_context.CaseStudies.Select(c => c.CaseStudyIndustry).Distinct().ToList());
    ViewBag.Industries = industries;
    return View();
}

public PartialViewResult CaseStudiesByIndustryPartial(string id)
{
    return PartialView(
        _context.CaseStudies.Where(c => c.CaseStudyIndustry == id).OrderBy(c => c.CaseStudyDate)
            .ThenBy(c => c.CaseStudyTitle).ToList());    
}

---

任何帮助都将不胜感激。谢谢

根据斯蒂芬·穆克的提示，我们解决了这个问题。dropbox中选择的第一个项目的值是SelectanIndustry，因此我在选择SelectanIndustry时使用if语句更改显示的卡片

控制器中的代码现在如下所示：

 //Responsible for filtering case studies when item in DropDownList is selected. 
    public PartialViewResult CaseStudiesByIndustryPartial(string id)
    {
        if (id == "Select an industry") return PartialView(
            _context.CaseStudies.OrderByDescending(c => c.CaseStudyDate)
                .ThenBy(c => c.CaseStudyTitle).ToList());

        else return PartialView(
            _context.CaseStudies.Where(c => c.CaseStudyIndustry == id).OrderByDescending(c => c.CaseStudyDate)
                 .ThenBy(c => c.CaseStudyTitle).ToList());
    }

  namespace KenCast.ViewComponents
{
    public class CaseStudiesViewComponent : ViewComponent
    {
        //allows for data access
        private readonly ApplicationDbContext _context;

    public CaseStudiesViewComponent(ApplicationDbContext c)
    {
        _context = c;
    }

    public Task<IViewComponentResult> InvokeAsync()
    {
        var casestudies = (from cs in _context.CaseStudies.ToList()
                          .OrderByDescending(cs => cs.CaseStudyDate)
                          .ThenBy(cs => cs.CaseStudyTitle)
                           select cs).ToList();

        return Task.FromResult<IViewComponentResult>(View(casestudies));
    }

}

 <h1>@ViewData["Title"]</h1>
<fieldset>
    <div>
        @Html.DropDownList("Industries", "Select an industry")
    </div>
    <br />
    <div id="target"> @* Loads data from CaseStudiesViewComponent *@
        @await Component.InvokeAsync("CaseStudies")
    </div>
    <div id="log">
    </div>
</fieldset>

<h3>For development only</h3>
<p>This link below to create new application is for development only. Will change once Identity is added to this app.</p>
<p>
    <a asp-action="Create">Create New</a>
</p>

@* Script from: http://weblogs.thinktecture.com/cnagel/2011/06/filter-and-display-data-with-aspnet-mvc-part-2partial-views-and-jquery.html *@
<script type="text/javascript">
    $(document).ready(function () {
        $("#Industries").change(function () {
            $("#log").ajaxError(function (event, jqxhr, settings, exception) {
                alert(exception);
            });
            //loads all cards from all industries
            //Changes cards by industry when selected from dropdown menu
            var industrySelected = $("select option:selected").text();
            $.get('@Url.Action("CaseStudiesByIndustryPartial")',
                  { id: industrySelected }, function (data) {
                      $("#target").html(data);
                  });
        });
    });
</script>

不确定这是否是最优雅的方式，但它是有效的！如果有人对如何编写此代码而不重复代码有其他建议，请让我知道

控制器中的代码更改了视图中的卡片，但仅在我选择了另一个行业，然后选择了一个行业后才显示所有卡片

最后，我创建了一个ViewComponent，在加载页面时加载了所有卡片。ViewComponent的最终外观如下所示：

 //Responsible for filtering case studies when item in DropDownList is selected. 
    public PartialViewResult CaseStudiesByIndustryPartial(string id)
    {
        if (id == "Select an industry") return PartialView(
            _context.CaseStudies.OrderByDescending(c => c.CaseStudyDate)
                .ThenBy(c => c.CaseStudyTitle).ToList());

        else return PartialView(
            _context.CaseStudies.Where(c => c.CaseStudyIndustry == id).OrderByDescending(c => c.CaseStudyDate)
                 .ThenBy(c => c.CaseStudyTitle).ToList());
    }

  namespace KenCast.ViewComponents
{
    public class CaseStudiesViewComponent : ViewComponent
    {
        //allows for data access
        private readonly ApplicationDbContext _context;

    public CaseStudiesViewComponent(ApplicationDbContext c)
    {
        _context = c;
    }

    public Task<IViewComponentResult> InvokeAsync()
    {
        var casestudies = (from cs in _context.CaseStudies.ToList()
                          .OrderByDescending(cs => cs.CaseStudyDate)
                          .ThenBy(cs => cs.CaseStudyTitle)
                           select cs).ToList();

        return Task.FromResult<IViewComponentResult>(View(casestudies));
    }

}

 <h1>@ViewData["Title"]</h1>
<fieldset>
    <div>
        @Html.DropDownList("Industries", "Select an industry")
    </div>
    <br />
    <div id="target"> @* Loads data from CaseStudiesViewComponent *@
        @await Component.InvokeAsync("CaseStudies")
    </div>
    <div id="log">
    </div>
</fieldset>

<h3>For development only</h3>
<p>This link below to create new application is for development only. Will change once Identity is added to this app.</p>
<p>
    <a asp-action="Create">Create New</a>
</p>

@* Script from: http://weblogs.thinktecture.com/cnagel/2011/06/filter-and-display-data-with-aspnet-mvc-part-2partial-views-and-jquery.html *@
<script type="text/javascript">
    $(document).ready(function () {
        $("#Industries").change(function () {
            $("#log").ajaxError(function (event, jqxhr, settings, exception) {
                alert(exception);
            });
            //loads all cards from all industries
            //Changes cards by industry when selected from dropdown menu
            var industrySelected = $("select option:selected").text();
            $.get('@Url.Action("CaseStudiesByIndustryPartial")',
                  { id: industrySelected }, function (data) {
                      $("#target").html(data);
                  });
        });
    });
</script>

}

我使用下拉菜单调用了索引页面中的ViewComponent。索引页现在看起来如下所示：

 //Responsible for filtering case studies when item in DropDownList is selected. 
    public PartialViewResult CaseStudiesByIndustryPartial(string id)
    {
        if (id == "Select an industry") return PartialView(
            _context.CaseStudies.OrderByDescending(c => c.CaseStudyDate)
                .ThenBy(c => c.CaseStudyTitle).ToList());

        else return PartialView(
            _context.CaseStudies.Where(c => c.CaseStudyIndustry == id).OrderByDescending(c => c.CaseStudyDate)
                 .ThenBy(c => c.CaseStudyTitle).ToList());
    }

  namespace KenCast.ViewComponents
{
    public class CaseStudiesViewComponent : ViewComponent
    {
        //allows for data access
        private readonly ApplicationDbContext _context;

    public CaseStudiesViewComponent(ApplicationDbContext c)
    {
        _context = c;
    }

    public Task<IViewComponentResult> InvokeAsync()
    {
        var casestudies = (from cs in _context.CaseStudies.ToList()
                          .OrderByDescending(cs => cs.CaseStudyDate)
                          .ThenBy(cs => cs.CaseStudyTitle)
                           select cs).ToList();

        return Task.FromResult<IViewComponentResult>(View(casestudies));
    }

}

 <h1>@ViewData["Title"]</h1>
<fieldset>
    <div>
        @Html.DropDownList("Industries", "Select an industry")
    </div>
    <br />
    <div id="target"> @* Loads data from CaseStudiesViewComponent *@
        @await Component.InvokeAsync("CaseStudies")
    </div>
    <div id="log">
    </div>
</fieldset>

<h3>For development only</h3>
<p>This link below to create new application is for development only. Will change once Identity is added to this app.</p>
<p>
    <a asp-action="Create">Create New</a>
</p>

@* Script from: http://weblogs.thinktecture.com/cnagel/2011/06/filter-and-display-data-with-aspnet-mvc-part-2partial-views-and-jquery.html *@
<script type="text/javascript">
    $(document).ready(function () {
        $("#Industries").change(function () {
            $("#log").ajaxError(function (event, jqxhr, settings, exception) {
                alert(exception);
            });
            //loads all cards from all industries
            //Changes cards by industry when selected from dropdown menu
            var industrySelected = $("select option:selected").text();
            $.get('@Url.Action("CaseStudiesByIndustryPartial")',
                  { id: industrySelected }, function (data) {
                      $("#target").html(data);
                  });
        });
    });
</script>

---

希望这对其他人遇到类似问题有所帮助

如果选择第一个选项，CaseStudiesByIndustryPartial方法中id的值将为null，因此您需要对其进行测试，并仅包括.Where（如果其不为null）。若要最初加载它，请使用@{Html.RenderActionCaseStudiesByIndustryPartial；}在主视图中，我向控制器添加了一条if语句，用于标识值等于默认文本的时间。成功了！当我在DropDownList中选择另一项后选择默认选项时，它会显示卡片。耶谢谢@Stephenmuecket问题仍然是如何让卡最初加载。当我插入上面的建议时，我得到了以下错误：“HtmlHelper”不包含“RenderAction”的定义，并且没有扩展方法“RenderAction”和扩展方法“RenderAction”，无法找到接受类型为“IHtmlHelper”的第一个参数的扩展方法“RenderAction”。是否缺少using指令或程序集引用我整个下午都在谷歌上搜索，还没有找到解决办法。有什么有用的提示吗，@StephenMuecke？谢谢我刚刚注意到，您的代码是针对asp.net-core-mvc的-您需要正确标记问题：。在mvc核心中，您需要使用视图组件Html。不支持渲染