Error after submitting from a ajax form

Question

I just installed the nuget PagedList for the first time based on the tutorial provided by Microsoft but I get the following error:

"System.InvalidOperationException: The model item passed into the dictionary is of type 'System.Collections.Generic.List'1[BOL4.EventCalendar]', but this dictionary requires a model item of type 'PagedList.IPagedList'1[BOL4.EventCalendar]'." after submitting a new row from Add Popup. The row is inserted in the database.

Here is my code for it:

DentAppEntities db = new DentAppEntities();


    [HttpGet]
    public ActionResult Add()
    {
        return PartialView();
    }

    [HttpPost]
    public ActionResult Add(BOL4.EventCalendar appc)
    {
        if (ModelState.IsValid)
        {
            db.EventCalendars.Add(appc);
            db.SaveChanges();
        }
        return View("List", db.EventCalendars.ToList());
    }

here is my List View:

@model PagedList.IPagedList<BOL4.EventCalendar>
@using PagedList.Mvc;
<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />

@{
    ViewBag.Title = "List";
}
<h2>Home Page</h2>
<p>
    <a href="@Url.Action("Add", "Home")" id="Add" class="btn btn-primary"> Add</a>
</p>    
<div class="table-responsive">
    <table>
        <thead>
            <tr">
                <th>
                    @Html.ActionLink("Title", "List", new { sortOrder = ViewBag.NameSortParm, currentFilter = ViewBag.CurrentFilter })
                </th>
                <th>
                    @Html.ActionLink("Description", "List", new { sortOrder = ViewBag.NameSortParm, currentFilter = ViewBag.CurrentFilter })
                </th>
                <th>
                    @Html.ActionLink("StartAt", "List", new { sortOrder = ViewBag.NameSortParm, currentFilter = ViewBag.CurrentFilter })
                </th>
                <th>
                    @Html.ActionLink("EndAt", "List", new { sortOrder = ViewBag.NameSortParm, currentFilter = ViewBag.CurrentFilter })
                </th>
                <th>
                    @Html.ActionLink("IsFullDay", "List", new { sortOrder = ViewBag.NameSortParm, currentFilter = ViewBag.CurrentFilter })
                </th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Title)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Description)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.StartAt)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.EndAt)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.IsFullDay)
                    </td>
                    <td>
                    </td>
                </tr>
            }
        </tbody>
    </table>
    <br />
    Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount

    @Html.PagedListPager(Model, page => Url.Action("List",
    new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))
</div>

<div class="modal fade" id="Add-Model" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Add Event</h4>
            </div>
            <div class="divForAdd">
            </div>
        </div>
    </div>
</div>    

<script>
    $(document).ready(function () {
        $('#Add').click(function (event) {
            event.preventDefault();
            $.get(this.href, function (response) {
                $('.divForAdd').html(response);
            });
            $('#Add-Model').modal({
                backdrop: 'static',
            }, 'show');
            return false;
        });           
    });
</script>

and here is the Add partial view:

@model BOL4.EventCalendar

@using (Ajax.BeginForm("Add", "Home", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "div-record", OnSuccess = "$('.close').click()" }))
{
    //Textboxes here
    <div class="modal-footer">
        <button type="submit" class="btn btn-success" name="cmd">Save</button>
    </div>

}

Also Here is Index controller:

public ViewResult List(string sortOrder, string currentFilter, string searchString, int? page)
    {
        ViewBag.CurrentSort = sortOrder;
        ViewBag.NameSortParm = String.IsNullOrEmpty(sortOrder) ? "name_desc" : "";
        ViewBag.DateSortParm = sortOrder == "Date" ? "date_desc" : "Date";

        if (searchString != null)
        {
            page = 1;
        }
        else
        {
            searchString = currentFilter;
        }

        ViewBag.CurrentFilter = searchString;

        var eves = from s in db.EventCalendars
                   select s;
        if (!String.IsNullOrEmpty(searchString))
        {
            eves = eves.Where(s => s.Title.Contains(searchString)
                                   || s.Description.Contains(searchString));
        }
        switch (sortOrder)
        {
            case "Title":
                eves = eves.OrderByDescending(s => s.Title);
                break;
            case "Description":
                eves = eves.OrderBy(s => s.Description);
                break;
            default:  // Name ascending 
                eves = eves.OrderBy(s => s.Title);
                break;
        }

        int pageSize = 3;
        int pageNumber = (page ?? 1);
        return View(eves.ToPagedList(pageNumber, pageSize));
    }

Also tried another way, see the following link: After Submit TotalPages Throws error. Can anybody please help me with this issue. Thanks in advance!