2sxc |通过实体下拉列表将第二个过滤器添加到模板应用程序

Question

我正在尝试向 FAQ Categories>Questions w/ Filter App 添加另一个过滤器，并基本上复制了第一个过滤器的工作代码，但即使我设置了第二个实体类型，它也不起作用第一个过滤器。请参阅下面的示例代码。

我的 cshtml 代码：

@using ToSic.SexyContent
@functions
    {
    // variable which will contain the sorted categories
    IEnumerable<dynamic> sortedCategories;

    IEnumerable<dynamic> sortedTypes;

    // Prepare the data - get all categories through the pipeline
    public override void CustomizeData()
    {
    // get all categories of these questions, then get the distinct entities
    // this could all be done on 1 line, but it would be harder for people who don't know LINQ yet
    var questionsInThisModule = AsDynamic(App.Data["CO-Filter"].List);
    var categoriesUsed = questionsInThisModule.SelectMany(q => ((List<DynamicEntity>)q.Categories));
    var distinctCategories = categoriesUsed.Select(AsEntity).Distinct();    // Distinct only works reliably when cast as entity
    sortedCategories = AsDynamic(distinctCategories).OrderBy(q => q.Name);

    var typesInThisModule = AsDynamic(App.Data["CO-Filter"].List);
    var typesUsed = typesInThisModule.SelectMany(a => ((List<DynamicEntity>)a.Types));
    var distinctTypes = typesUsed.Select(AsEntity).Distinct();    // Distinct only works reliably when cast as entity
    sortedTypes = AsDynamic(distinctTypes).OrderBy(a => a.Name);
    }
}
<h2 class="sc-element">@ListContent.Title @ListContent.Toolbar</h2>
<div>@Html.Raw(ListContent.Introduction)</div>
<div>
    <strong>@App.Resources.FilterBy </strong>
    <select id="ddlFeatureFilter">
        <option value="all">@App.Resources.ShowAll</option>
        @foreach (var cat in sortedCategories)
        {
        <option value="@cat.EntityId">@cat.Title</option>
        }
    </select>
</div>
<div>
    <strong>@App.Resources.FilterBy </strong>
    <select id="ddlFeatureFilterOne">
        <option value="allOne">@App.Resources.ShowAll</option>
        @foreach (var catOne in sortedTypes)
        {
        <option value="@catOne.EntityId">@catOne.Title</option>
        }
    </select>
</div>
<ol>
    @foreach (var q in AsDynamic(App.Data["CO-Filter"]))
    {
    <li class="sc-element faq-set faq-setOne" data-tags="@String.Join(",", ((List<DynamicEntity>)q.Categories).Select(a => AsDynamic(a).EntityId))">
        @q.Toolbar @Edit.Toolbar(actions: "edit,new", contentType: "CO-Filter")
        <a class="faq-question" style="cursor: pointer">
            @if(!String.IsNullOrEmpty(q.LinkText))
            {
            @q.LinkText
            } else {
            @q.Link
            }
        </a>
    </li>
    }
</ol>

<script src="@App.Path/assets/faq.js" data-enableoptimizations="true"></script>

<script>
    $(document).ready(function() {
    initFaqSection("DnnModule-" + @Dnn.Module.ModuleID, "@ListPresentation.ShowEffect");
    });
</script>

我更新的 assets/faq js 代码：

