filter mvc view using checkbox

Question

User-932740093 posted

I am using mvc, Visual Studio 2017 and have made an tv-tableau that show the programs of 5 channels. My data is stored in a table (full)
and look something like this:

ID. Channel Program Date Time
1 One News 2018-11-11 18:00
2 One Sport 2018-11-11 20:00
3 Two Inception 2018-11-11 09:50
4 Three Seinfeldt 2018-11-11 11.00
5 Four Alf 2018-11-11 15:30
5 Four News 2018-11-11 19:00
.
.
.
**This is my Controller**

namespace Uppgift4.Controllers
{
public class FullsController : Controller
{
private TvProgramDBEntities db = new TvProgramDBEntities();

public ActionResult Index()
{
return View(db.Full);
}

**This is My View**

@model IEnumerable<Uppgift4.Models.Full>
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>

<table class="table table-bordered table-hover">
<tr>
<th>
Channel
</th>
<th>
Program
</th>
<th>
Date
</th>
<th>
Time
</th>
<th></th>
</tr>

@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Channel)
</td>
<td>
@Html.DisplayFor(modelItem => item.Program)
</td>
<td>
@Html.DisplayFor(modelItem => item.Date)
</td>
<td>
@Html.DisplayFor(modelItem => item.Time)
</td>
</tr>
}

This code works fine and i get a list of all my programs for my 5 channels in my index view.

Now come my problem.. I want to be able to filter this table, by adding 5 checkboxes in my view(one for each channel), so i can choose which channel i want to show data from. So when i for example check channel One and two i just get the programs for this two channels in my view, How can i add this feature in my view? Anyone now a good way to. go?

My idea is that my filter values are coming from my full table, The propertie:channel have 5 different values (One,Two, Three,Four,Five) these are my filtervalues. and then in view i tried to loop through my full table with foreach and present these 5 values as checkboxes. Then i wanted a HTTPPost action in my control that check which values have been checked and if so display these in my view. Have tried to implement this but havent succeed, Any idea how to wrote this in code?

Answer 1

User1520731567 posted

Hi jedeje，

According to your code,The currently rendered page looks like this:

You display all channel and all theme shows for all channels.

Do you mean you want to display just channels(One Two Three Four) at the beginning,and If the user click the checkbox,it will display all theme shows which belongs to the channel?(like Bootstrap accordion?)

Best Regards.

Yuki Tao

Answer 2

User-932740093 posted

Hi.

Yes, exactly. The user get the full view of all channels in the beginning, then he can decide which channels he want to show. So if he just check the checkbox for channel One, he only see channel One programs 

Answer 3

User1520731567 posted

Hi jedeje,

Sorry for the late.

Yes, exactly. The user get the full view of all channels in the beginning, then he can decide which channels he want to show. So if he just check the checkbox for channel One, he only see channel One programs 

If all data in one table,I make a demo,I have added checkbox and Bootstrap Accordion style,you could refer to:

Controller:

//ViewModel 
public class ChannelModel
        {
            public int ID { get; set; }
            public string Channel { get; set; }
            public string Program { get; set; }
            public DateTime Date { get; set; }
            public string Time { get; set; }

        }
        public ActionResult channel_Index()
        {
            List<ChannelModel> model = new List<ChannelModel>();
            model.Add(new ChannelModel { ID = 1, Channel = "One", Program = "News", Date = DateTime.Now, Time = "18:00" });
            model.Add(new ChannelModel { ID = 2, Channel = "One", Program = "Sport", Date = DateTime.Now, Time = "20:00" });
            model.Add(new ChannelModel { ID = 3, Channel = "Two", Program = "Inception", Date = DateTime.Now, Time = "09:50" });
            model.Add(new ChannelModel { ID = 4, Channel = "Three", Program = "Seinfeldt", Date = DateTime.Now, Time = "11:00" });
            model.Add(new ChannelModel { ID = 5, Channel = "Four", Program = "Alf", Date = DateTime.Now, Time = "15:30" });
            model.Add(new ChannelModel { ID = 6, Channel = "Four", Program = "News ", Date = DateTime.Now, Time = "19:00" });

            return View(model);
        }

View:

@model IEnumerable<XXX.XXX.ChannelModel>
@{
    ViewBag.Title = "channel_Index";
    var list = Model.ToList();
    var list1 = list.Where(_ => _.Channel == "One").Select(_ => _.Program).ToList();//select records which in one channel
    var list2 = list.Where(_ => _.Channel == "Two").Select(_ => _.Program).ToList();
    var list3 = list.Where(_ => _.Channel == "Three").Select(_ => _.Program).ToList();
    var list4 = list.Where(_ => _.Channel == "Four").Select(_ => _.Program).ToList();

}

