filtering a list based on user input

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Kyle Goulding 30 posts 192 karma points

Oct 13, 2016 @ 15:09
0

Filtering a list Based on User Input

Templates, (partial) views and macros

Umbraco 7
Hi,

I am wanting to filter a list of Courses based on user input.

So initially I want the list to show all of the courses, then if a user clicks a button I want to pass the value to a variable which is being used in the where clause.

Below is the code which I have got at the moment, obviously I would add in the if statements depending on which button/option has been selected by the user, but if I am able to assign a user input to the variable I am sure I will be able to fill in the rest.

@{ var userInput = "Course Category A"; var course = CurrentPage.Site().FirstChild("coursesFolder").Children("course").Where("courseCategory == @0", @userInput).OrderBy("courseDate desc"); }
- @item.Name @item.courseDate
Does anyone know how I would be able to achieve this? Or do I need Umbraco forms to to this?

Thanks in advance
Copy Link
Nik 1593 posts 7151 karma points MVP 6x c-trib

Oct 13, 2016 @ 15:48

0

Hi Kyle,

This is completely achievable without Umbraco Forms.

There are various options available to you, the first is to use some javascript to re-call your current page with a query string attached. You could then edit your view to process the query string.

Alternatively, you could use a surface controller to receive the input and then return the updated list. This could be called via ajax, or it could be a complete page reload.

Nik

Copy Link
Kyle Goulding 30 posts 192 karma points

Oct 14, 2016 @ 11:59

0

Hi Nik,

Thanks for your advice. Do you have any example code similar to what I am trying to achieve with the query strings or know of any tutorials which may cover this?

Thanks for your help.

Copy Link

Kyle Goulding 30 posts 192 karma points

Oct 14, 2016 @ 12:38

Hi Nik,

I think I have figured it out...

<h1>Courses</h1>

<form action="" method="GET">
    <div class="input-group">

            <span class="input-group-btn" style="">
                <button class="btn btn-hee" type="submit" name="category" value="Category A">Category A</button>
                <button class="btn btn-hee" type="submit" name="category" value="Category B">Category B</button>
                <button class="btn btn-hee" type="submit" name="category" value="">All</button>
            </span>
    </div>
</form> 

@{
    @*IF String is not Null*@
    if (!string.IsNullOrEmpty(Request.QueryString["category"]))
    {
        var category = Request.QueryString["category"];
        var course = CurrentPage.Site().FirstChild("coursesFolder").Children("course").Where("courseCategory == @0", @category).OrderBy("courseDate desc");

        <ul>
        @foreach(var item in course)
        {
            <li>
                <a href="@item.Url">@item.Name</a>
                @item.courseDate
            </li>
        }
        </ul>
    }
    else if(string.IsNullOrEmpty(Request.QueryString["category"]))
    {
        var course = CurrentPage.Site().FirstChild("coursesFolder").Children("course").Where("Visible");

        <ul>
        @foreach(var item in course)
        {
            <li>
                <a href="@item.Url">@item.Name</a>
                @item.courseDate
            </li>
        }
        </ul>

    }

Flag this post as spam?