Asp.net mvc 5 search, paging and filter by datetime range with out page refresh

Hello 

I'am trying to create search with date time range filtration and without page refresh 

I ll appreciate any help.

My Controller and my view

 public ViewResult Index(string sortOrder, string currentFilter, string searchString, int? page)
        {
            ViewBag.CurrentSort = sortOrder;

            ViewBag.NameSortParm = string.IsNullOrEmpty(sortOrder) ? "name_desc" : "";
            ViewBag.CourseSortParm = string.IsNullOrEmpty(sortOrder) ? "course" : "";
            ViewBag.TopicSortParm = string.IsNullOrEmpty(sortOrder) ? "topic" : "";
            ViewBag.ContentSortParm = string.IsNullOrEmpty(sortOrder) ? "content" : "";
            ViewBag.DateSortParm = sortOrder == "Date" ? "date_desc" : "Date";
            var tutorial = from s in db.Tutorials
                           select s;
            if (!string.IsNullOrEmpty(searchString))
            {
                tutorial = tutorial.Where(s => s.CoursesName.Contains(searchString)
                                       || s.Topic.Contains(searchString) ||
                                       s.Description.Contains(searchString) 
                                       || s.User.FirstName.Contains(searchString) || s.Content.Contains(searchString));
            }

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

            ViewBag.CurrentFilter = searchString;

            switch (sortOrder)
            {
                case "name_desc":
                    tutorial = tutorial.OrderByDescending(s => s.User.FirstName);
                    break;
                case "Date":
                    tutorial = tutorial.OrderBy(s => s.CreatedOn);
                    break;
                case "date_desc":
                    tutorial = tutorial.OrderByDescending(s => s.CreatedOn);
                    break;
                case "course":
                    tutorial = tutorial.OrderBy(s => s.CoursesName);
                    break;
                case "topic":
                    tutorial = tutorial.OrderByDescending(s => s.Topic);
                    break;
                case "content":
                    tutorial = tutorial.OrderByDescending(s => s.Content);
                    break;
                default:
                    tutorial = tutorial.OrderBy(s => s.User.FirstName);
                    break;
            }


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

@model PagedList.IPagedList<NewKLUE.Models.Tutorial>
@using PagedList.Mvc;
<div style="margin-top: 5rem;"></div>


<style>
    .searched ul{
        list-style: none;
        display: inline-flex;
    }
</style>

<div class="container">
    <p>
        @Html.ActionLink("Create New", "Create")
    </p>
    @using (Html.BeginForm("Index", "TutorialSearch", FormMethod.Get))
    {
        <p>
            Search: @Html.TextBox("SearchString", ViewBag.CurrentFilter as string)
            <input type="submit" value="Search" />
        </p>
    }
        <div class="searched">
            @if (Model != null)
            {
                foreach (var item in Model)
                {
                    <div class="wrap">
                        <ul>
                            <li>@Html.DisplayFor(modelItem => item.CoursesName)</li>
                            <li>@Html.DisplayFor(modelItem => item.Topic)</li>
                            <li>@Html.DisplayFor(modelItem => item.Description)</li>
                            <li>Created on: @Html.DisplayFor(modelItem => item.CreatedOn) <span>By: @Html.DisplayFor(modelItem => item.User.FirstName)</span></li>
                            <li>@Html.ActionLink("Details", "Details", new { id = item.TutorialId })</li>
                        </ul>
                    </div>
                }

            }
            else
            {
                <p>Sorry no data!!!</p>
            }
        </div>

    <br />
    Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount

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