function initFaqSection(containerSelector, showEffect) {
    var container = $("." + containerSelector);
    $(".faq-question", container).click(function (e) {
        var answer;
        switch(showEffect) {
            case "slide":
                answer = $(e.target).closest(".faq-set").find(".faq-answer");
                answer.slideToggle();
                e.preventDefault();
                break;
            case "lightbox":
                var question = $(e.target);
                answer = question.next();
                answer.dialog({
                    title: question.text(),
                    autoOpen: true,
                    dialogClass: "dnnFormPopup",
                    modal: true
                });
            default:
                break;
        }
    });

    // Attach drop-down filter
    $("#ddlFeatureFilter", container).change(function (changeEvent) {
        var tagFilter = changeEvent.target[changeEvent.target.selectedIndex].value;
        console.log("tf:" + tagFilter);
        //alert(tagFilter);
        $(".faq-set", container).each(function (i, e) {
            var tags = ($(e).attr('data-tags') + ",all").split(',');
            console.log(tags);
            if ($.inArray(tagFilter, tags) != -1)// || tagFilter == "all")
                $(e).slideDown();
            else
                $(e).slideUp();
        });
    });

        // Attach drop-down filter
    $("#ddlFeatureFilterOne", container).change(function (changeEvent) {
        var tagFilter = changeEvent.target[changeEvent.target.selectedIndex].value;
        console.log("tf:" + tagFilter);
        //alert(tagFilter);
        $(".faq-set", container).each(function (i, e) {
            var tags = ($(e).attr('data-tags') + ",allOne").split(',');
            console.log(tags);
            if ($.inArray(tagFilter, tags) != -1)// || tagFilter == "allOne")
                $(e).slideDown();
            else
                $(e).slideUp();
        });
    });

}

内容项实体字段设置：

内容项本身：

我目前拥有的（注意第二个过滤器只显示但不按 'type' 过滤）。

我知道我的代码不正确，但有没有简单的解决方案？

此外，如果显示 link（用户未输入 link 文本），是否有任何简单的方法删除路径 url 和扩展名？

感谢

更新：

我试过像这样创建一个组合函数：

function initFaqSection(containerSelector, showEffect) {
    var container = $("." + containerSelector);
    $(".faq-question", container).click(function (e) {
        var answer;
        switch(showEffect) {
            case "slide":
                answer = $(e.target).closest(".faq-set").find(".faq-answer");
                answer.slideToggle();
                e.preventDefault();
                break;
            case "lightbox":
                var question = $(e.target);
                answer = question.next();
                answer.dialog({
                    title: question.text(),
                    autoOpen: true,
                    dialogClass: "dnnFormPopup",
                    modal: true
                });
            default:
                break;
        }
    });
    // Attach drop-down filters
    function runFilters() { 
        var filter1 = $("#ddlFeatureFilterOne").value;
        var filter2 = $("#ddlFeatureFilterTwo").value;
        //alert(filters);
        $("#ddlFeatureFilterTwo", container).change(runFilters);
            $(".faq-set", container).each(function (i, e) {
            var tags = ($(e).attr('data-tags') + ",allTwo").split(',');
            console.log(tags);
            if ($.inArray(filter1, tags) != -1 && $.inArray(filter2, tags) != -1)
                $(e).slideDown();
            else
                $(e).slideUp();
            });
    }
}

我的cshtml代码如下：

<div>
    <strong>@App.Resources.FilterBy </strong>
    <select id="ddlFeatureFilterOne">
        <option value="allTwo">@App.Resources.ShowAll</option>
        @foreach (var catOne in sortedCategories)
        {
        <option value="@catOne.EntityId">@catOne.Name</option>
        }
    </select>
    <select id="ddlFeatureFilterTwo">
        <option value="allTwo">@App.Resources.ShowAll</option>
        @foreach (var catTwo in sortedTypes)
        {
        <option value="@catTwo.EntityId">@catTwo.Name</option>
        }
    </select>
</div>

但这仍然只适用于第一个过滤器？

Answer 1

因此，作为旁注：您在一个问题中提出了一系列不同的问题，这使得回答起来更加困难。我建议您将来拆分问题。

现在您遇到的问题是您有两个过滤器，目前彼此之间一无所知。所以真正的解决方案是

有一个组合的 runFilters() 方法，该方法从两个下拉列表中获取值并应用两者
你的绑定应该只调用这个，比如 $("#ddlFeatureFilterOne", container).change(runFilters);

runFilters 看起来像这样（伪代码）：

``` 函数 runFilters() { var filter1 = $("#ddl...").value; // 不确定它是否是 .value var filter2 = $("#...")...;

    $(".faq-set", container).each(function (i, e) {
        var tags = ($(e).attr('data-tags') + ",allOne").split(',');
        console.log(tags);
        if ($.inArray(filter1, tags) != -1 && $.inArray(filter2, tags) != -1)
            $(e).slideDown();
        else
            $(e).slideUp();
    });

}

```

