Функция JQuery Keyup не работает (с помощью ajax, asp.net mvc)

Question

Я пытаюсь создать поисковый фильтр с функцией .keyup. Когда я пишу один символ в текстовое поле поиска, он работает нормально, но когда я пытаюсь удалить символ или добавить еще один, он вылетает и выдает ошибку «Внутренняя ошибка сервера». Что я делаю не так? Я пытался проанализировать данные / взятые данные в json / html, и это не помогло. Вот мой код скрипта:

    <script>
    $(document).ready(function () {
        $("#Search").keyup(function () {

            var searchby = $("#searchby").val();
            var searchVal = $("#Search").val();
            var setData = $("#dataSearching");
            var catId = $("#categoryID").val();
            setData.html("");
            $.ajax({
                async: true,
                type: "get",
                url: "/Default/GetSearchingData?categoryID=" + catId + "&searchBy=" + searchby + "&searchValue=" + searchVal,
                dataType: "json",
                contentType: "html",
                success: function (result) {
                    if (result.length == 0) {
                        setData.append('<tr><td colspan="7" style="color: red;">Nie odnaleziono szukanej frazy</td></tr>');                       
                    } else {
                        for (var i in result) {                          
                            var Data = "<tr>" +
                                "<td>" + result[i].AlbumID + "</td>" +
                                "<td>" + result[i].AlbumName + "</td>" +
                                "<td>" + result[i].BandName + "</td>" +
                                "<td>" + result[i].AlbumCover + "</td>" +
                                "<td>" + result[i].Year + "</td>" +
                                "<td>" + parseFloat(result[i].Price) + "</td>" +
                                "<td>" +
                                "<button id=" + result[i].AlbumID + ' type="button" class="btn btn-primary myModals" data-toggle="modal" data-target="#exampleModal-' + result[i].AlbumID + '">' +
                                "Zobacz </button>" +
                                '<div class="modal fade" id="exampleModal-' + result[i].AlbumID + '" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel-' + result[i].AlbumID + '" aria-hidden="true">' +
                                '<div class="modal-dialog" role="document">' +
                                '<div class="modal-content">' +
                                '<div class="modal-header">' +
                                '<h5 class="modal-title" id="exampleModalLabel-' + result[i].AlbumID + '">' + result[i].AlbumName + ", " + result[i].Year + ", " + result[i].BandName + "</h5>" +
                                '<button type="button" class="close" data-dismiss="modal" aria-label="Close">' +
                                '<span aria-hidden="true">&times;</span> </button> </div>' +
                                '<div id="parent-' + result[i].AlbumID + '" class="modal-body">' +
                                "</div>" +
                                '<div class="modal-footer">' +
                                '<button id="closeModal" type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>' +
                                "</div>" +
                                "</div>" +
                                "</div>" +
                                "</div>" +
                                "</td>" +
                                "<td>"+
                                '<input id="categoryID" class="hidden" type="submit" value="' + result[i].CategoryID + "/>" +
                                "</td>"+
                                "</tr>";

                            setData.append(Data);
                        }
                    }
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    //alert(xhr.responseText);
                    alert("Error!!: " + thrownError);
                },
                xhr: function () {
                    var xhr = new window.XMLHttpRequest();
                    return xhr;
                }
            });
        });
    });
    </script>

А вот мое действие по поиску в DefaultController:

 public JsonResult GetSearchingData(int categoryID, string searchBy, string searchValue)
        {
            var albumsWithCategory = (from album in Album.GetAlbumList()
                                      join category in Category.GetCategoriesList()
                                      on album.CategoryID equals category.CategoryID
                                      where (categoryID == album.CategoryID)
                                      select album).ToList();
            List<Album> newAlbumList;

             if (searchBy == "AlbumName")
            {
                newAlbumList = albumsWithCategory.Where(x => x.AlbumName.StartsWith(searchValue, StringComparison.InvariantCultureIgnoreCase) || searchValue == null).ToList();
                return Json(newAlbumList, JsonRequestBehavior.AllowGet);
            }
            else
            {
                newAlbumList = albumsWithCategory.Where(x => x.BandName.StartsWith(searchValue, StringComparison.InvariantCultureIgnoreCase) || searchValue == null).ToList();
                return Json(newAlbumList, JsonRequestBehavior.AllowGet);
            }

        }

Вот моя модель данных (если было бы полезно найти проблему):

    public class BigViewModel
    {
        public IEnumerable<Album> Albums { get; set; }
        public IEnumerable<Category> Categories { get; set; }
        public IEnumerable<Order> Orders { get; set; }
        public IEnumerable<Song> Songs { get; set; }
    }

Изображение с ошибкой: введите описание изображения здесь

Answer 1

Я считаю, что ошибка связана с форматированием в параметрах запроса. Вместо keyup я бы попытался использовать событие ввода, а вместо создания URL-адреса запроса я бы использовал свойство data.

$("#Search").on("input", function () {
    //...
    $.ajax({
        url: "/Default/GetSearchingData",
        type: "get", 
        dataType: "json",
        data: { 
            categoryID: Number(catId), 
            searchBy: searchBy, 
            searchValue: searchVal
        },
        success: function(result) {
            if (result.length > 0) 
            {
                var rows = response.map(item => {
                    return `
                        <tr>
                            <td>${item.AlbumID}</td>
                            <td>${item.AlbumName}</td>
                            <td>${item.BandName}</td>
                            <td>${item.AlbumCover}</td>
                            <td>...</td>
                        </tr>
                    `;
                }).join("");
                setData.html( `<table>${rows}</table>` );
            } else {
                setData.html( "<table><tr>Not found</tr></table>" );
            }
        },
        error: function(xhr) {  }
    });
});