Question

I have a Program Scheduling view. When the view loads using GET, it shows a list of programs (in a table) available in the database. It lists only 5 programs (max) randomly. There are two buttons provided

1. Show March Programs. When this button is clicked the table should show only programs that is scheduled for March month.

2. Show 2012 Programs. When this button is clicked the table should show only programs that is scheduled for year 2012.

How do we achieve it?

Note: Also, can you please suggest a solution that will work if the button for "Show 2012 Programs" is replaced with a dropdown list for years.

Based on MVC principle: The UI logic belongs in the view. Input logic belongs in the controller. Business logic belongs in the model.

1. How do we achieve it in quick way?

2. How do we achieve it standard way (following MVC principle listed above)

GET Image

CODE

 namespace MyEventOriginIdentificationTest.Controllers
 {

 public class ProgramSchedule
 {
    public int ProgramID { get; set; }
    public string ProgramName { get; set; }
    public int ScheduledDate { get; set; }
    public int ScheduledMonth { get; set; }
    public int ScheduledYear { get; set; }
 }


public class ProgramTetecastController : Controller
{

    List<ProgramSchedule> wholeProgramList = new List<ProgramSchedule>()
                      {
                        new ProgramSchedule
                        {
                            ProgramID = 1,ProgramName = "2012-March-15",
                            ScheduledDate = 15,ScheduledMonth=3,ScheduledYear=2012
                        },
                        new ProgramSchedule
                        {
                            ProgramID = 2,ProgramName = "2012-March-16",
                            ScheduledDate = 16,ScheduledMonth=3,ScheduledYear=2012
                        },
                        new ProgramSchedule
                        {
                            ProgramID = 3,ProgramName = "2012-April-11",
                            ScheduledDate = 11,ScheduledMonth=4,ScheduledYear=2012
                        },
                        new ProgramSchedule
                        {
                            ProgramID = 4,ProgramName = "2013-Jan-05",
                            ScheduledDate = 5,ScheduledMonth=1,ScheduledYear=2013
                        }

                      };




    public List<ProgramSchedule> GetProgramsScheduleForMonth(int theMonth)
    {

        var monthProgram =
                                from prog in wholeProgramList
                                where prog.ScheduledMonth == theMonth
                                select prog;


        return ((List<ProgramSchedule>)monthProgram);

    }

    public List<ProgramSchedule> GetProgramsScheduleForYear(int theYear)
    {

        var yearProgram =
                                from prog in wholeProgramList
                                where prog.ScheduledYear == theYear
                                select prog;


        return ((List<ProgramSchedule>)yearProgram);

    }


    
    // GET: 
    public ActionResult MyProgramSchedule()
    {
        return View(wholeProgramList);
    } 

    // POST: 
    [HttpPost]
    public ActionResult MyProgramSchedule(FormCollection collection)
    {
        try
        {
            return RedirectToAction("ProgramSchedule");
        }
        catch
        {
            return View();
        }
    }
    
    
    }
}

VIEW

@model IEnumerable<MyEventOriginIdentificationTest.Controllers.ProgramSchedule>

@{
ViewBag.Title = "MyProgramSchedule";
}

<h2>MyProgramSchedule</h2>


<div>


<div id="sub-left" style="width:50%">

<input type="submit" value="Show March Programs" />
<input type="submit" value="Show 2012 Programs" />
<br />
</div>

<div id="sub-right" style="width:50%">

<table>
<tr>
    <th style="border:1px solid Teal; background-color:Gray">
        ProgramID
    </th>
    <th style="border:1px solid Teal; background-color:Gray">
        ProgramName
    </th>
    <th style="border:1px solid Teal; background-color:Gray">
        ScheduledDate
    </th>
    <th style="border:1px solid Teal; background-color:Gray">
        ScheduledMonth
    </th>
    <th style="border:1px solid Teal; background-color:Gray">
        ScheduledYear
    </th>
    <th></th>
</tr>