类似的东西 :)。为了删除路径，您希望通过 lastIndexOf("/") 在 JS 中 trim 它 - 请参阅 https://www.w3schools.com/JSREF/jsref_lastindexof.asp or using the c# equivalent https://msdn.microsoft.com/en-us/library/system.string.lastindexof(v=vs.110).aspx

Answer 2

最后我找到了解决办法....

它要求我添加一个 'data-title' 标签，否则我无法 link 与 filter1（类别）和 filter2（类型）连接的数据：

data-title="@String.Join(",", ((List<DynamicEntity>)q.Categories).Select(a => AsDynamic(a).EntityId))"

所以我将 'data-title' 与我的类别过滤器相关联，并将 'data-tags' 与我的类型过滤器相关联。

我的 cshtml 过滤器代码：

<div>
    <strong>@App.Resources.FilterBy </strong>
    <select id="ddlFeatureFilterOne">
        <option value="allTwo">@App.Resources.ShowAll</option>
        @foreach (var catOne in sortedCategories)
        {
        <option value="@catOne.EntityId">@catOne.Name</option>
        }
    </select>
    <select id="ddlFeatureFilterTwo">
        <option value="allTwo">@App.Resources.ShowAll</option>
        @foreach (var catTwo in sortedCategoriesTypes)
        {
        <option value="@catTwo.EntityId">@catTwo.Name</option>
        }
    </select>
</div>
<ol>
    @functions{
        public static string SplitWord(string text)
        {
            int slash = text.LastIndexOf("/");
            int dot = text.LastIndexOf(".");
            dot--;
            var data = text.Substring(slash + 1, dot - slash);
            return data;
        }
    }
            @foreach (var q in AsDynamic(App.Data["CatFilter"]))
        {
                <li class="sc-element faq-set" data-title="@String.Join(",", ((List<DynamicEntity>)q.Categories).Select(a => AsDynamic(a).EntityId))" data-tags="@String.Join(",", ((List<DynamicEntity>)q.Types).Select(a => AsDynamic(a).EntityId))">
                    @q.Toolbar @Edit.Toolbar(actions: "edit,new,more", contentType: "CatFilter")
                    <a class="faq-question" href="@q.Link" style="cursor: pointer">
                        @if (!String.IsNullOrEmpty(q.LinkText))
                    {
                            @q.LinkText
                    }
                    else
                    {
                            @SplitWord(q.Link);
                    }
                    </a>
                </li>
        }
</ol>

以及我调整后的runFilters函数代码：

    function runFilters() { 
    var filter1 = $("#ddlFeatureFilterOne").value;
    var filter2 = $("#ddlFeatureFilterTwo").value;
    }
    //alert(tagFilter);
    $("#ddlFeatureFilterOne", container).change(function(){
        var filter1 = $("#ddlFeatureFilterOne").val();
        var filter2 = $("#ddlFeatureFilterTwo").val();
        $(".faq-set", container).each(function (i, e) {
            var title = ($(e).attr('data-title') + ",allTwo").split(',');
            var tags = ($(e).attr('data-tags') + ",allTwo").split(',');
            console.log(title);
            if ($.inArray(filter1, title) != -1 && $.inArray(filter2, tags) != -1)
            $(e).slideDown();
        else
            $(e).slideUp();
        });
    });
    $("#ddlFeatureFilterTwo", container).change(function () {
        var filter1 = $("#ddlFeatureFilterOne").val();
        var filter2 = $("#ddlFeatureFilterTwo").val();
        $(".faq-set", container).each(function (i, e) {
            var tags = ($(e).attr('data-tags') + ",allTwo").split(',');
            var title = ($(e).attr('data-title') + ",allTwo").split(',');
            console.log(tags);
            if ($.inArray(filter1, title) != -1 && $.inArray(filter2, tags) != -1)
                $(e).slideDown();
            else
                $(e).slideUp();
        });
    });

希望这对其他有类似问题的人有帮助

2sxc |通过实体下拉列表将第二个过滤器添加到模板应用程序

2sxc | Add second filter by entity dropdown to template app

javascript

razor

2sxc