How to enable an ajax request?

See more:

C#

ASP.NET

Ajax

form

MVC5

I'm trying to modify an ASP.NET MVC 5 web application.
The index currently shows all the movies on my database, the entity "Movie" is my model.

I want to use Ajax to implement a partial view in the Index, in order to show a search form to filter the movies, results will be filtered based on the input parameters "Title" and "Director".

My implementation doesn't work: after entering the required parameters in the text fields of the form, I click on the "Search" button but the movies are not filtered, I still see all of them.

I debugged it and noticed that the Ajax Request is not recognized, the statements inside the following conditional expression are not be read:

if(Request.IsAjaxRequest())

What I have tried:

-----------------------------------
Controller:

public ActionResult Index(string selectedTitle, string selectedDirector)
     {
         List<Movie> movies= _movieProxy.GetAll();

         var movies= from singleMovie in movies
                      select singleMovie ;

         if(Request.IsAjaxRequest())
         {
             movies= _movieProxy.GetMovieByProperties(selectedTitle, selectedDirector);

             movie= from movieSearch in movies
                    where (string.IsNullOrEmpty(selectedTitle)
                    || movieSearch .Title.ToLower().Contains(selectedTitle.ToLower()))
                    && ((string.IsNullOrEmpty(selectedDirector)
                    ||
                    movieSearch.Director.ToLower().Contains(selectedDirector.ToLower()))
                    select movieSearch ;
             return PartialView("_Index", movie);
           }

           return View(movie);
       }

-------------------------------------------------------------
Index View:

@model IEnumerable<DataModel.Movie>

@using (Ajax.BeginForm(new AjaxOptions()
{
    HttpMethod = "get",
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "Search"
}))
{
   
    <div class="form-inline" >
        <label>Title</label>
        <input type="search" name="searchTitle" />
        <label>Director</label>
        <input type="search" name="searchDirector" />
     </div>
}
<table class="table">
    
<div id="Search"

    @foreach (var item in Model)
    {
        <p>
            @Html.Partial("_Index", Model)
        </p>

        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Title)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Director)
            </td>            
        </tr>
    }

    </div>
</table>

--------------------------------------------------------------
_Index (partial view):

@model IEnumerable<DataModel.Movie>

<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Title)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Director)
        </th>
   </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Title)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Director)
        </td>
     </tr>
}

</table>