CODEWITHSUNDEEP
c#asp.netasp.net-mvc
Nav
Nav

Reputation: 71

How to display the details based on month and year in C# MVC

I am kind of new to c# MVC. I want to display the image and its contents or details based on month and year. How do I do that? Right now I am displaying all. But I want to display something like this:

My images are in different table called "photos". and date content are in diffrent table called "article".

2018

July

[Image ] [Hello World]

June

[Image] [Hello world!!! Hello world]

View:

@model Magzine.Models.Article


<div class="row">

    @if (Model.Image.Count > 0)
            
     

{

        
@foreach (var img in Photos)
        {
           
            <div class="col-md-2">
                <img class="Img" src="[email protected](img.img_url) "  /></a>
            </div>
       }

     }               
            <div class="col-md-10">
                <strong>@Model.date</a></strong>
                <strong>@Model.content</a></strong>
            </div>    
        </div>

Database table: enter image description here

Upvotes: 0

Views: 1313

Answers (1)

Antoine V
Antoine V

Reputation: 7204

This is an idea. Your model is a list of article. So you need to group your list by Year and Month of the article. 

Model.GroupBy(item => item.date.Month)

Foreach group, you should print the name of the month by the method below and his collection associated.

CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(group.Key)

But I recommend you to do these actions in the server and return a model containing the refined data. No action calculation on View, just if and for are acceptable.

View:

   @foreach (var groupYear in Model.GroupBy(item => item.data.Year).Select(group => new { Key = group.Key, Items = group.ToList() })
       {{Key}}
        @foreach (var groupMonth in Items.GroupBy(item => item.date.Month))
             <span>{CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(groupMonth.Key)};
             @foreach (var article in groupMonth )    
             {
                  <div class="row">
                      <div class="col-md-2">
                          <img class="Img" src="[email protected](article.img_url)"/></a>
                      </div>
                      <div class="col-md-10">
                          <strong>@article.date</a></strong>
                          <strong>@article.content</a></strong>
                      </div>
                  </div>
    }     

      }

Upvotes: 2

Related Questions