Как вернуть ответ при поиске в реальном времени Ajax, используя Jquery?

Question

Я пытаюсь запросить сервер SQL для автоматического заполнения результатов поиска без перезагрузки страницы. У меня есть поле поиска с раскрывающимся списком вариантов для выбора, и я хочу показать аналогичные данные со значением поиска.

Я передаю всю таблицу базы данных из контроллера в представление с помощью простых простых html для обработки на стороне клиента и использовать ajax для передачи значения поиска обратно контроллеру

<div class="container">
    <b>Search By : </b>
    <select id="SearchBy">
        <option value="errormsg">errormsg</option>
        <option value="StackTrace">StackTrace</option>
    </select><br /><br />
    @Html.TextBox("Search")<input type="submit" id="SearchBtn" value="Search" /><br /><br />
    <table class="table table-bordered">
        <thead>
            <tr>
                <th width="24%">ErrorId</th>
                <th width="4%">errordate</th>
                <th width="24%">Url</th>
                <th width="24%">StackTrace</th>
                <th width="24%">errormsg</th>
            </tr>
        </thead>
        <tbody id="DataSearching">
            @foreach (var x in Model)
            {
                <tr class="table-success">
                    <td>@x.ErrorID</td>
                    <td>@x.errordate</td>
                    <td>@x.Url</td>
                    <td>@x.StackTrace</td>
                    <td>@x.errormsg</td>
                </tr>
            }
        </tbody>
    </table>
</div>
<script src="/js/jquery-3.3.1.min.js"></script>
<script>
    $(document).ready(function () {
        $("#SearchBtn").click(function () {
            var SearchBy = $("#SearchBy").val();
            var SearchValue = $("#Search").val();
            var SetData = $("#DataSearching");
            SetData.html("");
            $.ajax({
                type: "post",
                url: "/Error/Find?SearchBy=" + SearchBy + "&SearchValue" + SearchValue,
                contentType: "html",
                success: function (result) {
                    if (result.length == 0) {
                        SetData.append('<tr style="color:red"><td colspan="3">No Match</td></tr>')
                    }
                    else {
                        $.each(result, function (index, value) {
                            var Data = "<tr>" +
                                "<td>" + value.ErrorID + "</td>" +
                                "<td>" + value.errordate + "</td>" +
                                "<td>" + value.Url + "</td>" +
                                "<td>" + value.StackTrace + "</td>" +
                                "<td>" + value.errormsg + "</td>";
                            SetData.append(Data);
                        });
                    }
                }
            });
        });
    })
</script>

Этот метод предназначен для получения значения поиска и сравнения его с базой данных для возврата аналогичного значения для view:

public JsonResult GetSearchingData(string SearchBy, string SearchValue)
        {
            List<tblerror_msg> ErrorList = new List<tblerror_msg>();
            if(SearchBy == "errormsg")
            {
                try
                {
                    String errormsg = SearchValue;
                    ErrorList = db.tblerror_msg.Where(x => x.errormsg == SearchValue || SearchValue == null).ToList();
                }
                catch (FormatException)
                {
                    Console.WriteLine("{0} Is Not an Error Message", SearchValue);
                }
                return Json(ErrorList, JsonRequestBehavior.AllowGet);
            }
            else
            {
                ErrorList = db.tblerror_msg.Where(x => x.StackTrace.StartsWith(SearchValue) || SearchValue == null).ToList();
                return Json(ErrorList, JsonRequestBehavior.AllowGet);
            }
        }

Когда я ищу значение, таблица исчезает и ничего не возвращается. Я новичок в jquery / ajax, поэтому я не уверен, как отлаживать, если ошибок нет, как мне вернуть ответ из моего метода ajax?

Answer 1

Сначала вы должны использовать событие 'keyup' JavaScript, потому что вам нужен поиск в реальном времени. Во-вторых, измените JsonResult на ActionResult и верните тот же массив Json. Кроме того, если я не ошибаюсь, вам не хватает закрывающего тега в блоке else. Было бы гораздо лучше использовать вспомогательную модель следующим образом:

public class SearchDetailsModel {
    public string SearchValue { get; set; }
    public string SearchBy { get; set; }
}

И передать экземпляр объекта SearchDetailsModel в качестве параметра в

GetSearchingData(SearchDetailsModel model) { } 

в сообщении ajax метод выполните следующие действия

var formData = new FormData();
formData.append('SearchValue', Search);
formData.append('SearchBy', SearchBy);

и внутри добавьте:

data: formData,