【ASP.NET MVC】Ajax.BeginFormを使って処理中にローディングスピナーを表示する

using System.Collections.Generic;
using System.Web.Mvc;
using System.Threading;
using WebApplication.Models;

namespace WebApplication.Controllers
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index(string search)
        {
            // 「検索」ボタンクリック時の処理
            if (search != null)
            {
                // 画面に表示するユーザーリストの生成
                var userList = new List<UserModel>
                {
                    new UserModel { Id = 1, Name = "Mike", Age = 18 },
                    new UserModel { Id = 2, Name = "Jane", Age = 25 },
                    new UserModel { Id = 3, Name = "Bob", Age = 20 }
                };

                // 3秒停止
                Thread.Sleep(3000);

                // 部分ビューを返す
                return PartialView("_IndexPartial", userList);
            }
            return View();
        }
    }
}

namespace WebApplication.Models
{
    public class UserModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }
    }
}

<h2>ユーザー名検索</h2>

@* Ajax.BeginFormの使用 *@
@using (Ajax.BeginForm("Index", "Home", new AjaxOptions
{
    LoadingElementId = "loading",
    HttpMethod = "Get",
    UpdateTargetId = "target",
    OnBegin = "onBegin",
    OnComplete = "onComplete"
}))
{
        <button class="btn btn-primary" value="search" name="search" type="submit" >
　　　　     検索
　　　　　</button>
        @* ローディング画像の表示（初期状態は非表示） *@
        <img src="@Url.Content("~/Content/Image/ajax-loader.gif")" id="loading" style="display:none;" />
}

@* 部分ビュー表示箇所 *@
<div id="target"></div>

@* Ajax.BeginFormを使うためのjqueryファイルの呼び出し *@
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

@* ローディング画像の表示切り替え用スクリプト *@
<script>
    function onBegin() {
        $('#search').prop('disabled', true);
    };

    function onComplete() {
        $('#search').prop('disabled', false);
    };

    $(document).ready(function () { });
</script>

@model IEnumerable<WebApplication.Models.UserModel>

<hr />
@if (Model == null) { }

<p>全 @Model.Count() 件</p>
<table class="table table-bordered">
    <thead>
        <tr>
            <th>
                <div class="text-center">ID</div>
            </th>
            <th>
                <div class="text-center">ユーザー名</div>
            </th>
            <th>
                <div class="text-center">年齢</div>
            </th>
        </tr>
    </thead>
    @if (Model.Count() > 0)
    {
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>@Html.DisplayFor(m => item.Id)</td>
                    <td>@Html.DisplayFor(m => item.Name)</td>
                    <td>@Html.DisplayFor(m => item.Age)</td>
                </tr>
            }
        </tbody>
    }
    else
    {
        <tbody>
            <tr>
                <td colspan="3" align="center">データがありません</td>
            </tr>
        </tbody>
    }
</table>