Can data be updated through the Index View using b

Question

I am converting my way of thinking and programming from Webforms to MVC3. For the record, it hurts my head.

So I am making a calendar that has a month view (page only shows the days and events for that month). I'm putting two buttons Previous and Next to go from month to month. In Webforms, any change would just happen on Calendar.aspx. However, it seems that I'll have to make two ActionResults (both HttpPost). One goes to a Previous view and another to a Next view. Just to get the same effect. I was hoping to just update the calendar on the Index ActionResult/View but I don't see how to do that. My Index view is below.

So long story short, is there a way to update the Calendar and return to the Index view? Or do I have to make two other Views (Previous and Next) to show the new month when I hit the corresponding buttons (Previous and Next)?

@model HTMLMVCCalendar.Models.MonthModel

@{
    ViewBag.Title = "Home Page";
    int month = Model.Month;
    int year = Model.Year;
    int numberOfDays = DateTime.DaysInMonth(year, month);
    int startDay = (int)(Convert.ToDateTime(month + "/1/" + year).DayOfWeek);
    int startCount = 1;
}

<h2>@ViewBag.Message</h2>
<p>
    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>
<div>  
    <table id="calendar">
        <thead>
            <tr>
                <th id="monthHeader" colspan="7">
                    <h3>
                    @{
                        @Convert.ToDateTime(month + "/1/" + year).ToString("MMMM");
                    }
                    </h3>
                </th>
            </tr>
            <tr>
                <th>Sun</th>
                <th>Mon</th>
                <th>Tues</th>
                <th>Wed</th>
                <th>Thur</th>
                <th>Fri</th>
                <th>Sat</th>
            </tr>
        </thead>
        <tbody>
            <tr>
            @for (int i = 0; i < startDay; ++i)
            {
                @:<td><div><span>&nbsp;</span></div><div><span>&nbsp;</span></div></td>
            }
            @for (int j = startDay; j < ((numberOfDays + startDay) + 1); ++j)
            {
                <td>
                    <div><span>@startCount</span></div>
                    <div>
                        <span>
                            @{
                                var todaysEvents = Model.AllDays.ToList().FindAll(d => d.CalDate.Day == startCount);
                                foreach(HTMLMVCCalendar.Models.CalendarModel eventsToday in todaysEvents)
                                {
                                    foreach(HTMLMVCCalendar.Models.EventModel eventToday in eventsToday.CalEvents)
                                    {
                                        <text>
                                            &nbsp;@eventToday.DayCode:<br />
                                            &nbsp;@eventToday.Subject:<br />
                                            &nbsp;@eventToday.EventDesc<br /><br />
                                        </text>
                                    }                                 
                                }
                            }
                        </span>
                    </div>
                </td>
                            if ((j + 1) % 7 == 0)
                            {
                    @:</tr><tr>
                }
                ++startCount;
            }
            </tr>
        </tbody>
    </table>
    <div>
        <input id="previous" type="submit" value="submit" />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input id="next" type="submit" value="submit" />
    </div> 
</div>

UPDATE: I've tried this and I think it should work. Not sure why it didn't?

    <div>
        @using (Html.BeginForm("Previous", "Home"))
        {
            <input id="previous" type="submit" value="Previous" />
        }
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        @using (Html.BeginForm("Next", "Home"))
        {
            <input id="next" type="submit" value="Next" />
        }
    </div> 


public ActionResult Index()
{
    ViewBag.Message = "Welcome to ASP.NET MVC!";

    int month;
    int year;

    int.TryParse(ViewBag.Year, out year);
    int.TryParse(ViewBag.Month, out month);
    Calendar monthEventsCal = new Calendar();

    HTMLMVCCalendar.Models.MonthModel allMonthEvents = monthEventsCal.monthEvents(year, month);
    return View("Index", allMonthEvents);            
}

[HttpPost]
public ActionResult Previous(HTMLMVCCalendar.Models.MonthModel prevMonth)
{
    Calendar monthEventsCal = new Calendar();
    var newMonth = monthEventsCal.previousMonth(prevMonth.Year, prevMonth.Month);

    ViewBag.Month = newMonth.Item2;
    ViewBag.Year = newMonth.Item1;
    return RedirectToAction("Index");
}

[HttpPost]
public ActionResult Next(HTMLMVCCalendar.Models.MonthModel nextMonth)
{
    Calendar monthEventsCal = new Calendar();
    var newMonth = monthEventsCal.nextMonth(nextMonth.Year, nextMonth.Month);

    ViewBag.Month = newMonth.Item2;
    ViewBag.Year = newMonth.Item1;
    return RedirectToAction("Index");
}

Answer 1

There are a couple of ways to do this, the simplest is just do an ajax call and update your view with the returned data http://bob-the-janitor.blogspot.com/2010/12/easy-ajax-with-aspnet-mvc-and-jquery.html if you want to get fancy you can even return a view from the ajax call and replace you current view as shown here http://bob-the-janitor.blogspot.com/2011/11/more-ajax-with-mvc-using-partial-views.html

Answer 2

Suggested potential way to do it

public virtual ActionResult Index(int? month)
{
    int relativeMonth = 0;
    if(month.HasValue)
        relativeMonth = month.Value;

    //Create ViewModel fetching calender data using relativeMonth value.
    //For example if relativeMonth is 0 fetch current month view model.
    //If relative month is -3 fetch calendar data from three months ago.

    if(Request..IsAjaxRequest()) //Optional. If you want ajax.
        return PartialView("Calendar", model);

    return View(model);
}

Using this method your next and and previous buttons are now links where Previous will link to relativeMonth - 1 and next is relativeMonth + 1. I don't think making them posts is necessary since you're not actually submitting any form data (using this method I'd make next and previous links styled like buttons).

If you do want to enable ajax, I'd stick your calendar view in a seperate cshtml and call it as a partial view in index.cshtml.