//involve Bootstrap accordion libraries
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


<style>
    .hiddenRow {
        padding: 0 !important;
    }

    .in-line {
        display: inline;
    }
</style>
<table class="table table-condensed" style="border-collapse:collapse;">
    <thead>
        <tr>
            <th>
                Channel
            </th>
            <th>
                
            </th>
        </tr>
    </thead>
    <tbody>
        <tr class="accordion-toggle">
            <td><input type="checkbox" data-toggle="collapse" data-target="div[id*='demo1']" /> One</td>
        </tr>
        @for (var i = 0; i < @list1.Count; i++)
        {
            <tr><td colspan="2" class="hiddenRow"><div id="demo1+'@i'+" class="accordian-body collapse">Program:@list1[i]</div> </td> </tr>

        }

        <tr data-toggle="collapse" data-target="#demo2" class="accordion-toggle">
            <td><input type="checkbox" data-toggle="collapse" data-target="div[id*='demo2']" /> Two</td>
        </tr>
        @for (var i = 0; i < @list2.Count; i++)
        {
            <tr><td colspan="2" class="hiddenRow"><div id="demo2+'@i'+" class="accordian-body collapse">Program:@list2[i]</div> </td> </tr>

        }

        <tr data-toggle="collapse" data-target="#demo3" class="accordion-toggle">
            <td><input type="checkbox" data-toggle="collapse" data-target="div[id*='demo3']" /> Three</td>
        </tr>
        @for (var i = 0; i < @list3.Count; i++)
        {
            <tr><td colspan="2" class="hiddenRow"><div id="demo3+'@i'+" class="accordian-body collapse">Program:@list3[i]</div> </td> </tr>

        }

        <tr data-toggle="collapse" data-target="#demo4" class="accordion-toggle">
            <td><input type="checkbox" data-toggle="collapse" data-target="div[id*='demo4']" /> Four</td>
        </tr>
        @for (var i = 0; i < @list4.Count; i++)
        {
            <tr><td colspan="2" class="hiddenRow"><div id="demo4+'@i'+" class="accordian-body collapse">Program:@list4[i]</div> </td> </tr>

        }
    </tbody>
</table>

How my demo works:

Best Regards.

Yuki Tao

Answer 4

User-932740093 posted

Great! thx a lot Yuki Tao, your code worked great and nice solution also (where thinking about Another way to display, but this is nicer :-)

Just had a small detail left now, to present my database table instead of the hardcoded values in the channel_index Actionresult.

Have tried to write the Actionresult like this instead:

public ActionResult channel_index()

{

 return view(db.full)

}

or

public ActionResult channel_index()
{
List<Full> model = new List<Full>();
foreach (var item in db.Full)
{
f.Channel = item.Channel;
f.Program = item.Program;
model.Add(f);
}
return View(model);
}

But nothing happen when i click on each checkbox (no program is displayed)

Probably something simple i forgot, can you see whats missing?

this is working

public ActionResult channel_index()
{
List<Full> model = new List<Full>();
{
model.Add(new Full { Channel = "one", Program = "Fame" });
return View(model);

}
}

Answer 5

User1520731567 posted

Hi jedeje，

My demo using model binding is based on your table which you post the first time:

ID. Channel Program Date Time
1 One News 2018-11-11 18:00
2 One Sport 2018-11-11 20:00
3 Two Inception 2018-11-11 09:50
4 Three Seinfeldt 2018-11-11 11.00
5 Four Alf 2018-11-11 15:30
5 Four News 2018-11-11 19:00

You need to pay attention to the model between View and controller.It must be the same type.

Check your FULL model and make changes based on the FULL model in the view.

@model IEnumerable<XXX.XXX.ChannelModel>
@{
    ViewBag.Title = "channel_Index";
    var list = Model.ToList();
    var list1 = list.Where(_ => _.Channel == "One").Select(_ => _.Program).ToList();//select records which in one channel
    var list2 = list.Where(_ => _.Channel == "Two").Select(_ => _.Program).ToList();
    var list3 = list.Where(_ => _.Channel == "Three").Select(_ => _.Program).ToList();
    var list4 = list.Where(_ => _.Channel == "Four").Select(_ => _.Program).ToList();

}

You should note these variables,Otherwise the front end cannot get the data.

Best Regards.

Yuki Tao

Answer 6

User-932740093 posted

Hi

Note variable, what du you mean?