Controller method is not called by jQuery - MVC

Question

I am trying to call a controller method through jQuery, jQuery functions is called but the its not calling the controller method. here is my jQuery Code:

@{
  int year = DateTime.Today.Year;
}

    <script>
        var year = '@year';
        var url = '@Url.Action("Details", "Holidays")'; 
        var updateHolidays = function() {
            $('#year').text(year);
            $('#details').load(url, { id: year });
        } 
        $('#previous').click(function() {
            year--;
            updateHolidays();
        });
        $('#next').click(function () {
            year++;
            updateHolidays();
        });
    </script>

    @if (Session["LoggedUserName"] != null)
    {
        <table>
            <tr style="height:10px">
                <td>
                    <h2>Holiday Calandar</h2>
                </td>
                <td>
                    <input type="image" id="previous" value="submit" src="~/Images/left-arrow.png" style="width:30px" />
                </td>
                <td>
                    <h2>@year</h2>
                </td>
                <td>
                    <input type="image" id="next" value="submit" src="~/Images/right-arrow.png" style="width:30px"  />
                </td>
                <td>
                        <ul id="menu">
                        <li>@Html.ActionLink("Add Holiday", "Create", null, new { id = "lnkCreate" })</li>
                        </ul>
                </td>

            </tr>


        </table>
    }

and this is my controller method code:

public ActionResult Details(int year)
        {
            var model = db.tbl_HolidayList.Where(h => Convert.ToDateTime(h.Holiday_date).Year == year);
            return PartialView(model);
        }

I tried to debug but its not going into detail method. can anybody tell where I am mistaking??

Answer 1

Instead of this

$('#details').load(url, { id: year });

try

$('#details').load(url, { year: year });

Since the name of your parameter in the action is Details(int year)

The other issue is you need an element with id=details:

<div id='details'></div>

Because .load will not fire if the selector finds no elements.