How to display data in div based on which button clicked: C# MVC

Question

I am developing an application in MVC using Entity Framework and C#. I want to display all my cases based on month when I click on year. To filter years I am running for loop to get the years from 2009 to current year and displaying years like button. By default or when I first enter the page I should be able to see the current year details. When I click on any year, the page should refreshed and get all the cases of each month for that clicked year. If i click 2017 I should get only the months of 2017 which have cases.

For simple Understanding all my years on the top are like button. When I click on any year i should populate that years data.

Something like this:

View:

@model List<Magazine.Models.Case>

@{
    ViewBag.Title = "CaseList";
}

<div>
    <div>
         <div class="container">
            <div>

                @{
                    var year = DateTime.Now.Year;
                    for (var i = year; i > 2009; i--)
                    {
                        <div class="col-md-1 ">
                            @Html.ActionLink(i.ToString(), "MyCases/" + i, new { onclick="$('.container').hide(); $('.container.i').show();" })
                        </div>
                    }
                }
            </div>
        </div>

        <div class="container">
            @foreach (var groupMonth in Model.GroupBy(case => new { case.date.Value.Year, case.date.Value.Month }))
            { 
               <h3> @System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(groupMonth.Key.Month)</h3>
                foreach (var case in groupMonth)
                {
                    <div class="row">
                            @case.date
            <div>
                            @case.title
            </div>
            <div>
               @case.description
            </div>  
                    </div>
                }
            }
        </div>

Controller :

public ActionResult MyCases(int year = 0)
{
  var cases = _db.case.Where(p => p.date.Value.Year >= 2009 &&
                  p.pdate.Value.Year <= DateTime.Now.Year)
                      .OrderByDescending(p => p.date).ToList();

  return View(cases);
}

Right now in my code i have just added the years loop and added the onclick for that but it it not filtering the data based on year. I need to get the clicked year value and pass it foreach loop to display the clicked year details. How do I do that?

I don't really understand your question. The page contains a list of years clickable, below this list, that is all your cases. If you click on a year, you go to another page with the case for the year clicked ou a refresh in the same page? — Antoine V, Jul 11 '18 at 15:57
Instead of going to another page I want to refresh the same page and display. — NVP, Jul 11 '18 at 16:01
I need to pass the year clicked (in my case its is value i from for loop) to this foreach loop @foreach (var groupMonth in Model.GroupBy(case => new { case.date.Value.Year, case.date.Value.Month })) to filter the data. how do I do that? — NVP, Jul 12 '18 at 13:24
Your example shows a hard coded year (2009). Are you getting the year when you hit the controller? Also, your action link with a parameter looks off. See [here](https://stackoverflow.com/questions/316889/asp-net-mvc-passing-an-id-in-an-actionlink-to-the-controller). — Steve Greene, Jul 12 '18 at 20:44

score 0 · Answer 1 · answered Jul 13 '18 at 07:22

0

I would:

Move the 2nd container into a partial view
Create a new action method that just returns the data for a particular year
Load in the partial view using Ajax on the relevant button click.

You may be able to use @ajax helpers

https://www.c-sharpcorner.com/UploadFile/abhikumarvatsa/ajax-actionlink-and-html-actionlink-in-mvc/

answered Jul 13 '18 at 07:22

Jon Ryan

1,497
1
13
29

I Moved the 2nd container into partial view. But I am not sure how can I get data for a particular year in action method – NVP Jul 13 '18 at 18:22

score 0 · Accepted Answer · answered Jul 13 '18 at 20:32

I moved my second container into partial view and pass the clicked year which is coming from for loop to controller to filter the data. View : var year = DateTime.Now.Year; for (var i = year; i > 2009; i--)

{

                var j = @i - 1;
                <div class="col-md-1 ">
                    @Html.ActionLink(i.ToString(), "MyCases/" + i)
                </div>

            }

Controller :

public ActionResult MyCases(int i) {

 var cases = _db.case.Where(p => p.date.Value.Year == i)
              .OrderByDescending(p => p.date).ToList();

 return View(cases);

}

How to display data in div based on which button clicked: C# MVC

2 Answers2