@foreach (var item in Model) {
<tr>
    <td style="border:1px solid Teal">
        @Html.DisplayFor(modelItem => item.ProgramID)
    </td>
    <td style="border:1px solid Teal">
        @Html.DisplayFor(modelItem => item.ProgramName)
    </td>
    <td style="border:1px solid Teal">
        @Html.DisplayFor(modelItem => item.ScheduledDate)
    </td>
    <td style="border:1px solid Teal">
        @Html.DisplayFor(modelItem => item.ScheduledMonth)
    </td>
    <td style="border:1px solid Teal">
        @Html.DisplayFor(modelItem => item.ScheduledYear)
    </td>
   
</tr>
}

</table>

</div>



</div>

---

READING

1. Store Attributes from Button in a Hidden field

2. ASP.NET MVC3 RAZOR: Retrieving Hidden field Attribute value in Controller (using ViewModel)

3. Issue with multiple views on single view

4. Hide or Disable MVC3 ActionLinks depending on cell value

5. ASP.NET MVC ActionFilterAttribute inject value before model binding

---

Answer 1

First of all I would never separate the 2 methods for month and year as they are exactly the same if you change the method signature to include a from and to date for example.

With this in mind you can do something like:

public ActionResult ShowProgramsBetweenDates(DateTime? from, DateTime? to)
{
    if(from.HasValue && to.HasValue) {
        return View(GetProgramsBetweenDates(from.Value, to.Value));
    }

    return View(wholeProgramList);
} 

public IEnumerable<ProgramSchedule> GetProgramsBetweenDates(DateTime from, DateTime to)
{
    return from prog in wholeProgramList
           where prog.ScheduledDate >= from && prog.ScheduledDate <= to
           select prog;
}

and your buttons would be something like:

@using(Html.BeginForm("ShowProgramsBetweenDates", "ProgramTetecast"))
{
    <input type="button" value="Show March Programs" 
           data-from="01-03-2012" data-to="31-03-2012" />
    <input type="button" value="Show 2012 Programs" 
           data-from="01-01-2012" data-to="31-12-2012" />

    <input type="hidden" id="from" value="" />
    <input type="hidden" id="to" value="" />
}

and a simple JQuery to help

$('form input[type="button"]').on('click', function() { // for all buttons in the form

    $('#from').val($(this).attr('data-from')); // set #from with date-from
    $('#to').val($(this).attr('data-to')); // set #to with date-to

    $(this).closest('form').submit();  // submit the form

});

---

As a principle, and to help your throughout the application lifetime you should never have more than one value for a date, there is no need to split up dates in a “table” as you can extract everything you need from a Date field

for example, your class could simply be as

public class ProgramSchedule
{
  public ProgramSchedule() {} // Always add an empty constructor
  public int ProgramID { get; set; }
  public string ProgramName { get; set; }
  public int ScheduledDate { get; set; }
}

so your DataObject would be something like:

List<ProgramSchedule> wholeProgramList = new List<ProgramSchedule>()
    {
        new ProgramSchedule
        {
            ProgramID = 1, ProgramName = "2012-March-15",
            ScheduledDate = new DateTime(2012, 3, 15)
        },
        new ProgramSchedule
        {
            ProgramID = 2, ProgramName = "2012-March-16",
            ScheduledDate = new DateTime(2012, 3, 16)
        },
        new ProgramSchedule
        {
            ProgramID = 3, ProgramName = "2012-March-11",
            ScheduledDate = new DateTime(2012, 3, 11)
        },
        new ProgramSchedule
        {
            ProgramID = 4, ProgramName = "2012-January-5",
            ScheduledDate = new DateTime(2012, 1, 5)
        },
    };

and in your View, you simple do:

@foreach (var item in Model) {
<tr>
    <td style="border:1px solid Teal">
        @Html.DisplayFor(modelItem => item.ProgramID)
    </td>
    <td style="border:1px solid Teal">
        @Html.DisplayFor(modelItem => item.ProgramName)
    </td>
    <td style="border:1px solid Teal">
        @Html.DisplayFor(modelItem => item.ScheduledDate)
    </td>
    <td style="border:1px solid Teal">
        @item.ScheduledDate.toString("MMM")
    </td>
    <td style="border:1px solid Teal">
        @item.ScheduledDate.ToString("yyyy")
    </td>
</tr>
}