Harsh.Shah.ifour Ответов: 1

Как добавить живой поиск в MVC с помощью AJAX и jquery.


Привет
Нужна помощь, чтобы разобраться в этом.

У меня есть таблица данных категории на странице MVC с полем поиска:

Это моя таблица с полем поиска:
<input type="text" id="search" placeholder="Search by category Name"/> 

<table id="catList" class="table table-bordered table-striped text-center" style="margin-top:20px;height:auto">
                    <thead class="text-uppercase" style="font-weight:bold; font-size:20px;">
                        <tr>
                            <td>Category Name</td>
                            <td>Category Image</td>
                            @if(Session ["ad_id"] != null)
                            {
                                <td>Delete</td>
                            }
                        </tr>
                    </thead>
                    <tbody>
                        @foreach(var item in Model)
                        {
                            <tr class="text-center" id="row_@item.cat_id">
                                <td style="padding-top:36px;font-size:20px;">@item.cat_name</td>
                                <td><img src="@Url.Content(item.cat_image)" style=" height:100px;width:150px ;border-radius: 2px" /></td>
                                @if(Session ["ad_id"] != null)
                                {
                                    <td style="padding-top:36px">
                                        <a href="javascript:void(0);" class="btn btn-danger" onclick="confirmDelete(@item.cat_id)"><span></span></a>
                                    </td>
                                }
                            </tr>
                        }
                    </tbody>
                </table>

Когда пользователь вводит любой ключ в поле поиска, я делаю ajax-вызов контроллеру.
Это код моего контроллера:
public ActionResult ViewCategory( string searchString )
        {
            var categories = from m in dbnew.tbl_category
                             select m;
            if(!String.IsNullOrEmpty(searchString))
            {
                categories = categories.Where(s => s.cat_name.Contains(searchString));
            }

            return View(categories);
        }


Что я уже пробовал:

Здесь Ajax-вызов выполнен успешно, но теперь я не знаю, как добавить данные результата на страницу просмотра после успеха Ajax-вызова.

я пытался сделать это, но не получил результата.

AJAX-код:
$(document).ready(function () {
        $("#search").keyup(function () {
            $("#catList").hide("fast");

            var newStrSearch = $("#search").val();

            //var newStrSearch = $("#search").val();


            $.ajax({
                type: "POST",
                url: "/Admin/ViewCategory",
                data: { searchString: newStrSearch },
                success: function (categories) {
                    //code to show result data in View page
                }
            });
        });
    });

Надеюсь на лучшее решение.
Заранее спасибо.

1 Ответов

Рейтинг:
0

Richard Deeming

Воспользуйся jQuery-х load метод[^]:

$(function(){
    $("#search").keyup(function(){
        var data = { searchString: $(this).val() };
        $("#catList > tbody").load("/Admin/ViewCategory #catList > tbody", data);
    });
});
Я также был бы склонен вернуть a PartialView из действия в ответ на запрос AJAX:
public ActionResult ViewCategory( string searchString )
{
    var categories = from m in dbnew.tbl_category
                     select m;

    if (!string.IsNullOrEmpty(searchString))
    {
        categories = categories.Where(s => s.cat_name.Contains(searchString));
    }

    if (Request.IsAjaxRequest()) return PartialView(categories);
    return View(categories);
}
Таким образом, ответ на запрос AJAX не включает HTML - код со страницы макета, который он все равно проигнорирует.