mvc上的DropDownList過濾了卡片/盒子的顯示，但是我無法顯示所有已加載或默認選擇的卡片

Question

我有一個局部視圖，當前可以顯示三個卡片/框，其中包含有關不同案例研究的信息片段。 我希望此頁面加載，顯示所有卡，然后還有一個下拉菜單，該菜單通過其CaseStudyIndustry屬性過濾每個卡，並且當您選擇“選擇行業” /默認時可以返回顯示所有卡選擇。

我從http://weblogs.thinktecture.com/cnagel/2011/06/filter-and-display-data-with-aspnet-mvc-part-2partial-views-and-jquery.html獲得了很多幫助，但是我似乎無法讓所有卡都顯示在加載狀態或選擇默認的DropDownList項目時。 我已經堅持了幾個星期。

這是我的代碼：

部分視圖：

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

帶有下拉菜單的索引/頁面：

<h1>@ViewData["Title"]</h1>
<fieldset>
    <div>
        @Html.DropDownList("Industries", "Select an industry")
    </div>
    <br />
    <div id="target">
    </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>

腳本來自： http : //weblogs.thinktecture.com/cnagel/2011/06/filter-and-display-data-with-aspnet-mvc-part-2partial-views-and-jquery.html

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

控制器：

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

任何幫助將不勝感激。 謝謝！！

Answer 1

借助Stephen Muecke的提示來解決此問題。 在下拉框中選擇的第一項的值是“選擇行業”，因此當選擇“選擇行業時”，我使用了if語句來更改顯示的卡片。

現在，Controller中的代碼如下所示：

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

不知道這是否是最優雅的方法，但是它有效！ 如果有人對如何在不重復代碼的情況下編寫此代碼提出其他建議，請告訴我！

控制器中的代碼更改了視圖中的名片，但僅在我選擇了另一個行業然后選擇“選擇一個行業”之后才顯示所有名片。

我最終創建了一個ViewComponent，在頁面加載時加載了所有卡。 ViewComponent最終看起來像這樣：

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

}

}

我在索引頁面（帶有下拉菜單的頁面）中調用了ViewComponent。 索引頁現在看起來像這樣：

 <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>

希望這對其他人遇到類似問題有幫助。